@momentum-design/components 0.123.5 → 0.124.0

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 (30) hide show
  1. package/dist/browser/index.js +406 -293
  2. package/dist/browser/index.js.map +3 -3
  3. package/dist/components/menubar/menubar.component.js +1 -1
  4. package/dist/components/menuitem/menuitem.styles.js +1 -1
  5. package/dist/components/menusection/menusection.component.d.ts +5 -0
  6. package/dist/components/menusection/menusection.component.js +5 -0
  7. package/dist/components/menusection/menusection.styles.js +10 -7
  8. package/dist/components/navmenuitem/navmenuitem.component.d.ts +74 -27
  9. package/dist/components/navmenuitem/navmenuitem.component.js +135 -87
  10. package/dist/components/navmenuitem/navmenuitem.constants.d.ts +1 -0
  11. package/dist/components/navmenuitem/navmenuitem.constants.js +1 -0
  12. package/dist/components/navmenuitem/navmenuitem.styles.js +64 -29
  13. package/dist/components/popover/popover.component.js +4 -2
  14. package/dist/components/sidenavigation/sidenavigation.component.d.ts +50 -6
  15. package/dist/components/sidenavigation/sidenavigation.component.js +132 -25
  16. package/dist/components/sidenavigation/sidenavigation.constants.d.ts +1 -0
  17. package/dist/components/sidenavigation/sidenavigation.constants.js +1 -0
  18. package/dist/components/sidenavigation/sidenavigation.context.d.ts +1 -2
  19. package/dist/components/sidenavigation/sidenavigation.context.js +8 -9
  20. package/dist/components/sidenavigation/sidenavigation.styles.js +76 -8
  21. package/dist/custom-elements.json +447 -237
  22. package/dist/react/index.d.ts +1 -1
  23. package/dist/react/index.js +1 -1
  24. package/dist/react/menusection/index.d.ts +5 -0
  25. package/dist/react/menusection/index.js +5 -0
  26. package/dist/react/navmenuitem/index.d.ts +9 -3
  27. package/dist/react/navmenuitem/index.js +9 -3
  28. package/dist/react/sidenavigation/index.d.ts +12 -2
  29. package/dist/react/sidenavigation/index.js +12 -2
  30. package/package.json +1 -1
package/dist/components/sidenavigation/sidenavigation.styles.js CHANGED
@@ -1,9 +1,15 @@
1
1
  import { css } from 'lit';
2
2
  const styles = css `
3
3
  :host {
4
- --mdc-sidenavigation-expanded-width: 15rem;
4
+ --mdc-sidenavigation-expanded-width: 14.5rem;
5
+ --mdc-sidenavigation-expanded-left-padding: 1rem;
6
+ --mdc-sidenavigation-expanded-right-padding: 1rem;
5
7
  --mdc-sidenavigation-collapsed-width: 4.5rem;
8
+ --mdc-sidenavigation-collapsed-left-padding: 1rem;
9
+ --mdc-sidenavigation-collapsed-right-padding: 1rem;
6
10
  --mdc-sidenavigation-vertical-divider-button-z-index: auto;
11
+ --mdc-sidenavigation-top-padding: 1rem;
12
+ --mdc-sidenavigation-bottom-padding: 1rem;
7
13
 
8
14
  display: flex;
9
15
  height: 100%;
@@ -25,20 +31,63 @@ const styles = css `
25
31
 
26
32
  :host::part(scrollable-section) {
27
33
  flex-grow: 1;
28
- overflow: auto;
29
- padding: 1rem 0;
34
+ overflow-y: auto;
35
+ overflow-x: hidden;
36
+ padding: var(--mdc-sidenavigation-top-padding) 0;
30
37
  min-height: 0;
31
38
  }
32
39
 
40
+ :host::part(scrollable-menubar) {
41
+ width: 100%;
42
+ }
43
+
44
+ ::slotted([slot='scrollable-menubar']) {
45
+ --mdc-menusection-divider-margin-block: 0.5rem 0.75rem;
46
+ --mdc-menusection-gap: 0.25rem;
47
+ }
48
+
49
+ ::slotted(mdc-navmenuitem[slot='scrollable-menubar']) {
50
+ margin-bottom: 0.25rem;
51
+ }
52
+
53
+ :host([expanded]) ::slotted([slot='scrollable-menubar']) {
54
+ --mdc-menusection-divider-width: var(--mdc-sidenavigation-expanded-width);
55
+ --mdc-menusection-header-padding: 0.25rem calc(var(--mdc-sidenavigation-expanded-left-padding) + 0.5rem) 0
56
+ calc(var(--mdc-sidenavigation-expanded-left-padding) + 0.5rem);
57
+ }
58
+
59
+ :host(:not([expanded])) ::slotted([slot='scrollable-menubar']) {
60
+ --mdc-menusection-divider-width: var(--mdc-sidenavigation-collapsed-width);
61
+ }
62
+
33
63
  :host::part(fixed-section) {
34
64
  flex-shrink: 0;
35
65
  display: flex;
36
66
  flex-direction: column;
37
67
  align-items: flex-start;
38
- padding-bottom: 1rem;
68
+ padding-bottom: var(--mdc-sidenavigation-bottom-padding);
39
69
  gap: 0.5rem;
40
70
  }
41
71
 
72
+ :host::part(fixed-menubar) {
73
+ width: 100%;
74
+ }
75
+
76
+ ::slotted([slot='fixed-menubar']) {
77
+ --mdc-menusection-divider-margin-block: 0.5rem 0.75rem;
78
+ --mdc-menusection-gap: 0.25rem;
79
+ }
80
+
81
+ :host([expanded]) ::slotted([slot='fixed-menubar']) {
82
+ --mdc-menusection-divider-width: var(--mdc-sidenavigation-expanded-width);
83
+ --mdc-menusection-header-padding: 0.25rem calc(var(--mdc-sidenavigation-expanded-left-padding) + 0.5rem) 0
84
+ calc(var(--mdc-sidenavigation-expanded-left-padding) + 0.5rem);
85
+ }
86
+
87
+ :host(:not([expanded])) ::slotted([slot='fixed-menubar']) {
88
+ --mdc-menusection-divider-width: var(--mdc-sidenavigation-collapsed-width);
89
+ }
90
+
42
91
  :host::part(brand-logo-container) {
43
92
  display: flex;
44
93
  align-items: center;
@@ -47,12 +96,20 @@ const styles = css `
47
96
  border-radius: 1.25rem;
48
97
  }
49
98
 
50
- :host(:dir(ltr))::part(brand-logo-container) {
51
- padding: 0.5rem 0rem 0.5rem 1.5rem;
99
+ :host([expanded]:dir(ltr))::part(brand-logo-container) {
100
+ padding: 0.5rem 0rem 0.5rem calc(var(--mdc-sidenavigation-expanded-left-padding) + 0.5rem);
101
+ }
102
+
103
+ :host([expanded]:dir(rtl))::part(brand-logo-container) {
104
+ padding: 0.5rem calc(var(--mdc-sidenavigation-expanded-left-padding) + 0.5rem) 0.5rem 0rem;
52
105
  }
53
106
 
54
- :host(:dir(rtl))::part(brand-logo-container) {
55
- padding: 0.5rem 1.5rem 0.5rem 0rem;
107
+ :host(:not([expanded]):dir(ltr))::part(brand-logo-container) {
108
+ padding: 0.5rem 0rem 0.5rem calc(var(--mdc-sidenavigation-collapsed-left-padding) + 0.5rem);
109
+ }
110
+
111
+ :host(:not([expanded]):dir(rtl))::part(brand-logo-container) {
112
+ padding: 0.5rem calc(var(--mdc-sidenavigation-collapsed-left-padding) + 0.5rem) 0.5rem 0rem;
56
113
  }
57
114
 
58
115
  ::slotted([slot='brand-logo']) {
@@ -63,11 +120,22 @@ const styles = css `
63
120
  }
64
121
 
65
122
  :host::part(separator) {
123
+ flex-shrink: 0;
66
124
  margin-bottom: 0.75rem;
67
125
  }
68
126
 
69
127
  :host::part(vertical-divider-button) {
70
128
  z-index: var(--mdc-sidenavigation-vertical-divider-button-z-index);
71
129
  }
130
+
131
+ :host([variant='flexible-on-hover'])::part(vertical-divider),
132
+ :host([variant='flexible-on-hover'])::part(vertical-divider-button) {
133
+ opacity: 0;
134
+ }
135
+
136
+ :host([data-grabber-visible][variant='flexible-on-hover'])::part(vertical-divider),
137
+ :host([data-grabber-visible][variant='flexible-on-hover'])::part(vertical-divider-button) {
138
+ opacity: 1;
139
+ }
72
140
  `;
73
141
  export default [styles];