@i-cell/ids-styles 0.0.50 → 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 (7) hide show
  1. package/dist/components.css +37 -8
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +30 -8
  4. package/dist/side-nav/side-nav.css +37 -8
  5. package/dist/side-nav/side-nav.min.css +1 -1
  6. package/dist/side-nav/side-nav.plugin.js +30 -8
  7. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -11683,6 +11683,11 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11683
11683
  position: relative;
11684
11684
  top: 0;
11685
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
+ }
11686
11691
  .ids-side-nav .ids-side-nav-title {
11687
11692
  display: inline-flex;
11688
11693
  align-items: center;
@@ -11711,6 +11716,11 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11711
11716
  letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-compact);
11712
11717
  line-height: var(--ids-comp-sidenav-section-title-typography-line-height-compact);
11713
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
+ }
11714
11724
  .ids-side-nav.ids-side-nav-compact .ids-side-nav-item .ids-side-nav-item-single {
11715
11725
  border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-compact);
11716
11726
  border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-compact);
@@ -11774,15 +11784,16 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11774
11784
  margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-compact) * -1);
11775
11785
  }
11776
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);
11777
11788
  gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-compact);
11778
- 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));
11779
11790
  }
11780
11791
  .ids-side-nav.ids-side-nav-compact .ids-side-nav-item.ids-side-nav-item-expandable {
11781
11792
  gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-compact);
11782
11793
  padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-compact) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-compact);
11783
11794
  }
11784
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 {
11785
- 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));
11786
11797
  }
11787
11798
  .ids-side-nav.ids-side-nav-compact .ids-side-nav-title + .ids-side-nav-item {
11788
11799
  margin-top: var(--ids-comp-sidenav-section-size-gap-compact);
@@ -11814,6 +11825,11 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11814
11825
  letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-comfortable);
11815
11826
  line-height: var(--ids-comp-sidenav-section-title-typography-line-height-comfortable);
11816
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
+ }
11817
11833
  .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item .ids-side-nav-item-single {
11818
11834
  border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-comfortable);
11819
11835
  border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-comfortable);
@@ -11877,15 +11893,16 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11877
11893
  margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-comfortable) * -1);
11878
11894
  }
11879
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);
11880
11897
  gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-comfortable);
11881
- 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));
11882
11899
  }
11883
11900
  .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-item.ids-side-nav-item-expandable {
11884
11901
  gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-comfortable);
11885
11902
  padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-comfortable) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-comfortable);
11886
11903
  }
11887
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 {
11888
- 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));
11889
11906
  }
11890
11907
  .ids-side-nav.ids-side-nav-comfortable .ids-side-nav-title + .ids-side-nav-item {
11891
11908
  margin-top: var(--ids-comp-sidenav-section-size-gap-comfortable);
@@ -11917,6 +11934,11 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11917
11934
  letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-spacious);
11918
11935
  line-height: var(--ids-comp-sidenav-section-title-typography-line-height-spacious);
11919
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
+ }
11920
11942
  .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item .ids-side-nav-item-single {
11921
11943
  border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-spacious);
11922
11944
  border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-spacious);
@@ -11980,15 +12002,16 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11980
12002
  margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-spacious) * -1);
11981
12003
  }
11982
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);
11983
12006
  gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-spacious);
11984
- 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));
11985
12008
  }
11986
12009
  .ids-side-nav.ids-side-nav-spacious .ids-side-nav-item.ids-side-nav-item-expandable {
11987
12010
  gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-spacious);
11988
12011
  padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-spacious) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-spacious);
11989
12012
  }
11990
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 {
11991
- 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));
11992
12015
  }
11993
12016
  .ids-side-nav.ids-side-nav-spacious .ids-side-nav-title + .ids-side-nav-item {
11994
12017
  margin-top: var(--ids-comp-sidenav-section-size-gap-spacious);
@@ -12020,6 +12043,11 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
12020
12043
  letter-spacing: var(--ids-comp-sidenav-section-title-typography-letter-spacing-dense);
12021
12044
  line-height: var(--ids-comp-sidenav-section-title-typography-line-height-dense);
12022
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
+ }
12023
12051
  .ids-side-nav.ids-side-nav-dense .ids-side-nav-item .ids-side-nav-item-single {
12024
12052
  border-radius: var(--ids-comp-sidenav-navitem-single-size-border-radius-dense);
12025
12053
  border-width: var(--ids-comp-sidenav-navitem-single-size-border-width-dense);
@@ -12083,15 +12111,16 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
12083
12111
  margin-right: calc(var(--ids-comp-sidenav-navitem-expandable-summary-size-gap-dense) * -1);
12084
12112
  }
12085
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);
12086
12115
  gap: var(--ids-comp-sidenav-navitem-expandable-submenu-gap-dense);
12087
- 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));
12088
12117
  }
12089
12118
  .ids-side-nav.ids-side-nav-dense .ids-side-nav-item.ids-side-nav-item-expandable {
12090
12119
  gap: var(--ids-comp-sidenav-navitem-expandable-size-gap-dense);
12091
12120
  padding: var(--ids-comp-sidenav-navitem-expandable-size-padding-y-dense) var(--ids-comp-sidenav-navitem-expandable-size-padding-x-dense);
12092
12121
  }
12093
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 {
12094
- 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));
12095
12124
  }
12096
12125
  .ids-side-nav.ids-side-nav-dense .ids-side-nav-title + .ids-side-nav-item {
12097
12126
  margin-top: var(--ids-comp-sidenav-section-size-gap-dense);