@inera/ids-design 7.1.1 → 7.1.3

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 (50) hide show
  1. package/components/accordion/accordion-lit.js +1 -1
  2. package/components/accordion/accordion.css +6 -4
  3. package/components/alert/alert-lit.js +1 -1
  4. package/components/alert/alert.css +12 -8
  5. package/components/alert-global/alert-global-lit.js +1 -1
  6. package/components/alert-global/alert-global.css +6 -4
  7. package/components/box-link/box-link-lit.js +1 -1
  8. package/components/box-link/box-link.css +5 -5
  9. package/components/card/card-lit.js +1 -1
  10. package/components/card/card.css +32 -0
  11. package/components/carousel/carousel-lit.js +1 -1
  12. package/components/carousel/carousel.css +12 -8
  13. package/components/dialog/dialog-lit.js +1 -1
  14. package/components/dialog/dialog.css +14 -12
  15. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  16. package/components/form/select-multiple/select-multiple.css +15 -13
  17. package/components/header-1177/composite-header-1177.css +27 -23
  18. package/components/header-1177/header-1177-lit.js +1 -1
  19. package/components/header-1177/header-1177-menu-mobile-lit.js +1 -1
  20. package/components/header-1177/header-1177-menu-mobile.css +9 -5
  21. package/components/header-1177/header-1177.css +18 -18
  22. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  23. package/components/header-1177-admin/header-1177-admin.css +12 -12
  24. package/components/header-1177-pro/header-1177-pro-avatar-lit.js +1 -1
  25. package/components/header-1177-pro/header-1177-pro-avatar.css +12 -12
  26. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +1 -1
  27. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +6 -4
  28. package/components/header-inera/header-inera-nav-mobile-lit.js +1 -1
  29. package/components/header-inera/header-inera-nav-mobile.css +4 -4
  30. package/components/header-inera-admin/composite-header-inera-admin.css +7 -7
  31. package/components/header-inera-admin/header-inera-admin-nav-mobile-lit.js +1 -1
  32. package/components/header-inera-admin/header-inera-admin-nav-mobile.css +7 -7
  33. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  34. package/components/mobile-menu/mobile-menu.css +39 -25
  35. package/components/popover/popover-content-lit.js +1 -1
  36. package/components/popover/popover-content.css +11 -11
  37. package/components/side-menu/side-menu-lit.js +1 -1
  38. package/components/side-menu/side-menu.css +28 -18
  39. package/components/side-panel/side-panel-lit.js +1 -1
  40. package/components/side-panel/side-panel.css +32 -30
  41. package/components/tabs/tab-lit.js +1 -1
  42. package/components/tabs/tab.css +6 -4
  43. package/components/tabs/tabs-lit.js +1 -1
  44. package/components/tag/tag-lit.js +1 -1
  45. package/components/tag/tag.css +6 -4
  46. package/package.json +1 -1
  47. package/themes/1177/1177.css +46 -29
  48. package/themes/1177-pro/1177-pro.css +46 -29
  49. package/themes/inera/inera.css +46 -29
  50. package/themes/inera-admin/inera-admin.css +46 -29
package/components/mobile-menu/mobile-menu.css CHANGED
@@ -34,10 +34,6 @@
34
34
  min-height: 3rem;
35
35
  width: 100%;
36
36
  position: relative;
37
- font-weight: var(--IDS-MOBILE-MENU-ITEM__FONT-WEIGHT);
38
- border-bottom: var(--IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM);
39
- background-color: var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
40
- color: var(--IDS-MOBILE-MENU-ITEM__COLOR);
41
37
  }
42
38
  .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link].ids-mobile-menu-item-link--inline),
43
39
  .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner .ids-mobile-menu-item-link--inline {
@@ -58,6 +54,12 @@
58
54
  text-align: start;
59
55
  padding: 0.75rem 0.75rem 0.75rem 1.25rem !important;
60
56
  }
57
+ .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner {
58
+ font-weight: var(--IDS-MOBILE-MENU-ITEM__FONT-WEIGHT);
59
+ border-bottom: var(--IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM);
60
+ background-color: var(--IDS-MOBILE-MENU-ITEM__BACKGROUND-COLOR);
61
+ color: var(--IDS-MOBILE-MENU-ITEM__COLOR);
62
+ }
61
63
  .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner::before {
62
64
  content: "";
63
65
  display: block;
@@ -176,10 +178,6 @@
176
178
  min-height: 3rem;
177
179
  width: 100%;
178
180
  position: relative;
179
- font-weight: var(--IDS-MOBILE-MENU-ITEM__FONT-WEIGHT);
180
- border-bottom: var(--IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM);
181
- color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY__COLOR);
182
- background-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY__BACKGROUND-COLOR);
183
181
  }
184
182
  .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner ::slotted([slot=link].ids-mobile-menu-item-link--inline),
185
183
  .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner .ids-mobile-menu-item-link--inline {
@@ -200,6 +198,12 @@
200
198
  text-align: start;
201
199
  padding: 0.75rem 0.75rem 0.75rem 1.25rem !important;
202
200
  }
201
+ .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner {
202
+ font-weight: var(--IDS-MOBILE-MENU-ITEM__FONT-WEIGHT);
203
+ border-bottom: var(--IDS-MOBILE-MENU-ITEM__BORDER-BOTTOM);
204
+ color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY__COLOR);
205
+ background-color: var(--IDS-MOBILE-MENU-ITEM-SECONDARY__BACKGROUND-COLOR);
206
+ }
203
207
  .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner::before {
204
208
  content: "";
205
209
  display: block;
@@ -330,10 +334,6 @@
330
334
  min-height: 3rem;
331
335
  width: 100%;
332
336
  position: relative;
333
- background-color: var(--IDS-MOBILE-MENU-ITEM--L2__BACKGROUND-COLOR);
334
- color: var(--IDS-MOBILE-MENU-ITEM--L2__COLOR);
335
- font-weight: var(--IDS-MOBILE-MENU-ITEM--L2__FONT-WEIGHT);
336
- border-bottom: var(--IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM);
337
337
  }
338
338
  .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link].ids-mobile-menu-item-link--inline),
339
339
  .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item-link--inline {
@@ -354,6 +354,12 @@
354
354
  text-align: start;
355
355
  padding: 0.75rem 0.75rem 0.75rem 2.5rem !important;
356
356
  }
357
+ .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner {
358
+ background-color: var(--IDS-MOBILE-MENU-ITEM--L2__BACKGROUND-COLOR);
359
+ color: var(--IDS-MOBILE-MENU-ITEM--L2__COLOR);
360
+ font-weight: var(--IDS-MOBILE-MENU-ITEM--L2__FONT-WEIGHT);
361
+ border-bottom: var(--IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM);
362
+ }
357
363
  .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner::before {
358
364
  content: "";
359
365
  display: block;
@@ -481,10 +487,6 @@
481
487
  min-height: 3rem;
482
488
  width: 100%;
483
489
  position: relative;
484
- background-color: var(--IDS-MOBILE-MENU-ITEM--L2__BACKGROUND-COLOR);
485
- color: var(--IDS-MOBILE-MENU-ITEM--L2__COLOR);
486
- font-weight: var(--IDS-MOBILE-MENU-ITEM--L2__FONT-WEIGHT);
487
- border-bottom: var(--IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM);
488
490
  }
489
491
  .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link].ids-mobile-menu-item-link--inline),
490
492
  .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item-link--inline {
@@ -505,6 +507,12 @@
505
507
  text-align: start;
506
508
  padding: 0.75rem 0.75rem 0.75rem 3.75rem !important;
507
509
  }
510
+ .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner {
511
+ background-color: var(--IDS-MOBILE-MENU-ITEM--L2__BACKGROUND-COLOR);
512
+ color: var(--IDS-MOBILE-MENU-ITEM--L2__COLOR);
513
+ font-weight: var(--IDS-MOBILE-MENU-ITEM--L2__FONT-WEIGHT);
514
+ border-bottom: var(--IDS-MOBILE-MENU-ITEM--L2__BORDER-BOTTOM);
515
+ }
508
516
  .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner::before {
509
517
  content: "";
510
518
  display: block;
@@ -632,9 +640,6 @@
632
640
  width: 100%;
633
641
  position: relative;
634
642
  border-bottom: none;
635
- background-color: var(--IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR);
636
- color: var(--IDS-MOBILE-MENU-2-ITEM__COLOR);
637
- font-weight: var(--IDS-MOBILE-MENU-2-ITEM__FONT-WEIGHT);
638
643
  }
639
644
  .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link].ids-mobile-menu-item-link--inline),
640
645
  .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner .ids-mobile-menu-item-link--inline {
@@ -674,6 +679,11 @@
674
679
  z-index: 0;
675
680
  background-color: var(--IDS-MOBILE-MENU-2-ITEM__BEFORE-BACKGROUND-COLOR);
676
681
  }
682
+ .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner {
683
+ background-color: var(--IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR);
684
+ color: var(--IDS-MOBILE-MENU-2-ITEM__COLOR);
685
+ font-weight: var(--IDS-MOBILE-MENU-2-ITEM__FONT-WEIGHT);
686
+ }
677
687
  .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner::after {
678
688
  background-color: var(--IDS-MOBILE-MENU-2-ITEM__BORDER-BOTTOM-COLOR);
679
689
  }
@@ -772,9 +782,6 @@
772
782
  width: 100%;
773
783
  position: relative;
774
784
  border-bottom: none;
775
- background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2__BACKGROUND-COLOR);
776
- color: var(--IDS-MOBILE-MENU-2-ITEM--L2__COLOR);
777
- font-weight: var(--IDS-MOBILE-MENU-2-ITEM--L2__FONT-WEIGHT);
778
785
  }
779
786
  .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link].ids-mobile-menu-item-link--inline),
780
787
  .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item-link--inline {
@@ -814,6 +821,11 @@
814
821
  z-index: 0;
815
822
  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-BACKGROUND-COLOR);
816
823
  }
824
+ .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner {
825
+ background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2__BACKGROUND-COLOR);
826
+ color: var(--IDS-MOBILE-MENU-2-ITEM--L2__COLOR);
827
+ font-weight: var(--IDS-MOBILE-MENU-2-ITEM--L2__FONT-WEIGHT);
828
+ }
817
829
  .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner::after {
818
830
  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L2__BORDER-BOTTOM-COLOR);
819
831
  }
@@ -915,9 +927,6 @@
915
927
  width: 100%;
916
928
  position: relative;
917
929
  border-bottom: none;
918
- background-color: var(--IDS-MOBILE-MENU-2-ITEM--L3__BACKGROUND-COLOR);
919
- color: var(--IDS-MOBILE-MENU-2-ITEM--L3__COLOR);
920
- font-weight: normal;
921
930
  }
922
931
  .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link].ids-mobile-menu-item-link--inline),
923
932
  .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item-link--inline {
@@ -957,6 +966,11 @@
957
966
  z-index: 0;
958
967
  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L3__BEFORE-BACKGROUND-COLOR);
959
968
  }
969
+ .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner {
970
+ background-color: var(--IDS-MOBILE-MENU-2-ITEM--L3__BACKGROUND-COLOR);
971
+ color: var(--IDS-MOBILE-MENU-2-ITEM--L3__COLOR);
972
+ font-weight: normal;
973
+ }
960
974
  .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner::after {
961
975
  background-color: var(--IDS-MOBILE-MENU-2-ITEM--L3__BORDER-BOTTOM-COLOR);
962
976
  }
package/components/popover/popover-content-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}:host([show]){display:block}:host{color:var(--IDS-FONT-COLOR);display:none;position:absolute;width:max-content}.ids-popover-content{background-color:var(--IDS-COLOR-NEUTRAL-100);border:.063rem solid var(--IDS-POPOVER-CONTENT__BORDER);border-radius:var(--IDS-POPOVER-CONTENT__BORDER-RADIUS);box-shadow:0 0 .625rem rgba(0,0,0,.3);box-sizing:initial;max-height:16.25rem;padding:.75rem 0 1.25rem .75rem;position:relative;width:16.25rem;z-index:2}.ids-popover-content ::slotted(*){color:var(--IDS-FONT-COLOR)}.ids-popover-content ::slotted(h3),.ids-popover-content h3{color:var(--IDS-FONT-COLOR)!important;color:var(--IDS-HEADING-XS__COLOR);font-family:var(--IDS-HEADING-XS__FONT-FAMILY)!important;font-size:var(--IDS-HEADING-XS__FONT-SIZE)!important;font-style:normal!important;font-weight:var(--IDS-HEADING-XS__FONT-WEIGHT)!important;letter-spacing:var(--IDS-HEADING-XS__LETTER-SPACING)!important;line-height:var(--IDS-HEADING-XS__LINE-HEIGHT)!important;margin-bottom:.5rem!important}.ids-popover-content .ids-popover-content__caret{position:absolute}.ids-popover-content .ids-popover-content__caret.hide{display:none}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top{bottom:-.4375rem;left:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-left{bottom:-.4375rem;left:1.375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-right{bottom:-.4375rem;right:1.375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left{right:-.4375rem;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-top{bottom:1.375rem;right:-.4375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-bottom{right:-.4375rem;top:1.375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right{left:-.4375rem;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-top{bottom:1.375rem;left:-.4375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-bottom{left:-.4375rem;top:1.375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom{left:50%;top:-.4375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-left{left:1.375rem;top:-.4375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-right{right:1.375rem;top:-.4375rem}.ids-popover-content .ids-popover-content__caret-body{background:var(--IDS-COLOR-NEUTRAL-100);display:block;position:absolute;z-index:4}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top-right{bottom:0;clip-path:polygon(0 0,50% 100%,100% 0);height:.6rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left-top{clip-path:polygon(0 0,100% 50%,0 100%);height:1.2rem;right:0;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right-top{clip-path:polygon(0 50%,100% 0,100% 100%);height:1.2rem;left:0;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom-right{clip-path:polygon(0 100%,50% 0,100% 100%);height:.6rem;top:0;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-border{background-color:var(--IDS-POPOVER-CONTENT__BORDER);position:absolute;z-index:1}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-right{background-color:var(--IDS-POPOVER-CONTENT__BORDER);bottom:-.125rem;clip-path:polygon(0 0,50% 100%,100% 0);height:.6rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-top{background-color:var(--IDS-POPOVER-CONTENT__BORDER);clip-path:polygon(0 0,100% 50%,0 100%);height:1.2rem;right:-.125rem;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-top{background-color:var(--IDS-POPOVER-CONTENT__BORDER);clip-path:polygon(0 50%,100% 0,100% 100%);height:1.2rem;left:-.125rem;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-right{clip-path:polygon(0 100%,50% 0,100% 100%);height:.6rem;top:-.125rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-shadow{filter:blur(.188rem);height:0;position:absolute;width:0;z-index:1}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top-right{border-left:.625rem solid transparent;border-right:.625rem solid transparent;border-top:.625rem solid rgba(0,0,0,.15);bottom:-.438rem;transform:translateX(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-top{border-bottom:.5625rem solid transparent;border-right:.5625rem solid rgba(53,53,53,.15);border-top:.5625rem solid transparent;right:-.438rem;transform:translateY(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-top{border-bottom:.5625rem solid transparent;border-right:.5625rem solid rgba(53,53,53,.15);border-top:.5625rem solid transparent;left:-.438rem;transform:translateY(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-right{border-bottom:.625rem solid rgba(0,0,0,.15);border-left:.625rem solid transparent;border-right:.625rem solid transparent;top:-.438rem;transform:translateX(-50%)}.ids-popover-content .ids-popover-content__top-bar{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between;padding:.5rem 1rem 0 .5rem}.ids-popover-content .ids-popover-content__headline{text-align:left}.ids-popover-content .ids-popover-content__content-wrapper{margin-right:1rem;max-height:100%;overflow-x:hidden;overflow-y:auto;text-align:left}.ids-popover-content .ids-popover-content__content-wrapper::-webkit-scrollbar{width:.625rem}.ids-popover-content .ids-popover-content__content-wrapper::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__THUMB-COLOR);border:.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;cursor:auto}.ids-popover-content .ids-popover-content__content-wrapper::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__THUMB-HOVER-COLOR)}.ids-popover-content .ids-popover-content__content-wrapper::-webkit-scrollbar-track{background:var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;outline:.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-COLOR)}.ids-popover-content .ids-popover-content__content-wrapper::-webkit-scrollbar-corner{background-color:transparent}.ids-popover-content .ids-popover-content__content-wrapper:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:0}.ids-popover-content .ids-popover-content__content-wrapper-inner{padding:0 0 .5rem .5rem}.ids-popover-content .ids-popover-content__close-btn-wrapper{display:block;height:1.25rem;max-width:100%;z-index:1}.ids-popover-content .ids-popover-content__close-btn{background:none;border:none;cursor:pointer;display:flex;height:1.25rem;padding:0;position:relative;width:1.25rem}.ids-popover-content .ids-popover-content__close-btn:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-popover-content .ids-popover-content__close-btn:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ICON__COLOR);content:\"\\e916\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;left:0;pointer-events:none;position:absolute;top:0}.ids-popover-content .ids-popover-content__close-btn:active:before,.ids-popover-content .ids-popover-content__close-btn:focus:before,.ids-popover-content .ids-popover-content__close-btn:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-popover-content .ids-popover-content__close-btn:focus,.ids-popover-content .ids-popover-content__close-icon:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}:host([show]){display:block}:host{color:var(--IDS-FONT-COLOR);display:none;position:absolute;width:max-content}.ids-popover-content{background-color:var(--IDS-COLOR-NEUTRAL-100);border:.063rem solid var(--IDS-POPOVER-CONTENT__BORDER);border-radius:var(--IDS-POPOVER-CONTENT__BORDER-RADIUS);box-shadow:0 0 .625rem rgba(0,0,0,.3);box-sizing:initial;max-height:16.25rem;padding:.75rem 0 1.25rem .75rem;position:relative;width:16.25rem;z-index:2}.ids-popover-content ::slotted(*){color:var(--IDS-FONT-COLOR)}.ids-popover-content ::slotted(h3),.ids-popover-content h3{color:var(--IDS-FONT-COLOR)!important;color:var(--IDS-HEADING-XS__COLOR);font-family:var(--IDS-HEADING-XS__FONT-FAMILY)!important;font-size:var(--IDS-HEADING-XS__FONT-SIZE)!important;font-style:normal!important;font-weight:var(--IDS-HEADING-XS__FONT-WEIGHT)!important;letter-spacing:var(--IDS-HEADING-XS__LETTER-SPACING)!important;line-height:var(--IDS-HEADING-XS__LINE-HEIGHT)!important;margin-bottom:.5rem!important}.ids-popover-content .ids-popover-content__caret{position:absolute}.ids-popover-content .ids-popover-content__caret.hide{display:none}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top{bottom:-.4375rem;left:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-left{bottom:-.4375rem;left:1.375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-right{bottom:-.4375rem;right:1.375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left{right:-.4375rem;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-top{bottom:1.375rem;right:-.4375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-bottom{right:-.4375rem;top:1.375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right{left:-.4375rem;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-top{bottom:1.375rem;left:-.4375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-bottom{left:-.4375rem;top:1.375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom{left:50%;top:-.4375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-left{left:1.375rem;top:-.4375rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-right{right:1.375rem;top:-.4375rem}.ids-popover-content .ids-popover-content__caret-body{background:var(--IDS-COLOR-NEUTRAL-100);display:block;position:absolute;z-index:4}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top-right{bottom:0;clip-path:polygon(0 0,50% 100%,100% 0);height:.6rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left-top{clip-path:polygon(0 0,100% 50%,0 100%);height:1.2rem;right:0;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right-top{clip-path:polygon(0 50%,100% 0,100% 100%);height:1.2rem;left:0;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom-right{clip-path:polygon(0 100%,50% 0,100% 100%);height:.6rem;top:0;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-border{background-color:var(--IDS-POPOVER-CONTENT__BORDER);position:absolute;z-index:1}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-right{background-color:var(--IDS-POPOVER-CONTENT__BORDER);bottom:-.125rem;clip-path:polygon(0 0,50% 100%,100% 0);height:.6rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-top{background-color:var(--IDS-POPOVER-CONTENT__BORDER);clip-path:polygon(0 0,100% 50%,0 100%);height:1.2rem;right:-.125rem;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-top{background-color:var(--IDS-POPOVER-CONTENT__BORDER);clip-path:polygon(0 50%,100% 0,100% 100%);height:1.2rem;left:-.125rem;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-right{clip-path:polygon(0 100%,50% 0,100% 100%);height:.6rem;top:-.125rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-shadow{filter:blur(.188rem);height:0;position:absolute;width:0;z-index:1}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top-right{border-left:.625rem solid transparent;border-right:.625rem solid transparent;border-top:.625rem solid rgba(0,0,0,.15);bottom:-.438rem;transform:translateX(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-top{border-bottom:.5625rem solid transparent;border-right:.5625rem solid rgba(53,53,53,.15);border-top:.5625rem solid transparent;right:-.438rem;transform:translateY(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-top{border-bottom:.5625rem solid transparent;border-right:.5625rem solid rgba(53,53,53,.15);border-top:.5625rem solid transparent;left:-.438rem;transform:translateY(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-right{border-bottom:.625rem solid rgba(0,0,0,.15);border-left:.625rem solid transparent;border-right:.625rem solid transparent;top:-.438rem;transform:translateX(-50%)}.ids-popover-content .ids-popover-content__top-bar{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between;padding:.5rem 1rem 0 .5rem}.ids-popover-content .ids-popover-content__headline{text-align:left}.ids-popover-content .ids-popover-content__content-wrapper::-webkit-scrollbar{width:.625rem}.ids-popover-content .ids-popover-content__content-wrapper::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__THUMB-COLOR);border:.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;cursor:auto}.ids-popover-content .ids-popover-content__content-wrapper::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__THUMB-HOVER-COLOR)}.ids-popover-content .ids-popover-content__content-wrapper::-webkit-scrollbar-track{background:var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;outline:.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-COLOR)}.ids-popover-content .ids-popover-content__content-wrapper::-webkit-scrollbar-corner{background-color:transparent}.ids-popover-content .ids-popover-content__content-wrapper{margin-right:1rem;max-height:100%;overflow-x:hidden;overflow-y:auto;text-align:left}.ids-popover-content .ids-popover-content__content-wrapper:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:0}.ids-popover-content .ids-popover-content__content-wrapper-inner{padding:0 0 .5rem .5rem}.ids-popover-content .ids-popover-content__close-btn-wrapper{display:block;height:1.25rem;max-width:100%;z-index:1}.ids-popover-content .ids-popover-content__close-btn:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-popover-content .ids-popover-content__close-btn{background:none;border:none;cursor:pointer;display:flex;height:1.25rem;padding:0;position:relative;width:1.25rem}.ids-popover-content .ids-popover-content__close-btn:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ICON__COLOR);content:\"\\e916\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;left:0;pointer-events:none;position:absolute;top:0}.ids-popover-content .ids-popover-content__close-btn:active:before,.ids-popover-content .ids-popover-content__close-btn:focus:before,.ids-popover-content .ids-popover-content__close-btn:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-popover-content .ids-popover-content__close-btn:focus,.ids-popover-content .ids-popover-content__close-icon:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}";
4
4
 
5
5
  var popoverContentLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/popover/popover-content.css CHANGED
@@ -256,13 +256,6 @@
256
256
  .ids-popover-content .ids-popover-content__headline {
257
257
  text-align: left;
258
258
  }
259
- .ids-popover-content .ids-popover-content__content-wrapper {
260
- overflow-y: auto;
261
- overflow-x: hidden;
262
- max-height: 100%;
263
- text-align: left;
264
- margin-right: 1rem;
265
- }
266
259
  .ids-popover-content .ids-popover-content__content-wrapper::-webkit-scrollbar {
267
260
  width: 0.625rem;
268
261
  }
@@ -283,6 +276,13 @@
283
276
  .ids-popover-content .ids-popover-content__content-wrapper::-webkit-scrollbar-corner {
284
277
  background-color: transparent;
285
278
  }
279
+ .ids-popover-content .ids-popover-content__content-wrapper {
280
+ overflow-y: auto;
281
+ overflow-x: hidden;
282
+ max-height: 100%;
283
+ text-align: left;
284
+ margin-right: 1rem;
285
+ }
286
286
  .ids-popover-content .ids-popover-content__content-wrapper:focus {
287
287
  outline: var(--IDS-FOCUS__OUTLINE);
288
288
  outline-offset: 0;
@@ -296,6 +296,10 @@
296
296
  z-index: 1;
297
297
  height: 1.25rem;
298
298
  }
299
+ .ids-popover-content .ids-popover-content__close-btn:focus {
300
+ outline: var(--IDS-FOCUS__OUTLINE);
301
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
302
+ }
299
303
  .ids-popover-content .ids-popover-content__close-btn {
300
304
  cursor: pointer;
301
305
  background: none;
@@ -306,10 +310,6 @@
306
310
  height: 1.25rem;
307
311
  display: flex;
308
312
  }
309
- .ids-popover-content .ids-popover-content__close-btn:focus {
310
- outline: var(--IDS-FOCUS__OUTLINE);
311
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
312
- }
313
313
  .ids-popover-content .ids-popover-content__close-btn:before {
314
314
  font: icon;
315
315
  font-family: "Inera-Design-Icons" !important;
package/components/side-menu/side-menu-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}@media (max-width:1024px){.ids-side-menu.ids-side-menu--hide-on-mobile{display:none}}.ids-side-menu .ids-side-menu__header{background-color:var(--IDS-COLOR-NEUTRAL-100);border-bottom-right-radius:.313rem;border-left:.5rem solid var(--IDS-COLOR-NEUTRAL-100);border-top-right-radius:.313rem;display:flex}.ids-side-menu .ids-side-menu__header .ids-side-menu__header-inner{box-sizing:border-box;color:var(--IDS-SIDE-MENU__LINK-COLOR);display:flex;margin-right:.5rem;width:100%}.ids-side-menu .ids-side-menu__header .ids-icon{padding:.125rem}.ids-side-menu .ids-side-menu__header .ids-side-menu__chevron-button{background:none;border:none;box-sizing:border-box;color:inherit;cursor:pointer;font:inherit;height:2.75rem;margin-left:.25rem;outline:inherit;padding:0 1.125rem;position:relative}.ids-side-menu .ids-side-menu__header .ids-side-menu__chevron-button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem!important}.ids-side-menu .ids-side-menu__header .ids-side-menu__chevron-button:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-SIDE-MENU__ICON-COLOR);content:\"\\e938\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:.875rem;pointer-events:none;position:absolute;right:.8125rem;text-align:center;top:.9375rem}.ids-side-menu .ids-side-menu__header .ids-side-menu__chevron-button.ids-side-menu__chevron-button--expanded:before{content:\"\\e936\"}.ids-side-menu .ids-side-menu__header .ids-side-menu__leaf-icon{align-items:flex-start;color:var(--IDS-SIDE-MENU__ICON-COLOR);cursor:pointer;display:flex;margin:.25rem 0;padding:.625rem .625rem .25rem 0}.ids-side-menu .ids-side-menu__header .ids-side-menu__leaf-icon--empty{margin-left:1.375rem}.ids-side-menu .ids-side-menu__header .ids-side-menu__label-button{background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;min-height:2.75rem;outline:inherit;padding:0;position:relative;width:100%}.ids-side-menu .ids-side-menu__header .ids-side-menu__label-button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:0!important}.ids-side-menu .ids-side-menu__header .ids-side-menu__label-chevron{box-sizing:border-box;cursor:pointer;height:2.75rem;margin-left:.25rem;padding-left:1.125rem;padding-right:1.125rem;position:relative}.ids-side-menu .ids-side-menu__header .ids-side-menu__label-chevron:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-SIDE-MENU__ICON-COLOR);content:\"\\e938\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:.875rem;pointer-events:none;position:absolute;right:.8125rem;text-align:center;top:.9375rem}.ids-side-menu .ids-side-menu__header .ids-side-menu__label-chevron.ids-side-menu__label-chevron--expanded:before{content:\"\\e936\"}.ids-side-menu .ids-side-menu__header .ids-side-menu__label{display:grid;font-size:1rem;grid-template-columns:1fr auto;line-height:1.75rem;margin:.25rem 0;padding:.25rem 0;text-align:left;width:100%}.ids-side-menu .ids-side-menu__header .ids-side-menu__label-text{font-size:1rem;line-height:1.75rem}.ids-side-menu .ids-side-menu__header .ids-side-menu__link{display:grid;font-size:1rem;grid-template-columns:1fr auto;width:100%}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(a),.ids-side-menu .ids-side-menu__header .ids-side-menu__link a{align-items:flex-start;box-sizing:border-box;color:var(--IDS-SIDE-MENU__LINK-COLOR);cursor:pointer;display:flex;gap:.5rem;justify-content:space-between;line-height:1.75rem;margin:.25rem 0;padding:.25rem 0;text-align:left;text-decoration:none!important;width:100%}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(a):focus,.ids-side-menu .ids-side-menu__header .ids-side-menu__link a:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem!important}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button),.ids-side-menu .ids-side-menu__header .ids-side-menu__link button{align-items:flex-start;background-color:transparent;border:0;border-radius:0;box-sizing:border-box;color:var(--IDS-SIDE-MENU__LINK-COLOR);cursor:pointer;display:flex;gap:.5rem;justify-content:space-between;line-height:1.75rem!important;margin:.25rem 0;padding:.25rem 0;text-align:left;width:100%}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button):focus,.ids-side-menu .ids-side-menu__header .ids-side-menu__link button:focus{outline:var(--IDS-FOCUS__OUTLINE)}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button):focus,.ids-side-menu .ids-side-menu__header .ids-side-menu__link button:focus{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-COLOR-NEUTRAL-40)!important;outline-offset:-.125rem!important}.ids-side-menu .ids-side-menu__header:hover{background-color:var(--IDS-SIDE-MENU__LABEL--ACTIVE-BACKGROUND-COLOR);border-color:var(--IDS-SIDE-MENU__LABEL--ACTIVE-BACKGROUND-COLOR)}.ids-side-menu .ids-side-menu__header:hover ::slotted(a),.ids-side-menu .ids-side-menu__header:hover a{color:var(--IDS-SIDE-MENU__LINK--HOVER-COLOR);text-decoration:none!important}.ids-side-menu .ids-side-menu__header:hover ::slotted(button),.ids-side-menu .ids-side-menu__header:hover button{color:var(--IDS-SIDE-MENU__LINK--HOVER-COLOR);text-decoration:none!important}.ids-side-menu .ids-side-menu__header.ids-side-menu--active{background-color:var(--IDS-SIDE-MENU__LABEL--ACTIVE-BACKGROUND-COLOR);border-color:var(--IDS-SIDE-MENU--ACTIVE__HEADER-BORDER-COLOR)}.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__label,.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link{font-weight:700}.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover ::slotted(a),.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover ::slotted(button),.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover a,.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover button{color:var(--IDS-SIDE-MENU__LINK-COLOR);cursor:default;text-decoration:none!important}.ids-side-menu .ids-side-menu__header.ids-side-menu--level-2 .ids-side-menu__chevron-button{margin-left:1.875rem}.ids-side-menu .ids-side-menu__header.ids-side-menu--level-2 .ids-side-menu__leaf-icon,.ids-side-menu .ids-side-menu__header.ids-side-menu--level-2 .ids-side-menu__leaf-icon--empty{margin-left:2.5rem}.ids-side-menu .ids-side-menu__header.ids-side-menu--level-2 .ids-side-menu__label-button{padding-left:1.6875rem}.ids-side-menu .ids-side-menu__header.ids-side-menu--level-3 .ids-side-menu__leaf-icon,.ids-side-menu .ids-side-menu__header.ids-side-menu--level-3 .ids-side-menu__leaf-icon--empty{margin-left:4.125rem}.ids-side-menu.ids-side-menu--disabled{cursor:default}.ids-side-menu ::slotted(button):focus,.ids-side-menu ::slotted(button):focus-visible,.ids-side-menu button:focus,.ids-side-menu button:focus-visible{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-COLOR-NEUTRAL-40)!important;outline-offset:-.125rem!important}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}@media (max-width:1024px){.ids-side-menu.ids-side-menu--hide-on-mobile{display:none}}.ids-side-menu .ids-side-menu__header{background-color:var(--IDS-COLOR-NEUTRAL-100);border-bottom-right-radius:.313rem;border-left:.5rem solid var(--IDS-COLOR-NEUTRAL-100);border-top-right-radius:.313rem;display:flex}.ids-side-menu .ids-side-menu__header .ids-side-menu__header-inner{box-sizing:border-box;color:var(--IDS-SIDE-MENU__LINK-COLOR);display:flex;margin-right:.5rem;width:100%}.ids-side-menu .ids-side-menu__header .ids-icon{padding:.125rem}.ids-side-menu .ids-side-menu__header .ids-side-menu__chevron-button{background:none;border:none;color:inherit;font:inherit;outline:inherit;padding:0}.ids-side-menu .ids-side-menu__header .ids-side-menu__chevron-button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem!important}.ids-side-menu .ids-side-menu__header .ids-side-menu__chevron-button{box-sizing:border-box;cursor:pointer;height:2.75rem;margin-left:.25rem;padding-left:1.125rem;padding-right:1.125rem;position:relative}.ids-side-menu .ids-side-menu__header .ids-side-menu__chevron-button:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-SIDE-MENU__ICON-COLOR);content:\"\\e938\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:.875rem;pointer-events:none;position:absolute;right:.8125rem;text-align:center;top:.9375rem}.ids-side-menu .ids-side-menu__header .ids-side-menu__chevron-button.ids-side-menu__chevron-button--expanded:before{content:\"\\e936\"}.ids-side-menu .ids-side-menu__header .ids-side-menu__leaf-icon{align-items:flex-start;color:var(--IDS-SIDE-MENU__ICON-COLOR);cursor:pointer;display:flex;margin:.25rem 0;padding:.625rem .625rem .25rem 0}.ids-side-menu .ids-side-menu__header .ids-side-menu__leaf-icon--empty{margin-left:1.375rem}.ids-side-menu .ids-side-menu__header .ids-side-menu__label-button{background:none;border:none;color:inherit;font:inherit;outline:inherit;padding:0}.ids-side-menu .ids-side-menu__header .ids-side-menu__label-button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:0!important}.ids-side-menu .ids-side-menu__header .ids-side-menu__label-button{cursor:pointer;display:flex;min-height:2.75rem;position:relative;width:100%}.ids-side-menu .ids-side-menu__header .ids-side-menu__label-chevron{box-sizing:border-box;cursor:pointer;height:2.75rem;margin-left:.25rem;padding-left:1.125rem;padding-right:1.125rem;position:relative}.ids-side-menu .ids-side-menu__header .ids-side-menu__label-chevron:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-SIDE-MENU__ICON-COLOR);content:\"\\e938\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:.875rem;pointer-events:none;position:absolute;right:.8125rem;text-align:center;top:.9375rem}.ids-side-menu .ids-side-menu__header .ids-side-menu__label-chevron.ids-side-menu__label-chevron--expanded:before{content:\"\\e936\"}.ids-side-menu .ids-side-menu__header .ids-side-menu__label{display:grid;font-size:1rem;grid-template-columns:1fr auto;line-height:1.75rem;margin:.25rem 0;padding:.25rem 0;text-align:left;width:100%}.ids-side-menu .ids-side-menu__header .ids-side-menu__label-text{font-size:1rem;line-height:1.75rem}.ids-side-menu .ids-side-menu__header .ids-side-menu__link{display:grid;font-size:1rem;grid-template-columns:1fr auto;width:100%}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(a),.ids-side-menu .ids-side-menu__header .ids-side-menu__link a{color:var(--IDS-SIDE-MENU__LINK-COLOR)}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(a):focus,.ids-side-menu .ids-side-menu__header .ids-side-menu__link a:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem!important}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(a),.ids-side-menu .ids-side-menu__header .ids-side-menu__link a{align-items:flex-start;box-sizing:border-box;cursor:pointer;display:flex;gap:.5rem;justify-content:space-between;line-height:1.75rem;margin:.25rem 0;padding:.25rem 0;text-align:left;text-decoration:none!important;width:100%}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button),.ids-side-menu .ids-side-menu__header .ids-side-menu__link button{background-color:transparent;border:0;border-radius:0;color:var(--IDS-SIDE-MENU__LINK-COLOR)}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button):focus,.ids-side-menu .ids-side-menu__header .ids-side-menu__link button:focus{outline:var(--IDS-FOCUS__OUTLINE)}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button),.ids-side-menu .ids-side-menu__header .ids-side-menu__link button{align-items:flex-start;box-sizing:border-box;cursor:pointer;display:flex;gap:.5rem;justify-content:space-between;line-height:1.75rem!important;margin:.25rem 0;padding:.25rem 0;text-align:left;width:100%}.ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button):focus,.ids-side-menu .ids-side-menu__header .ids-side-menu__link button:focus{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-COLOR-NEUTRAL-40)!important;outline-offset:-.125rem!important}.ids-side-menu .ids-side-menu__header:hover{background-color:var(--IDS-SIDE-MENU__LABEL--ACTIVE-BACKGROUND-COLOR);border-color:var(--IDS-SIDE-MENU__LABEL--ACTIVE-BACKGROUND-COLOR)}.ids-side-menu .ids-side-menu__header:hover ::slotted(a),.ids-side-menu .ids-side-menu__header:hover a{color:var(--IDS-SIDE-MENU__LINK--HOVER-COLOR);text-decoration:none!important}.ids-side-menu .ids-side-menu__header:hover ::slotted(button),.ids-side-menu .ids-side-menu__header:hover button{color:var(--IDS-SIDE-MENU__LINK--HOVER-COLOR);text-decoration:none!important}.ids-side-menu .ids-side-menu__header.ids-side-menu--active{background-color:var(--IDS-SIDE-MENU__LABEL--ACTIVE-BACKGROUND-COLOR);border-color:var(--IDS-SIDE-MENU--ACTIVE__HEADER-BORDER-COLOR)}.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__label,.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link{font-weight:700}.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover ::slotted(a),.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover ::slotted(button),.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover a,.ids-side-menu .ids-side-menu__header.ids-side-menu--active .ids-side-menu__link:hover button{color:var(--IDS-SIDE-MENU__LINK-COLOR);cursor:default;text-decoration:none!important}.ids-side-menu .ids-side-menu__header.ids-side-menu--level-2 .ids-side-menu__chevron-button{margin-left:1.875rem}.ids-side-menu .ids-side-menu__header.ids-side-menu--level-2 .ids-side-menu__leaf-icon,.ids-side-menu .ids-side-menu__header.ids-side-menu--level-2 .ids-side-menu__leaf-icon--empty{margin-left:2.5rem}.ids-side-menu .ids-side-menu__header.ids-side-menu--level-2 .ids-side-menu__label-button{padding-left:1.6875rem}.ids-side-menu .ids-side-menu__header.ids-side-menu--level-3 .ids-side-menu__leaf-icon,.ids-side-menu .ids-side-menu__header.ids-side-menu--level-3 .ids-side-menu__leaf-icon--empty{margin-left:4.125rem}.ids-side-menu.ids-side-menu--disabled{cursor:default}.ids-side-menu ::slotted(button):focus,.ids-side-menu ::slotted(button):focus-visible,.ids-side-menu button:focus,.ids-side-menu button:focus-visible{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-COLOR-NEUTRAL-40)!important;outline-offset:-.125rem!important}";
4
4
 
5
5
  var sideMenuLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/side-menu/side-menu.css CHANGED
@@ -55,6 +55,12 @@
55
55
  font: inherit;
56
56
  cursor: pointer;
57
57
  outline: inherit;
58
+ }
59
+ .ids-side-menu .ids-side-menu__header .ids-side-menu__chevron-button:focus {
60
+ outline: var(--IDS-FOCUS__OUTLINE);
61
+ outline-offset: -0.125rem !important;
62
+ }
63
+ .ids-side-menu .ids-side-menu__header .ids-side-menu__chevron-button {
58
64
  position: relative;
59
65
  cursor: pointer;
60
66
  box-sizing: border-box;
@@ -63,10 +69,6 @@
63
69
  padding-right: 1.125rem;
64
70
  height: 2.75rem;
65
71
  }
66
- .ids-side-menu .ids-side-menu__header .ids-side-menu__chevron-button:focus {
67
- outline: var(--IDS-FOCUS__OUTLINE);
68
- outline-offset: -0.125rem !important;
69
- }
70
72
  .ids-side-menu .ids-side-menu__header .ids-side-menu__chevron-button:before {
71
73
  font: icon;
72
74
  font-family: "Inera-Design-Icons" !important;
@@ -104,16 +106,18 @@
104
106
  font: inherit;
105
107
  cursor: pointer;
106
108
  outline: inherit;
109
+ }
110
+ .ids-side-menu .ids-side-menu__header .ids-side-menu__label-button:focus {
111
+ outline: var(--IDS-FOCUS__OUTLINE);
112
+ outline-offset: 0 !important;
113
+ }
114
+ .ids-side-menu .ids-side-menu__header .ids-side-menu__label-button {
107
115
  cursor: pointer;
108
116
  position: relative;
109
117
  width: 100%;
110
118
  display: flex;
111
119
  min-height: 2.75rem;
112
120
  }
113
- .ids-side-menu .ids-side-menu__header .ids-side-menu__label-button:focus {
114
- outline: var(--IDS-FOCUS__OUTLINE);
115
- outline-offset: 0 !important;
116
- }
117
121
  .ids-side-menu .ids-side-menu__header .ids-side-menu__label-chevron {
118
122
  position: relative;
119
123
  cursor: pointer;
@@ -164,6 +168,14 @@
164
168
  .ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(a),
165
169
  .ids-side-menu .ids-side-menu__header .ids-side-menu__link a {
166
170
  color: var(--IDS-SIDE-MENU__LINK-COLOR);
171
+ }
172
+ .ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(a):focus,
173
+ .ids-side-menu .ids-side-menu__header .ids-side-menu__link a:focus {
174
+ outline: var(--IDS-FOCUS__OUTLINE);
175
+ outline-offset: -0.125rem !important;
176
+ }
177
+ .ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(a),
178
+ .ids-side-menu .ids-side-menu__header .ids-side-menu__link a {
167
179
  cursor: pointer;
168
180
  text-decoration: none !important;
169
181
  display: flex;
@@ -177,17 +189,20 @@
177
189
  box-sizing: border-box;
178
190
  width: 100%;
179
191
  }
180
- .ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(a):focus,
181
- .ids-side-menu .ids-side-menu__header .ids-side-menu__link a:focus {
182
- outline: var(--IDS-FOCUS__OUTLINE);
183
- outline-offset: -0.125rem !important;
184
- }
185
192
  .ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button),
186
193
  .ids-side-menu .ids-side-menu__header .ids-side-menu__link button {
187
194
  color: var(--IDS-SIDE-MENU__LINK-COLOR);
188
195
  border: 0;
189
196
  border-radius: 0;
190
197
  background-color: transparent;
198
+ }
199
+ .ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button):focus,
200
+ .ids-side-menu .ids-side-menu__header .ids-side-menu__link button:focus {
201
+ outline: var(--IDS-FOCUS__OUTLINE);
202
+ outline-offset: -0.125rem !important;
203
+ }
204
+ .ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button),
205
+ .ids-side-menu .ids-side-menu__header .ids-side-menu__link button {
191
206
  cursor: pointer;
192
207
  display: flex;
193
208
  justify-content: space-between;
@@ -201,11 +216,6 @@
201
216
  box-sizing: border-box;
202
217
  }
203
218
  .ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button):focus,
204
- .ids-side-menu .ids-side-menu__header .ids-side-menu__link button:focus {
205
- outline: var(--IDS-FOCUS__OUTLINE);
206
- outline-offset: -0.125rem !important;
207
- }
208
- .ids-side-menu .ids-side-menu__header .ids-side-menu__link ::slotted(button):focus,
209
219
  .ids-side-menu .ids-side-menu__header .ids-side-menu__link button:focus {
210
220
  outline: var(--IDS-FOCUS__OUTLINE) !important;
211
221
  outline-offset: -0.125rem !important;
package/components/side-panel/side-panel-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-side-panel{background-color:var(--IDS-OVERLAY__BACKGROUND-COLOR);overflow:hidden;z-index:1}.ids-side-panel.ids-side-panel--regular{bottom:0;height:0;left:0;opacity:0;position:fixed;right:0;top:0;transition:opacity 0s linear .2s,visibility .3s,width 0s linear .4s,height 0s linear .4s;visibility:hidden;width:0;z-index:2}.ids-side-panel.ids-side-panel--regular .ids-side-panel__panel{background-color:var(--IDS-COLOR-NEUTRAL-100);border-left:0;box-sizing:border-box;display:flex;flex-direction:column;height:70vh;overflow-x:hidden;padding:1.25rem 1rem 0;position:relative;transform:translateY(100vh);transition:transform .3s cubic-bezier(.4,0,.2,1);width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content{box-sizing:border-box;order:1;overflow-x:hidden;overflow-y:auto;padding-bottom:1.25rem;width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar{width:.625rem}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__THUMB-COLOR);border:.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;cursor:auto}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__THUMB-HOVER-COLOR)}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-track{background:var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;outline:.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-COLOR)}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-corner{background-color:transparent}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content:has(.ids-side-panel__footer){display:flex;flex-direction:column;justify-content:space-between}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content:focus,.ids-side-panel.ids-side-panel--regular .ids-side-panel__content:focus-visible{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-offset:-.125rem!important}.ids-side-panel.ids-side-panel--regular .ids-side-panel__inner{margin:.5rem}.ids-side-panel.ids-side-panel--regular .ids-side-panel__actions{margin-right:.313rem;order:0;text-align:right;width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;height:1.25rem;outline:inherit;padding:0;position:relative;width:1.25rem}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ICON__COLOR);content:\"\\e916\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;left:0;pointer-events:none;position:absolute;top:0}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:active:before,.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:focus:before,.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show{height:100vh;opacity:1;transition:width 0s,height 0s;visibility:visible;width:100%}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show .ids-side-panel__panel{transform:translateY(30vh);transition:transform .3s cubic-bezier(.4,0,.2,1)}@media (min-width:640px){.ids-side-panel.ids-side-panel--regular .ids-side-panel__panel{height:50vh}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show .ids-side-panel__panel{transform:translateY(50vh)}}@media (min-width:1024px){.ids-side-panel.ids-side-panel--regular{background-color:var(--IDS-COLOR-NEUTRAL-100);border-left:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);display:flex;overflow-x:hidden;position:relative;transform:none;transition:width .3s ease-in-out,opacity 0s linear .3s,height .4s,visibility .4s,transform 0s linear;width:0}.ids-side-panel.ids-side-panel--regular .ids-side-panel__panel{height:100%;padding:1.25rem 0 0 1rem;top:0;transform:none;transition:none}.ids-side-panel.ids-side-panel--regular .ids-side-panel__actions,.ids-side-panel.ids-side-panel--regular .ids-side-panel__content{width:21.875rem}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show{height:100%;transform:none;transition:width .3s ease-in-out,visibility 0s,opacity 0s,transform 0s linear;width:23.75rem}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show .ids-side-panel__panel{transform:none;transition:none}.ids-side-panel.ids-side-panel--regular.ids-side-panel--left{border-left:0;border-right:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR)}.ids-side-panel.ids-side-panel--regular.ids-side-panel--left .ids-side-panel__panel{direction:rtl;padding:1.25rem 1rem 1.25rem 0}.ids-side-panel.ids-side-panel--regular.ids-side-panel--left .ids-side-panel__panel .ids-side-panel__content{direction:ltr}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated{border-left:0;bottom:0;box-shadow:-.188rem 0 .25rem -.125rem rgba(0,0,0,.2);height:100%;left:auto;position:fixed;right:0;top:0;width:0;z-index:2}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--left{border-right:0;box-shadow:.188rem 0 .25rem -.125rem rgba(0,0,0,.2);left:0;right:auto}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--left .ids-side-panel__panel{padding:1.25rem 1rem 1.25rem 0}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--show{width:23.75rem}}.ids-side-panel.ids-side-panel--menu{background-color:var(--IDS-COLOR-NEUTRAL-100);border-right:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);display:flex;height:100%;padding:0;position:relative;width:3.125rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__inner{padding:.5rem .75rem .5rem .5rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__panel{box-sizing:border-box;display:flex;flex-direction:column;padding:1.25rem 0 0;position:relative;width:100%}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content{box-sizing:border-box;height:100%;opacity:0;overflow-x:hidden;overflow-y:auto;transition:visibility 0s,opacity 0s;visibility:hidden;width:100%}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar{width:.625rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__THUMB-COLOR);border:.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;cursor:auto}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__THUMB-HOVER-COLOR)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-track{background:var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;outline:.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-COLOR)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-corner{background-color:transparent}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content:has(.ids-side-panel__footer){display:flex;flex-direction:column;justify-content:space-between}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content:focus,.ids-side-panel.ids-side-panel--menu .ids-side-panel__content:focus-visible{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-offset:-.125rem!important}.ids-side-panel.ids-side-panel--menu .ids-side-panel__actions{margin-right:1.25rem;text-align:right;width:2.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer{border-bottom:.5rem solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR);border-top:.063rem solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-TOP-COLOR);box-sizing:border-box;display:flex;flex-direction:column;gap:1.25rem;opacity:0;padding:1.25rem;text-align:left;transition:visibility 0s,opacity 0s;visibility:hidden}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-links{display:flex;flex-direction:column;gap:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-links ::slotted(*){display:block;width:100%}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-text{line-height:1.5rem;margin-top:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger{background-color:transparent;border:0;cursor:pointer;height:1.875rem;margin-right:-.25rem;padding:0 .25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger{cursor:pointer;position:relative;transition:all .2s;user-select:none}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines{background-color:var(--IDS-COLOR-ACCENT-40);border-radius:.125rem;cursor:pointer;display:block;height:.125rem;position:relative;transition:all .2s;width:1.3125rem;width:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after,.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before{background-color:var(--IDS-COLOR-ACCENT-40);border-radius:.125rem;content:\"\";display:inline-block;height:.125rem;left:0;position:absolute;-webkit-transform-origin:.09375rem center;transform-origin:.09375rem center;-webkit-transform-origin:.13393rem center;transform-origin:.13393rem center;transition:all .2s;width:1.3125rem;width:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before{top:.5rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after{top:-.5rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines{background:transparent}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after,.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{left:-.1rem;top:0;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;width:1.5rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem!important}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show{border-right:0;bottom:0;left:0;position:fixed;right:0;top:0;width:100%}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__actions{width:auto}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__content,.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__footer{opacity:1;transition:visibility 0s,opacity 0s;visibility:visible}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated{bottom:0;left:auto;position:fixed;right:calc(100% - 3.125rem);top:0;transition:transform .3s cubic-bezier(.4,0,.2,1);width:3.125rem;z-index:2}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated.ids-side-panel--show{transform:translateX(calc(100% - 3.125rem));width:100%}@media (min-width:1024px){.ids-side-panel.ids-side-panel--menu{transition:width .3s ease-in-out}.ids-side-panel.ids-side-panel--menu .ids-side-panel__panel{position:relative;transform:none;transition:none;width:23.75rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content{width:23.75rem}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show{border-right:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);height:100%;position:relative;transform:none;transition:width .3s ease-in-out;width:23.75rem}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated{border-right:0;box-shadow:.188rem 0 .25rem -.125rem rgba(0,0,0,.2)}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated.ids-side-panel--show{position:fixed;transform:translateX(20.625rem);transition:transform .3s cubic-bezier(.4,0,.2,1);width:23.75rem}}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-side-panel{background-color:var(--IDS-OVERLAY__BACKGROUND-COLOR);overflow:hidden;z-index:1}.ids-side-panel.ids-side-panel--regular{bottom:0;height:0;left:0;opacity:0;position:fixed;right:0;top:0;transition:opacity 0s linear .2s,visibility .3s,width 0s linear .4s,height 0s linear .4s;visibility:hidden;width:0;z-index:2}.ids-side-panel.ids-side-panel--regular .ids-side-panel__panel{background-color:var(--IDS-COLOR-NEUTRAL-100);border-left:0;box-sizing:border-box;display:flex;flex-direction:column;height:70vh;overflow-x:hidden;padding:1.25rem 1rem 0;position:relative;transform:translateY(100vh);transition:transform .3s cubic-bezier(.4,0,.2,1);width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar{width:.625rem}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__THUMB-COLOR);border:.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;cursor:auto}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__THUMB-HOVER-COLOR)}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-track{background:var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;outline:.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-COLOR)}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-corner{background-color:transparent}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content{box-sizing:border-box;order:1;overflow-x:hidden;overflow-y:auto;padding-bottom:1.25rem;width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content:has(.ids-side-panel__footer){display:flex;flex-direction:column;justify-content:space-between}.ids-side-panel.ids-side-panel--regular .ids-side-panel__content:focus,.ids-side-panel.ids-side-panel--regular .ids-side-panel__content:focus-visible{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-offset:-.125rem!important}.ids-side-panel.ids-side-panel--regular .ids-side-panel__inner{margin:.5rem}.ids-side-panel.ids-side-panel--regular .ids-side-panel__actions{margin-right:.313rem;order:0;text-align:right;width:100%}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button{background:none;border:none;color:inherit;cursor:pointer;font:inherit;outline:inherit;padding:0}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button{height:1.25rem;position:relative;width:1.25rem}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ICON__COLOR);content:\"\\e916\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;left:0;pointer-events:none;position:absolute;top:0}.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:active:before,.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:focus:before,.ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show{height:100vh;opacity:1;transition:width 0s,height 0s;visibility:visible;width:100%}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show .ids-side-panel__panel{transform:translateY(30vh);transition:transform .3s cubic-bezier(.4,0,.2,1)}@media (min-width:640px){.ids-side-panel.ids-side-panel--regular .ids-side-panel__panel{height:50vh}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show .ids-side-panel__panel{transform:translateY(50vh)}}@media (min-width:1024px){.ids-side-panel.ids-side-panel--regular{background-color:var(--IDS-COLOR-NEUTRAL-100);border-left:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);display:flex;overflow-x:hidden;position:relative;transform:none;transition:width .3s ease-in-out,opacity 0s linear .3s,height .4s,visibility .4s,transform 0s linear;width:0}.ids-side-panel.ids-side-panel--regular .ids-side-panel__panel{height:100%;padding:1.25rem 0 0 1rem;top:0;transform:none;transition:none}.ids-side-panel.ids-side-panel--regular .ids-side-panel__actions,.ids-side-panel.ids-side-panel--regular .ids-side-panel__content{width:21.875rem}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show{height:100%;transform:none;transition:width .3s ease-in-out,visibility 0s,opacity 0s,transform 0s linear;width:23.75rem}.ids-side-panel.ids-side-panel--regular.ids-side-panel--show .ids-side-panel__panel{transform:none;transition:none}.ids-side-panel.ids-side-panel--regular.ids-side-panel--left{border-left:0;border-right:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR)}.ids-side-panel.ids-side-panel--regular.ids-side-panel--left .ids-side-panel__panel{direction:rtl;padding:1.25rem 1rem 1.25rem 0}.ids-side-panel.ids-side-panel--regular.ids-side-panel--left .ids-side-panel__panel .ids-side-panel__content{direction:ltr}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated{border-left:0;bottom:0;box-shadow:-.188rem 0 .25rem -.125rem rgba(0,0,0,.2);height:100%;left:auto;position:fixed;right:0;top:0;width:0;z-index:2}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--left{border-right:0;box-shadow:.188rem 0 .25rem -.125rem rgba(0,0,0,.2);left:0;right:auto}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--left .ids-side-panel__panel{padding:1.25rem 1rem 1.25rem 0}.ids-side-panel.ids-side-panel--regular.ids-side-panel--elevated.ids-side-panel--show{width:23.75rem}}.ids-side-panel.ids-side-panel--menu{background-color:var(--IDS-COLOR-NEUTRAL-100);border-right:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);display:flex;height:100%;padding:0;position:relative;width:3.125rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__inner{padding:.5rem .75rem .5rem .5rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__panel{box-sizing:border-box;display:flex;flex-direction:column;padding:1.25rem 0 0;position:relative;width:100%}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar{width:.625rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__THUMB-COLOR);border:.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;cursor:auto}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__THUMB-HOVER-COLOR)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-track{background:var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;outline:.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-COLOR)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-corner{background-color:transparent}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content{box-sizing:border-box;height:100%;opacity:0;overflow-x:hidden;overflow-y:auto;transition:visibility 0s,opacity 0s;visibility:hidden;width:100%}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content:has(.ids-side-panel__footer){display:flex;flex-direction:column;justify-content:space-between}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content:focus,.ids-side-panel.ids-side-panel--menu .ids-side-panel__content:focus-visible{outline:var(--IDS-FOCUS__OUTLINE)!important;outline-offset:-.125rem!important}.ids-side-panel.ids-side-panel--menu .ids-side-panel__actions{margin-right:1.25rem;text-align:right;width:2.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer{border-bottom:.5rem solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-BOTTOM-COLOR);border-top:.063rem solid var(--IDS-SIDE-PANEL__FOOTER-BORDER-TOP-COLOR);box-sizing:border-box;display:flex;flex-direction:column;gap:1.25rem;opacity:0;padding:1.25rem;text-align:left;transition:visibility 0s,opacity 0s;visibility:hidden}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-links{display:flex;flex-direction:column;gap:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-links ::slotted(*){display:block;width:100%}.ids-side-panel.ids-side-panel--menu .ids-side-panel__footer-text{line-height:1.5rem;margin-top:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger{cursor:pointer;position:relative;transition:all .2s;user-select:none}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines{background-color:var(--IDS-COLOR-ACCENT-40);border-radius:.125rem;cursor:pointer;display:block;height:.125rem;position:relative;transition:all .2s;width:1.3125rem;width:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after,.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before{background-color:var(--IDS-COLOR-ACCENT-40);border-radius:.125rem;content:\"\";display:inline-block;height:.125rem;left:0;position:absolute;-webkit-transform-origin:.09375rem center;transform-origin:.09375rem center;-webkit-transform-origin:.13393rem center;transform-origin:.13393rem center;transition:all .2s;width:1.3125rem;width:1.25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:before{top:.5rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger__lines:after{top:-.5rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines{background:transparent}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after,.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{left:-.1rem;top:0;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;width:1.5rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger{background-color:transparent;border:0;cursor:pointer;height:1.875rem;margin-right:-.25rem;padding:0 .25rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem!important}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show{border-right:0;bottom:0;left:0;position:fixed;right:0;top:0;width:100%}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__actions{width:auto}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__content,.ids-side-panel.ids-side-panel--menu.ids-side-panel--show .ids-side-panel__footer{opacity:1;transition:visibility 0s,opacity 0s;visibility:visible}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated{bottom:0;left:auto;position:fixed;right:calc(100% - 3.125rem);top:0;transition:transform .3s cubic-bezier(.4,0,.2,1);width:3.125rem;z-index:2}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated.ids-side-panel--show{transform:translateX(calc(100% - 3.125rem));width:100%}@media (min-width:1024px){.ids-side-panel.ids-side-panel--menu{transition:width .3s ease-in-out}.ids-side-panel.ids-side-panel--menu .ids-side-panel__panel{position:relative;transform:none;transition:none;width:23.75rem}.ids-side-panel.ids-side-panel--menu .ids-side-panel__content{width:23.75rem}.ids-side-panel.ids-side-panel--menu.ids-side-panel--show{border-right:.063rem solid var(--IDS-SIDE-PANEL__BORDER-COLOR);height:100%;position:relative;transform:none;transition:width .3s ease-in-out;width:23.75rem}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated{border-right:0;box-shadow:.188rem 0 .25rem -.125rem rgba(0,0,0,.2)}.ids-side-panel.ids-side-panel--menu.ids-side-panel--elevated.ids-side-panel--show{position:fixed;transform:translateX(20.625rem);transition:transform .3s cubic-bezier(.4,0,.2,1);width:23.75rem}}";
4
4
 
5
5
  var sidePanelLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/side-panel/side-panel.css CHANGED
@@ -57,14 +57,6 @@
57
57
  transform: translateY(100vh);
58
58
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
59
59
  }
60
- .ids-side-panel.ids-side-panel--regular .ids-side-panel__content {
61
- width: 100%;
62
- padding-bottom: 1.25rem;
63
- box-sizing: border-box;
64
- overflow-x: hidden;
65
- overflow-y: auto;
66
- order: 1;
67
- }
68
60
  .ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar {
69
61
  width: 0.625rem;
70
62
  }
@@ -85,6 +77,14 @@
85
77
  .ids-side-panel.ids-side-panel--regular .ids-side-panel__content::-webkit-scrollbar-corner {
86
78
  background-color: transparent;
87
79
  }
80
+ .ids-side-panel.ids-side-panel--regular .ids-side-panel__content {
81
+ width: 100%;
82
+ padding-bottom: 1.25rem;
83
+ box-sizing: border-box;
84
+ overflow-x: hidden;
85
+ overflow-y: auto;
86
+ order: 1;
87
+ }
88
88
  .ids-side-panel.ids-side-panel--regular .ids-side-panel__content:has(.ids-side-panel__footer) {
89
89
  display: flex;
90
90
  justify-content: space-between;
@@ -111,14 +111,16 @@
111
111
  font: inherit;
112
112
  cursor: pointer;
113
113
  outline: inherit;
114
- position: relative;
115
- width: 1.25rem;
116
- height: 1.25rem;
117
114
  }
118
115
  .ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:focus {
119
116
  outline: var(--IDS-FOCUS__OUTLINE);
120
117
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
121
118
  }
119
+ .ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button {
120
+ position: relative;
121
+ width: 1.25rem;
122
+ height: 1.25rem;
123
+ }
122
124
  .ids-side-panel.ids-side-panel--regular .ids-side-panel__close-button:before {
123
125
  font: icon;
124
126
  font-family: "Inera-Design-Icons" !important;
@@ -243,16 +245,6 @@
243
245
  width: 100%;
244
246
  padding: 1.25rem 0 0 0;
245
247
  }
246
- .ids-side-panel.ids-side-panel--menu .ids-side-panel__content {
247
- width: 100%;
248
- height: 100%;
249
- box-sizing: border-box;
250
- overflow-x: hidden;
251
- overflow-y: auto;
252
- opacity: 0;
253
- visibility: hidden;
254
- transition: visibility 0s, opacity 0s;
255
- }
256
248
  .ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar {
257
249
  width: 0.625rem;
258
250
  }
@@ -273,6 +265,16 @@
273
265
  .ids-side-panel.ids-side-panel--menu .ids-side-panel__content::-webkit-scrollbar-corner {
274
266
  background-color: transparent;
275
267
  }
268
+ .ids-side-panel.ids-side-panel--menu .ids-side-panel__content {
269
+ width: 100%;
270
+ height: 100%;
271
+ box-sizing: border-box;
272
+ overflow-x: hidden;
273
+ overflow-y: auto;
274
+ opacity: 0;
275
+ visibility: hidden;
276
+ transition: visibility 0s, opacity 0s;
277
+ }
276
278
  .ids-side-panel.ids-side-panel--menu .ids-side-panel__content:has(.ids-side-panel__footer) {
277
279
  display: flex;
278
280
  justify-content: space-between;
@@ -313,15 +315,6 @@
313
315
  line-height: 1.5rem;
314
316
  margin-top: 1.25rem;
315
317
  }
316
- .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger {
317
- border: 0;
318
- background-color: transparent;
319
- cursor: pointer;
320
- height: 1.875rem;
321
- padding: 0 0.25rem;
322
- margin-right: -0.25rem;
323
- cursor: pointer;
324
- }
325
318
  .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger .ids-hamburger {
326
319
  transition: all 0.2s;
327
320
  cursor: pointer;
@@ -389,6 +382,15 @@
389
382
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
390
383
  transform: rotate3d(0, 0, 1, -45deg);
391
384
  }
385
+ .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger {
386
+ border: 0;
387
+ background-color: transparent;
388
+ cursor: pointer;
389
+ height: 1.875rem;
390
+ padding: 0 0.25rem;
391
+ margin-right: -0.25rem;
392
+ cursor: pointer;
393
+ }
392
394
  .ids-side-panel.ids-side-panel--menu .ids-side-panel__hamburger:focus {
393
395
  outline: var(--IDS-FOCUS__OUTLINE);
394
396
  outline-offset: -0.125rem !important;
package/components/tabs/tab-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = ":host{border-radius:var(--IDS-TAB__BORDER-RADIUS)}:host(:focus),:host(:not([selected]):focus){outline:var(--IDS-FOCUS__OUTLINE);outline-offset:0;z-index:10}.ids-tab{-webkit-touch-callout:none;align-items:center;background:none;border:none;border-left:.0625rem solid var(--IDS-TAB__BORDER-COLOR);border-radius:var(--IDS-TAB__BORDER-RADIUS);border-right:.0625rem solid var(--IDS-TAB__BORDER-COLOR);border-top:.0625rem solid var(--IDS-TAB__BORDER-COLOR);color:inherit;color:var(--IDS-TAB__COLOR);cursor:pointer;display:flex;font:inherit;justify-content:center;min-height:1.5rem;min-width:1.5rem;outline:inherit;outline:none;overflow:hidden;padding:.4375rem 1.4375rem;position:relative;-moz-user-select:-moz-none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.ids-tab:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tab:after{background-color:var(--IDS-TABS__BORDER-BOTTOM-COLOR);bottom:0;content:\"\";height:.25rem;left:0;position:absolute;right:0;z-index:2}.ids-tab:focus{z-index:2}.ids-tab .ids-tab__label{align-items:center;color:var(--IDS-TAB__COLOR);display:flex;flex-direction:row;font-size:1rem;font-weight:400;gap:.5rem;justify-content:center;line-height:1.6875rem;text-align:center}.ids-tab .ids-tab__label:before{background-color:transparent;content:\"\";height:var(--IDS-TAB--SELECTED__BORDER-HEIGHT);left:0;position:absolute;right:0;top:0;width:100%}.ids-tab.ids-tab--selected{background-color:var(--IDS-COLOR-NEUTRAL-100);border-left:.125rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);border-right:.125rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);border-top:.0625rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);padding:.4375rem 1.375rem}.ids-tab.ids-tab--selected,.ids-tab.ids-tab--selected .ids-tab__label{color:var(--IDS-TAB--SELECTED_COLOR)}.ids-tab.ids-tab--selected .ids-tab__label:before{background-color:var(--IDS-TAB--SELECTED-BORDER-COLOR)}.ids-tab.ids-tab--selected:after{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-tab .ids-tab-icon,.ids-tab ::slotted([slot=icon]){align-self:center!important;color:var(--IDS-ICON__COLOR);display:flex!important;font-size:1.25rem!important}";
3
+ var css_248z = ":host{border-radius:var(--IDS-TAB__BORDER-RADIUS)}:host(:focus),:host(:not([selected]):focus){outline:var(--IDS-FOCUS__OUTLINE);outline-offset:0;z-index:10}.ids-tab{background:none;border:none;color:inherit;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;-moz-user-select:-moz-none}.ids-tab:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tab{-webkit-touch-callout:none;align-items:center;border-left:.0625rem solid var(--IDS-TAB__BORDER-COLOR);border-radius:var(--IDS-TAB__BORDER-RADIUS);border-right:.0625rem solid var(--IDS-TAB__BORDER-COLOR);border-top:.0625rem solid var(--IDS-TAB__BORDER-COLOR);color:var(--IDS-TAB__COLOR);cursor:pointer;display:flex;justify-content:center;outline:none;overflow:hidden;padding:.4375rem 1.4375rem;position:relative;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.ids-tab:after{background-color:var(--IDS-TABS__BORDER-BOTTOM-COLOR);bottom:0;content:\"\";height:.25rem;left:0;position:absolute;right:0;z-index:2}.ids-tab:focus{z-index:2}.ids-tab .ids-tab__label{align-items:center;color:var(--IDS-TAB__COLOR);display:flex;flex-direction:row;font-size:1rem;font-weight:400;gap:.5rem;justify-content:center;line-height:1.6875rem;text-align:center}.ids-tab .ids-tab__label:before{background-color:transparent;content:\"\";height:var(--IDS-TAB--SELECTED__BORDER-HEIGHT);left:0;position:absolute;right:0;top:0;width:100%}.ids-tab.ids-tab--selected{background-color:var(--IDS-COLOR-NEUTRAL-100);border-left:.125rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);border-right:.125rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);border-top:.0625rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);padding:.4375rem 1.375rem}.ids-tab.ids-tab--selected,.ids-tab.ids-tab--selected .ids-tab__label{color:var(--IDS-TAB--SELECTED_COLOR)}.ids-tab.ids-tab--selected .ids-tab__label:before{background-color:var(--IDS-TAB--SELECTED-BORDER-COLOR)}.ids-tab.ids-tab--selected:after{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-tab .ids-tab-icon,.ids-tab ::slotted([slot=icon]){align-self:center!important;color:var(--IDS-ICON__COLOR);display:flex!important;font-size:1.25rem!important}";
4
4
 
5
5
  var tabLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/tabs/tab.css CHANGED
@@ -39,6 +39,12 @@
39
39
  -webkit-user-select: none;
40
40
  -ms-user-select: none;
41
41
  user-select: none;
42
+ }
43
+ .ids-tab:focus {
44
+ outline: var(--IDS-FOCUS__OUTLINE);
45
+ outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
46
+ }
47
+ .ids-tab {
42
48
  display: flex;
43
49
  outline: none;
44
50
  justify-content: center;
@@ -60,10 +66,6 @@
60
66
  border-right: 0.0625rem solid var(--IDS-TAB__BORDER-COLOR);
61
67
  border-radius: var(--IDS-TAB__BORDER-RADIUS);
62
68
  }
63
- .ids-tab:focus {
64
- outline: var(--IDS-FOCUS__OUTLINE);
65
- outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
66
- }
67
69
  .ids-tab:after {
68
70
  content: "";
69
71
  position: absolute;
package/components/tabs/tabs-lit.js CHANGED
@@ -2,7 +2,7 @@ import { css, unsafeCSS } from 'lit';
2
2
 
3
3
  var css_248z$1 = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-tabs .ids-tabs__select{display:block}.ids-tabs .ids-tabs__tabs{align-items:flex-end;display:none;flex-wrap:wrap;justify-content:flex-start;padding:0 1.25rem;position:relative}.ids-tabs .ids-tabs__tabs:after{background-color:var(--IDS-TABS__BORDER-BOTTOM-COLOR);bottom:0;content:\"\";height:.25rem;left:0;position:absolute;right:0;width:100%}.ids-tabs .ids-tabs__tabs:before{bottom:0;box-shadow:inset 0 -.25rem .25rem -.25rem rgba(0,0,0,.2);content:var(--IDS-TAB--SELECTED__BEFORE-CONTENT);height:.625rem;left:0;pointer-events:none;position:absolute;right:0}@media (min-width:1024px){.ids-tabs .ids-tabs__select{display:none}.ids-tabs .ids-tabs__tabs{display:flex}}.ids-tabs.ids-tabs--unresponsive .ids-tabs__select{display:none}.ids-tabs.ids-tabs--unresponsive .ids-tabs__tabs{display:flex!important}@media (min-width:640px){.ids-tabs.ids-tabs--responsive-on-s .ids-tabs__select{display:none}.ids-tabs.ids-tabs--responsive-on-s .ids-tabs__tabs{display:flex}}@media (min-width:1024px){.ids-tabs.ids-tabs--responsive-on-m .ids-tabs__select{display:none}.ids-tabs.ids-tabs--responsive-on-m .ids-tabs__tabs{display:flex}}.ids-tabs .ids-tabs__panels{position:relative;z-index:1}";
4
4
 
5
- var css_248z = ".ids-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border:var(--IDS-INPUT__BORDER);border-radius:var(--IDS-INPUT__BORDER-RADIUS);color:var(--IDS-INPUT__COLOR);cursor:pointer;display:block;display:inline-block!important;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem;height:var(--IDS-INPUT__HEIGHT);overflow:hidden;padding:var(--IDS-INPUT__PADDING);padding-right:var(--IDS-INPUT__ICON-PADDING-RIGHT)!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select.ids-input--light:disabled,.ids-select.ids-input--light[readonly],.ids-select:disabled,.ids-select[readonly]{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select.ids-input--light.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)}.ids-select.ids-input--invalid,.ids-select[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-select.ids-input--light.ids-input--invalid,.ids-select.ids-input--light[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select[aria-disabled=true]{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select:disabled{cursor:default}.ids-select:disabled.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100);background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-select-wrapper{display:flex;position:relative}.ids-select-wrapper:after{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ICON__COLOR);content:\"\\e936\";display:block;font:icon;font-family:Inera-Design-Icons!important;height:1rem;pointer-events:none;position:absolute;right:var(--IDS-INPUT__ICON-RIGHT);top:50%;transform:translateY(-50%);width:1rem}.ids-select-wrapper:has(.ids-input--invalid):after,.ids-select-wrapper:has([aria-invalid=true]):after{color:var(--IDS-ICON--INVALID-COLOR)}.ids-select-wrapper:has([aria-disabled=true]):after,.ids-select-wrapper:has(select:disabled):after{color:var(--IDS-ICON--DISABLED-COLOR)}";
5
+ var css_248z = ".ids-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border-radius:var(--IDS-INPUT__BORDER-RADIUS);color:var(--IDS-INPUT__COLOR);display:block;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem;padding:var(--IDS-INPUT__PADDING)}.ids-select.ids-input--light:disabled,.ids-select.ids-input--light[readonly],.ids-select:disabled,.ids-select[readonly]{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select.ids-input--light.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)}.ids-select{border:var(--IDS-INPUT__BORDER);cursor:pointer;display:inline-block!important;height:var(--IDS-INPUT__HEIGHT);overflow:hidden;padding-right:var(--IDS-INPUT__ICON-PADDING-RIGHT)!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select.ids-input--invalid,.ids-select[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-select.ids-input--light.ids-input--invalid,.ids-select.ids-input--light[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select[aria-disabled=true]{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select:disabled{cursor:default}.ids-select:disabled.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100);background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-select-wrapper{display:flex;position:relative}.ids-select-wrapper:after{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ICON__COLOR);content:\"\\e936\";display:block;font:icon;font-family:Inera-Design-Icons!important;height:1rem;pointer-events:none;position:absolute;right:var(--IDS-INPUT__ICON-RIGHT);top:50%;transform:translateY(-50%);width:1rem}.ids-select-wrapper:has(.ids-input--invalid):after,.ids-select-wrapper:has([aria-invalid=true]):after{color:var(--IDS-ICON--INVALID-COLOR)}.ids-select-wrapper:has([aria-disabled=true]):after,.ids-select-wrapper:has(select:disabled):after{color:var(--IDS-ICON--DISABLED-COLOR)}";
6
6
 
7
7
  var tabsLit = css`${unsafeCSS(css_248z)} ${unsafeCSS(css_248z$1)}`;
8
8