@i-cell/ids-styles 0.0.49 → 0.0.51

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 (10) hide show
  1. package/dist/components.css +46 -10
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +39 -10
  4. package/dist/dialog/dialog.css +0 -2
  5. package/dist/dialog/dialog.min.css +1 -1
  6. package/dist/dialog/dialog.plugin.js +0 -2
  7. package/dist/side-nav/side-nav.css +46 -8
  8. package/dist/side-nav/side-nav.min.css +1 -1
  9. package/dist/side-nav/side-nav.plugin.js +39 -8
  10. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -5485,8 +5485,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5485
5485
  }
5486
5486
  .ids-dialog .ids-dialog-container .ids-dialog-content {
5487
5487
  display: flex;
5488
- align-items: center;
5489
- justify-content: center;
5490
5488
  overflow-y: auto;
5491
5489
  background: var(--ids-comp-dialog-content-color-bg-default);
5492
5490
  }
@@ -11640,6 +11638,15 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11640
11638
  .ids-side-nav .ids-side-nav-item.ids-side-nav-item-expandable .ids-side-nav-item-expandable-submenu {
11641
11639
  display: flex;
11642
11640
  flex-direction: column;
11641
+ overflow: hidden;
11642
+ max-height: 0;
11643
+ opacity: 0;
11644
+ transition: all 300ms ease-out;
11645
+ }
11646
+ .ids-side-nav .ids-side-nav-item.ids-side-nav-item-expandable .ids-side-nav-item-expandable-submenu.expanded {
11647
+ max-height: 10000px;
11648
+ opacity: 1;
11649
+ transition: all 300ms ease-in;
11643
11650
  }
11644
11651
  .ids-side-nav .ids-side-nav-item.ids-side-nav-item-expandable .ids-side-nav-item-expandable-summary > button[idsIconButton] {
11645
11652
  margin-left: auto;
@@ -11676,6 +11683,11 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11676
11683
  position: relative;
11677
11684
  top: 0;
11678
11685
  }
11686
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-single:focus, .ids-side-nav .ids-side-nav-item .ids-side-nav-item-single:focus-visible,
11687
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus,
11688
+ .ids-side-nav .ids-side-nav-item .ids-side-nav-item-expandable-summary:focus-visible {
11689
+ outline-style: solid;
11690
+ }
11679
11691
  .ids-side-nav .ids-side-nav-title {
11680
11692
  display: inline-flex;
11681
11693
  align-items: center;
@@ -11704,6 +11716,11 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11704
11716
  letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-compact);
11705
11717
  line-height: var(--ids-comp-sidenav-section-title-typography-line-height-compact);
11706
11718
  }
11719
+ .ids-side-nav.ids-side-nav-compact .ids-side-nav-item {
11720
+ --submenu-outline-compensation: calc(
11721
+ var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-compact) + 2px
11722
+ );
11723
+ }
11707
11724
  .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-single {
11708
11725
  border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-compact);
11709
11726
  border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-compact);
@@ -11767,15 +11784,16 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11767
11784
  margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-compact) * -1);
11768
11785
  }
11769
11786
  .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-expandable-submenu {
11787
+ margin: calc(var(--submenu-outline-compensation) * -1);
11770
11788
  gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-compact);
11771
- padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-compact) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact);
11789
+ padding: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-compact) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-compact) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-compact) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact) + var(--submenu-outline-compensation));
11772
11790
  }
11773
11791
  .ids-side-nav.ids-side-nav-compact .ids-side-nav-item.ids-side-nav-item-expandable {
11774
11792
  gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-compact);
11775
11793
  padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-compact) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-compact);
11776
11794
  }
11777
11795
  .ids-side-nav.ids-side-nav-compact .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary > .ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu {
11778
- padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-compact));
11796
+ padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-compact) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-compact) + var(--submenu-outline-compensation));
11779
11797
  }
11780
11798
  .ids-side-nav.ids-side-nav-compact .ids-side-nav-title + .ids-side-nav-item {
11781
11799
  margin-top: var(--ids-comp-sidenav-section-size-gap-compact);
@@ -11807,6 +11825,11 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11807
11825
  letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-comfortable);
11808
11826
  line-height: var(--ids-comp-sidenav-section-title-typography-line-height-comfortable);
11809
11827
  }
11828
+ .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item {
11829
+ --submenu-outline-compensation: calc(
11830
+ var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-comfortable) + 2px
11831
+ );
11832
+ }
11810
11833
  .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-single {
11811
11834
  border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-comfortable);
11812
11835
  border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-comfortable);
@@ -11870,15 +11893,16 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11870
11893
  margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-comfortable) * -1);
11871
11894
  }
11872
11895
  .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-expandable-submenu {
11896
+ margin: calc(var(--submenu-outline-compensation) * -1);
11873
11897
  gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-comfortable);
11874
- padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-comfortable) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable);
11898
+ padding: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-comfortable) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-comfortable) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-comfortable) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable) + var(--submenu-outline-compensation));
11875
11899
  }
11876
11900
  .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item.ids-side-nav-item-expandable {
11877
11901
  gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-comfortable);
11878
11902
  padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-comfortable) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-comfortable);
11879
11903
  }
11880
11904
  .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary > .ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu {
11881
- padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-comfortable));
11905
+ padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-comfortable) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-comfortable) + var(--submenu-outline-compensation));
11882
11906
  }
11883
11907
  .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-title + .ids-side-nav-item {
11884
11908
  margin-top: var(--ids-comp-sidenav-section-size-gap-comfortable);
@@ -11910,6 +11934,11 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11910
11934
  letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-spacious);
11911
11935
  line-height: var(--ids-comp-sidenav-section-title-typography-line-height-spacious);
11912
11936
  }
11937
+ .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item {
11938
+ --submenu-outline-compensation: calc(
11939
+ var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-spacious) + 2px
11940
+ );
11941
+ }
11913
11942
  .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-single {
11914
11943
  border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-spacious);
11915
11944
  border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-spacious);
@@ -11973,15 +12002,16 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11973
12002
  margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-spacious) * -1);
11974
12003
  }
11975
12004
  .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-expandable-submenu {
12005
+ margin: calc(var(--submenu-outline-compensation) * -1);
11976
12006
  gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-spacious);
11977
- padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-spacious) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious);
12007
+ padding: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-spacious) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-spacious) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-spacious) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious) + var(--submenu-outline-compensation));
11978
12008
  }
11979
12009
  .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item.ids-side-nav-item-expandable {
11980
12010
  gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-spacious);
11981
12011
  padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-spacious) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-spacious);
11982
12012
  }
11983
12013
  .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary > .ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu {
11984
- padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-spacious));
12014
+ padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-spacious) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-spacious) + var(--submenu-outline-compensation));
11985
12015
  }
11986
12016
  .ids-side-nav.ids-side-nav-spacious .ids-side-nav-title + .ids-side-nav-item {
11987
12017
  margin-top: var(--ids-comp-sidenav-section-size-gap-spacious);
@@ -12013,6 +12043,11 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
12013
12043
  letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-dense);
12014
12044
  line-height: var(--ids-comp-sidenav-section-title-typography-line-height-dense);
12015
12045
  }
12046
+ .ids-side-nav.ids-side-nav-dense .ids-side-nav-item {
12047
+ --submenu-outline-compensation: calc(
12048
+ var(--ids-comp-sidenav-navitem-expandable-summary-focused-outline-size-outline-dense) + 2px
12049
+ );
12050
+ }
12016
12051
  .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-single {
12017
12052
  border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-dense);
12018
12053
  border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-dense);
@@ -12076,15 +12111,16 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
12076
12111
  margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-dense) * -1);
12077
12112
  }
12078
12113
  .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-expandable-submenu {
12114
+ margin: calc(var(--submenu-outline-compensation) * -1);
12079
12115
  gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-dense);
12080
- padding: var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-dense) var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense);
12116
+ padding: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-top-dense) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-right-dense) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-bottom-dense) + var(--submenu-outline-compensation)) calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense) + var(--submenu-outline-compensation));
12081
12117
  }
12082
12118
  .ids-side-nav.ids-side-nav-dense .ids-side-nav-item.ids-side-nav-item-expandable {
12083
12119
  gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-dense);
12084
12120
  padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-dense) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-dense);
12085
12121
  }
12086
12122
  .ids-side-nav.ids-side-nav-dense .ids-side-nav-item.ids-side-nav-item-expandable:has(.ids-side-nav-item-expandable-summary > .ids-icon[icon-leading]) .ids-side-nav-item-expandable-submenu {
12087
- padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-dense));
12123
+ padding-left: calc(var(--ids-comp-sidenav-navitem-expandable-submenu-padding-left-dense) + var(--ids-comp-sidenav-navitem-expandable-submenu-indent-width-dense) + var(--submenu-outline-compensation));
12088
12124
  }
12089
12125
  .ids-side-nav.ids-side-nav-dense .ids-side-nav-title + .ids-side-nav-item {
12090
12126
  margin-top: var(--ids-comp-sidenav-section-size-gap-dense);