@asante-org/atlascopco-vt-litesitegenerator 3.0.25 → 3.0.26

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 +188 -6
  2. package/dist/index.scss +188 -6
  3. package/dist/src/components/lsg/LsgAccordion/LsgAccordion.d.ts +15 -2
  4. package/dist/src/components/lsg/LsgAccordion/LsgAccordion.stories.d.ts +3 -1
  5. package/dist/themes/theme-1.css +120 -8
  6. package/dist/themes/theme-1.css.map +1 -1
  7. package/dist/themes/theme-2.css +116 -57
  8. package/dist/themes/theme-2.css.map +1 -1
  9. package/dist/themes/theme-3.css +110 -6
  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
@@ -375,6 +375,11 @@
375
375
  width: 100%;
376
376
  height: 100%;
377
377
  }
378
+ .lsg-banner__image .cmp-image__link {
379
+ display: block;
380
+ width: 100%;
381
+ height: 100%;
382
+ }
378
383
  .lsg-banner__image .cmp-image__image {
379
384
  display: block;
380
385
  width: 100%;
@@ -400,6 +405,13 @@
400
405
  line-height: 1.2;
401
406
  text-transform: uppercase;
402
407
  }
408
+ .lsg-banner__pre-title .cmp-title__element {
409
+ margin: 0;
410
+ color: inherit;
411
+ font: inherit;
412
+ line-height: inherit;
413
+ text-transform: inherit;
414
+ }
403
415
  .lsg-banner__pre-title-marker {
404
416
  display: none;
405
417
  flex: 0 0 auto;
@@ -421,18 +433,48 @@
421
433
  font-weight: 600;
422
434
  line-height: 1.1;
423
435
  }
436
+ .lsg-banner__heading .cmp-title__element {
437
+ margin: 0;
438
+ color: inherit;
439
+ font: inherit;
440
+ line-height: inherit;
441
+ word-break: inherit;
442
+ }
424
443
  .lsg-banner__body {
425
444
  min-width: 0;
426
445
  font-size: var(--lsg-size-body, 18px);
427
446
  font-weight: 400;
428
447
  line-height: 1.5;
429
448
  }
449
+ .lsg-banner__body .cmp-text {
450
+ margin: 0;
451
+ color: inherit;
452
+ font: inherit;
453
+ line-height: inherit;
454
+ }
455
+ .lsg-banner__body .cmp-text p {
456
+ margin: 0;
457
+ color: inherit;
458
+ font: inherit;
459
+ line-height: inherit;
460
+ word-break: break-word;
461
+ }
430
462
  .lsg-banner__actions {
431
463
  display: flex;
432
464
  flex-wrap: wrap;
433
465
  align-items: center;
434
466
  gap: 16px;
435
467
  }
468
+ .lsg-banner__actions .lsg-button-container {
469
+ display: flex;
470
+ flex: 0 0 auto;
471
+ width: auto;
472
+ margin: 0;
473
+ padding: 0;
474
+ }
475
+ .lsg-banner__actions .lsg-button {
476
+ flex: 0 0 auto;
477
+ }
436
478
  .lsg-banner__cta {
437
479
  flex: 0 0 auto;
438
480
  }
@@ -2620,7 +2662,8 @@
2620
2662
  width: 100%;
2621
2663
  min-width: 0;
2622
2664
  }
2623
- .lsg-accordion__heading {
2665
+ .lsg-accordion__heading,
2666
+ .lsg-accordion .cmp-accordion__header {
2624
2667
  margin: 0;
2625
2668
  padding: 0;
2626
2669
  font: inherit;
@@ -2658,6 +2701,7 @@
2658
2701
  overflow-wrap: anywhere;
2659
2702
  }
2660
2703
  .lsg-accordion__icon {
2704
+ position: relative;
2661
2705
  box-sizing: border-box;
2662
2706
  flex: 0 0 auto;
2663
2707
  display: inline-flex;
@@ -2688,7 +2732,7 @@
2688
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 {
2689
2733
  display: none;
2690
2734
  }
2691
- .lsg-accordion__icon--open .lsg-accordion__icon-plus-vertical, .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-vertical {
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 {
2692
2736
  display: none;
2693
2737
  }
2694
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 {
@@ -2734,12 +2778,59 @@
2734
2778
  max-width: 100%;
2735
2779
  height: auto;
2736
2780
  }
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
+ }
2737
2815
  @media (prefers-reduced-motion: reduce) {
2738
- .lsg-accordion__icon-svg {
2816
+ .lsg-accordion__icon-svg, .lsg-accordion__icon.cmp-accordion__icon {
2739
2817
  transition: none;
2740
2818
  }
2741
2819
  }
2742
2820
 
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;
2826
+ }
2827
+
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%;
2832
+ }
2833
+
2743
2834
  .lsg-tabs {
2744
2835
  position: relative;
2745
2836
  font-family: var(--lsg-font-family-primary);
@@ -4257,6 +4348,11 @@
4257
4348
  width: 100%;
4258
4349
  height: 100%;
4259
4350
  }
4351
+ .lsg-banner__image .cmp-image__link {
4352
+ display: block;
4353
+ width: 100%;
4354
+ height: 100%;
4355
+ }
4260
4356
  .lsg-banner__image .cmp-image__image {
4261
4357
  display: block;
4262
4358
  width: 100%;
@@ -4282,6 +4378,13 @@
4282
4378
  line-height: 1.2;
4283
4379
  text-transform: uppercase;
4284
4380
  }
4381
+ .lsg-banner__pre-title .cmp-title__element {
4382
+ margin: 0;
4383
+ color: inherit;
4384
+ font: inherit;
4385
+ line-height: inherit;
4386
+ text-transform: inherit;
4387
+ }
4285
4388
  .lsg-banner__pre-title-marker {
4286
4389
  display: none;
4287
4390
  flex: 0 0 auto;
@@ -4303,18 +4406,48 @@
4303
4406
  font-weight: 600;
4304
4407
  line-height: 1.1;
4305
4408
  }
4409
+ .lsg-banner__heading .cmp-title__element {
4410
+ margin: 0;
4411
+ color: inherit;
4412
+ font: inherit;
4413
+ line-height: inherit;
4414
+ word-break: inherit;
4415
+ }
4306
4416
  .lsg-banner__body {
4307
4417
  min-width: 0;
4308
4418
  font-size: var(--lsg-size-body, 18px);
4309
4419
  font-weight: 400;
4310
4420
  line-height: 1.5;
4311
4421
  }
4422
+ .lsg-banner__body .cmp-text {
4423
+ margin: 0;
4424
+ color: inherit;
4425
+ font: inherit;
4426
+ line-height: inherit;
4427
+ }
4428
+ .lsg-banner__body .cmp-text p {
4429
+ margin: 0;
4430
+ color: inherit;
4431
+ font: inherit;
4432
+ line-height: inherit;
4433
+ word-break: break-word;
4434
+ }
4312
4435
  .lsg-banner__actions {
4313
4436
  display: flex;
4314
4437
  flex-wrap: wrap;
4315
4438
  align-items: center;
4316
4439
  gap: 16px;
4317
4440
  }
4441
+ .lsg-banner__actions .lsg-button-container {
4442
+ display: flex;
4443
+ flex: 0 0 auto;
4444
+ width: auto;
4445
+ margin: 0;
4446
+ padding: 0;
4447
+ }
4448
+ .lsg-banner__actions .lsg-button {
4449
+ flex: 0 0 auto;
4450
+ }
4318
4451
  .lsg-banner__cta {
4319
4452
  flex: 0 0 auto;
4320
4453
  }
@@ -7538,7 +7671,8 @@
7538
7671
  width: 100%;
7539
7672
  min-width: 0;
7540
7673
  }
7541
- .lsg-accordion__heading {
7674
+ .lsg-accordion__heading,
7675
+ .lsg-accordion .cmp-accordion__header {
7542
7676
  margin: 0;
7543
7677
  padding: 0;
7544
7678
  font: inherit;
@@ -7576,6 +7710,7 @@
7576
7710
  overflow-wrap: anywhere;
7577
7711
  }
7578
7712
  .lsg-accordion__icon {
7713
+ position: relative;
7579
7714
  box-sizing: border-box;
7580
7715
  flex: 0 0 auto;
7581
7716
  display: inline-flex;
@@ -7606,7 +7741,7 @@
7606
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 {
7607
7742
  display: none;
7608
7743
  }
7609
- .lsg-accordion__icon--open .lsg-accordion__icon-plus-vertical, .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-vertical {
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 {
7610
7745
  display: none;
7611
7746
  }
7612
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 {
@@ -7652,11 +7787,58 @@
7652
7787
  max-width: 100%;
7653
7788
  height: auto;
7654
7789
  }
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
+ }
7655
7824
  @media (prefers-reduced-motion: reduce) {
7656
- .lsg-accordion__icon-svg {
7825
+ .lsg-accordion__icon-svg, .lsg-accordion__icon.cmp-accordion__icon {
7657
7826
  transition: none;
7658
7827
  }
7659
7828
  }
7829
+
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;
7835
+ }
7836
+
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%;
7841
+ }
7660
7842
  :root {
7661
7843
  --atlascopco-blue-1: #f5fbfc;
7662
7844
  --atlascopco-blue-3: #b8e0ec;
package/dist/index.scss CHANGED
@@ -375,6 +375,11 @@
375
375
  width: 100%;
376
376
  height: 100%;
377
377
  }
378
+ .lsg-banner__image .cmp-image__link {
379
+ display: block;
380
+ width: 100%;
381
+ height: 100%;
382
+ }
378
383
  .lsg-banner__image .cmp-image__image {
379
384
  display: block;
380
385
  width: 100%;
@@ -400,6 +405,13 @@
400
405
  line-height: 1.2;
401
406
  text-transform: uppercase;
402
407
  }
408
+ .lsg-banner__pre-title .cmp-title__element {
409
+ margin: 0;
410
+ color: inherit;
411
+ font: inherit;
412
+ line-height: inherit;
413
+ text-transform: inherit;
414
+ }
403
415
  .lsg-banner__pre-title-marker {
404
416
  display: none;
405
417
  flex: 0 0 auto;
@@ -421,18 +433,48 @@
421
433
  font-weight: 600;
422
434
  line-height: 1.1;
423
435
  }
436
+ .lsg-banner__heading .cmp-title__element {
437
+ margin: 0;
438
+ color: inherit;
439
+ font: inherit;
440
+ line-height: inherit;
441
+ word-break: inherit;
442
+ }
424
443
  .lsg-banner__body {
425
444
  min-width: 0;
426
445
  font-size: var(--lsg-size-body, 18px);
427
446
  font-weight: 400;
428
447
  line-height: 1.5;
429
448
  }
449
+ .lsg-banner__body .cmp-text {
450
+ margin: 0;
451
+ color: inherit;
452
+ font: inherit;
453
+ line-height: inherit;
454
+ }
455
+ .lsg-banner__body .cmp-text p {
456
+ margin: 0;
457
+ color: inherit;
458
+ font: inherit;
459
+ line-height: inherit;
460
+ word-break: break-word;
461
+ }
430
462
  .lsg-banner__actions {
431
463
  display: flex;
432
464
  flex-wrap: wrap;
433
465
  align-items: center;
434
466
  gap: 16px;
435
467
  }
468
+ .lsg-banner__actions .lsg-button-container {
469
+ display: flex;
470
+ flex: 0 0 auto;
471
+ width: auto;
472
+ margin: 0;
473
+ padding: 0;
474
+ }
475
+ .lsg-banner__actions .lsg-button {
476
+ flex: 0 0 auto;
477
+ }
436
478
  .lsg-banner__cta {
437
479
  flex: 0 0 auto;
438
480
  }
@@ -2620,7 +2662,8 @@
2620
2662
  width: 100%;
2621
2663
  min-width: 0;
2622
2664
  }
2623
- .lsg-accordion__heading {
2665
+ .lsg-accordion__heading,
2666
+ .lsg-accordion .cmp-accordion__header {
2624
2667
  margin: 0;
2625
2668
  padding: 0;
2626
2669
  font: inherit;
@@ -2658,6 +2701,7 @@
2658
2701
  overflow-wrap: anywhere;
2659
2702
  }
2660
2703
  .lsg-accordion__icon {
2704
+ position: relative;
2661
2705
  box-sizing: border-box;
2662
2706
  flex: 0 0 auto;
2663
2707
  display: inline-flex;
@@ -2688,7 +2732,7 @@
2688
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 {
2689
2733
  display: none;
2690
2734
  }
2691
- .lsg-accordion__icon--open .lsg-accordion__icon-plus-vertical, .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-vertical {
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 {
2692
2736
  display: none;
2693
2737
  }
2694
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 {
@@ -2734,12 +2778,59 @@
2734
2778
  max-width: 100%;
2735
2779
  height: auto;
2736
2780
  }
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
+ }
2737
2815
  @media (prefers-reduced-motion: reduce) {
2738
- .lsg-accordion__icon-svg {
2816
+ .lsg-accordion__icon-svg, .lsg-accordion__icon.cmp-accordion__icon {
2739
2817
  transition: none;
2740
2818
  }
2741
2819
  }
2742
2820
 
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;
2826
+ }
2827
+
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%;
2832
+ }
2833
+
2743
2834
  .lsg-tabs {
2744
2835
  position: relative;
2745
2836
  font-family: var(--lsg-font-family-primary);
@@ -4257,6 +4348,11 @@
4257
4348
  width: 100%;
4258
4349
  height: 100%;
4259
4350
  }
4351
+ .lsg-banner__image .cmp-image__link {
4352
+ display: block;
4353
+ width: 100%;
4354
+ height: 100%;
4355
+ }
4260
4356
  .lsg-banner__image .cmp-image__image {
4261
4357
  display: block;
4262
4358
  width: 100%;
@@ -4282,6 +4378,13 @@
4282
4378
  line-height: 1.2;
4283
4379
  text-transform: uppercase;
4284
4380
  }
4381
+ .lsg-banner__pre-title .cmp-title__element {
4382
+ margin: 0;
4383
+ color: inherit;
4384
+ font: inherit;
4385
+ line-height: inherit;
4386
+ text-transform: inherit;
4387
+ }
4285
4388
  .lsg-banner__pre-title-marker {
4286
4389
  display: none;
4287
4390
  flex: 0 0 auto;
@@ -4303,18 +4406,48 @@
4303
4406
  font-weight: 600;
4304
4407
  line-height: 1.1;
4305
4408
  }
4409
+ .lsg-banner__heading .cmp-title__element {
4410
+ margin: 0;
4411
+ color: inherit;
4412
+ font: inherit;
4413
+ line-height: inherit;
4414
+ word-break: inherit;
4415
+ }
4306
4416
  .lsg-banner__body {
4307
4417
  min-width: 0;
4308
4418
  font-size: var(--lsg-size-body, 18px);
4309
4419
  font-weight: 400;
4310
4420
  line-height: 1.5;
4311
4421
  }
4422
+ .lsg-banner__body .cmp-text {
4423
+ margin: 0;
4424
+ color: inherit;
4425
+ font: inherit;
4426
+ line-height: inherit;
4427
+ }
4428
+ .lsg-banner__body .cmp-text p {
4429
+ margin: 0;
4430
+ color: inherit;
4431
+ font: inherit;
4432
+ line-height: inherit;
4433
+ word-break: break-word;
4434
+ }
4312
4435
  .lsg-banner__actions {
4313
4436
  display: flex;
4314
4437
  flex-wrap: wrap;
4315
4438
  align-items: center;
4316
4439
  gap: 16px;
4317
4440
  }
4441
+ .lsg-banner__actions .lsg-button-container {
4442
+ display: flex;
4443
+ flex: 0 0 auto;
4444
+ width: auto;
4445
+ margin: 0;
4446
+ padding: 0;
4447
+ }
4448
+ .lsg-banner__actions .lsg-button {
4449
+ flex: 0 0 auto;
4450
+ }
4318
4451
  .lsg-banner__cta {
4319
4452
  flex: 0 0 auto;
4320
4453
  }
@@ -7538,7 +7671,8 @@
7538
7671
  width: 100%;
7539
7672
  min-width: 0;
7540
7673
  }
7541
- .lsg-accordion__heading {
7674
+ .lsg-accordion__heading,
7675
+ .lsg-accordion .cmp-accordion__header {
7542
7676
  margin: 0;
7543
7677
  padding: 0;
7544
7678
  font: inherit;
@@ -7576,6 +7710,7 @@
7576
7710
  overflow-wrap: anywhere;
7577
7711
  }
7578
7712
  .lsg-accordion__icon {
7713
+ position: relative;
7579
7714
  box-sizing: border-box;
7580
7715
  flex: 0 0 auto;
7581
7716
  display: inline-flex;
@@ -7606,7 +7741,7 @@
7606
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 {
7607
7742
  display: none;
7608
7743
  }
7609
- .lsg-accordion__icon--open .lsg-accordion__icon-plus-vertical, .lsg-accordion__header[aria-expanded=true] .lsg-accordion__icon-plus-vertical {
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 {
7610
7745
  display: none;
7611
7746
  }
7612
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 {
@@ -7652,11 +7787,58 @@
7652
7787
  max-width: 100%;
7653
7788
  height: auto;
7654
7789
  }
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
+ }
7655
7824
  @media (prefers-reduced-motion: reduce) {
7656
- .lsg-accordion__icon-svg {
7825
+ .lsg-accordion__icon-svg, .lsg-accordion__icon.cmp-accordion__icon {
7657
7826
  transition: none;
7658
7827
  }
7659
7828
  }
7829
+
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;
7835
+ }
7836
+
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%;
7841
+ }
7660
7842
  :root {
7661
7843
  --atlascopco-blue-1: #f5fbfc;
7662
7844
  --atlascopco-blue-3: #b8e0ec;
package/dist/src/components/lsg/LsgAccordion/LsgAccordion.d.ts CHANGED
@@ -2,8 +2,11 @@ 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. */
5
6
  title: string;
7
+ /** Arbitrary panel content. In AEM this maps to an authorable container panel. */
6
8
  content: React.ReactNode;
9
+ /** Explicit initial expansion for this item. Mirrors Core Accordion expandedItems. */
7
10
  defaultOpen?: boolean;
8
11
  }
9
12
  export type LsgAccordionIconStyle = "plus" | "arrow" | "chevron";
@@ -11,9 +14,19 @@ export interface LsgAccordionProps {
11
14
  items: LsgAccordionItem[];
12
15
  /** Allow multiple panels to remain open. Default: true. */
13
16
  allowMultiple?: boolean;
14
- /** Figma icon treatment. `chevron` is retained as a backwards-compatible alias for `arrow`. */
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
+ */
15
28
  iconStyle?: LsgAccordionIconStyle;
16
- /** @deprecated Figma defines icon treatments, not default/bordered/faq visual variants. */
29
+ /** @deprecated Figma defines theme-driven presentation, not default/bordered/faq variants. */
17
30
  variant?: "default" | "bordered" | "faq";
18
31
  className?: string;
19
32
  }
package/dist/src/components/lsg/LsgAccordion/LsgAccordion.stories.d.ts CHANGED
@@ -5,5 +5,7 @@ export default meta;
5
5
  type Story = StoryObj<typeof LsgAccordion>;
6
6
  export declare const PlusMinus: Story;
7
7
  export declare const Arrows: Story;
8
- export declare const SingleExpansion: Story;
8
+ export declare const FirstItemExpandedByDefault: Story;
9
9
  export declare const AllClosed: Story;
10
+ export declare const ExplicitExpandedItem: Story;
11
+ export declare const SingleExpansion: Story;