@unifiedsoftware/styles 2.0.1-beta.21 → 2.0.1-beta.23

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 (11) hide show
  1. package/css/fci.css +54 -24
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +109 -12
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/components/_dropdown.scss +29 -2
  7. package/scss/components/_index.scss +1 -0
  8. package/scss/components/_navigation-menu-item.scss +87 -10
  9. package/scss/components/_navigation-menu.scss +6 -1
  10. package/scss/themes/fci/components/_dropdown.scss +15 -3
  11. package/scss/themes/fci/components/_navigation-menu-item.scss +74 -49
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unifiedsoftware/styles",
3
- "version": "2.0.1-beta.21",
3
+ "version": "2.0.1-beta.23",
4
4
  "license": "MIT",
5
5
  "files": [
6
6
  "index.scss",
package/scss/components/_dropdown.scss CHANGED
@@ -130,14 +130,41 @@
130
130
  }
131
131
 
132
132
  &__title {
133
- font-weight: 500;
133
+ font-weight: 600;
134
134
  font-size: var(--#{$prefix}dropdown-item-title-font-size, inherit);
135
+ line-height: var(--#{$prefix}dropdown-item-title-line-height, inherit);
136
+ color: var(--#{$prefix}dropdown-item-title-color, inherit);
137
+ letter-spacing: -0.01em;
138
+ transition: color 150ms ease-out;
135
139
  }
136
140
 
137
141
  &__subtitle {
138
142
  font-size: var(--#{$prefix}dropdown-item-subtitle-font-size, 0.75rem);
139
- color: var(--#{$prefix}dropdown-item-subtitle-color, #6c757d);
143
+ color: var(--#{$prefix}dropdown-item-subtitle-color, #4b5563);
140
144
  margin-top: 0.125rem;
145
+ line-height: var(--#{$prefix}dropdown-item-subtitle-line-height, 1rem);
146
+ font-weight: 400;
147
+ letter-spacing: 0;
148
+ transition: color 150ms ease-out;
149
+ }
150
+
151
+ &__description {
152
+ font-size: clamp(0.625rem, 0.5vw + 0.5rem, var(--#{$prefix}dropdown-item-description-font-size, 0.6875rem));
153
+ color: var(--#{$prefix}dropdown-item-description-color, #64748b);
154
+ margin-top: 0.0625rem;
155
+ line-height: var(--#{$prefix}dropdown-item-description-line-height, 0.875rem);
156
+ font-weight: 400;
157
+ letter-spacing: 0.01em;
158
+ font-style: normal;
159
+ transition: color 150ms ease-out;
160
+
161
+ // Text truncation for long descriptions
162
+ overflow: hidden;
163
+ text-overflow: ellipsis;
164
+ display: -webkit-box;
165
+ -webkit-line-clamp: 2;
166
+ line-clamp: 2;
167
+ -webkit-box-orient: vertical;
141
168
  }
142
169
 
143
170
  &__end-content {
package/scss/components/_index.scss CHANGED
@@ -16,6 +16,7 @@
16
16
  @use 'drawer';
17
17
  @use 'modal';
18
18
 
19
+ @use 'divider';
19
20
  @use 'accordion';
20
21
  @use 'list';
21
22
  @use 'data-list';
package/scss/components/_navigation-menu-item.scss CHANGED
@@ -5,16 +5,20 @@
5
5
  z-index: 0;
6
6
  display: flex;
7
7
  padding-block: var(--#{$prefix}navigation-menu-item-padding-block, 0.5rem);
8
- padding-block: var(--#{$prefix}navigation-menu-item-padding-block, 0.5rem);
9
- padding-left: var(--#{$prefix}navigation-menu-item-padding-left, 1rem);
10
- padding-right: var(--#{$prefix}navigation-menu-item-padding-right, 1rem);
8
+ padding-left: var(--#{$prefix}navigation-menu-item-padding-left, 0.75rem);
9
+ padding-right: var(--#{$prefix}navigation-menu-item-padding-right, 0.75rem);
11
10
  border-radius: var(--#{$prefix}navigation-menu-item-border-radius, 0.375rem);
12
- margin-inline: var(--#{$prefix}navigation-menu-item-margin-inline, 0.25rem); // Match dropdown
11
+ margin-inline: var(--#{$prefix}navigation-menu-item-margin-inline, 0.125rem);
12
+ margin-bottom: 0;
13
+ min-height: var(--#{$prefix}navigation-menu-item-min-height, 2rem);
13
14
  text-decoration: none;
14
15
  color: inherit;
15
16
  cursor: pointer;
16
17
  user-select: none;
17
- transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
18
+ border: 1px solid transparent;
19
+ transition: background-color 120ms ease-out,
20
+ border-color 120ms ease-out,
21
+ box-shadow 120ms ease-out;
18
22
 
19
23
  // Reset button styles when rendered as button
20
24
  border: none;
@@ -41,37 +45,110 @@
41
45
  &__container {
42
46
  display: flex;
43
47
  align-items: center;
44
- gap: var(--#{$prefix}navigation-menu-item-gap, 0.75rem);
48
+ gap: var(--#{$prefix}navigation-menu-item-gap, 0.625rem);
45
49
  width: 100%;
46
50
  position: relative;
47
51
  z-index: 1;
48
52
  }
49
53
 
50
- &__start-content,
54
+ &__start-content {
55
+ display: flex;
56
+ align-items: center;
57
+ flex-shrink: 0;
58
+ }
59
+
51
60
  &__end-content {
52
61
  display: flex;
53
62
  align-items: center;
54
63
  flex-shrink: 0;
64
+ margin-left: auto;
55
65
  }
56
66
 
57
67
  &__content {
58
68
  display: flex;
59
69
  flex-direction: column;
70
+ justify-content: center;
60
71
  flex: 1;
61
72
  min-width: 0;
62
73
  }
63
74
 
64
75
  &__title {
65
- font-weight: var(--#{$prefix}navigation-menu-item-title-font-weight, 500);
76
+ font-weight: 600;
66
77
  font-size: var(--#{$prefix}navigation-menu-item-title-font-size, 0.875rem);
67
78
  line-height: var(--#{$prefix}navigation-menu-item-title-line-height, 1.25rem);
68
79
  color: var(--#{$prefix}navigation-menu-item-title-color, inherit);
80
+ letter-spacing: -0.01em;
81
+ transition: color 120ms ease-out;
69
82
  }
70
83
 
71
84
  &__subtitle {
72
85
  font-size: var(--#{$prefix}navigation-menu-item-subtitle-font-size, 0.75rem);
73
- line-height: var(--#{$prefix}navigation-menu-item-subtitle-line-height, 1rem);
74
- color: var(--#{$prefix}navigation-menu-item-subtitle-color, #6c757d);
86
+ line-height: var(--#{$prefix}navigation-menu-item-subtitle-line-height, 1.125rem);
87
+ color: var(--#{$prefix}navigation-menu-item-subtitle-color, #6b7280);
75
88
  margin-top: 0.125rem;
89
+ font-weight: 400;
90
+ letter-spacing: 0;
91
+ transition: color 120ms ease-out;
92
+ }
93
+
94
+ &__description {
95
+ font-size: var(--#{$prefix}navigation-menu-item-description-font-size, 0.6875rem);
96
+ color: var(--#{$prefix}navigation-menu-item-description-color, #9ca3af);
97
+ margin-top: 0.1875rem;
98
+ line-height: var(--#{$prefix}navigation-menu-item-description-line-height, 1.125rem);
99
+ font-weight: 400;
100
+ letter-spacing: 0;
101
+ font-style: normal;
102
+ transition: color 120ms ease-out;
103
+ max-width: 95%;
104
+ }
105
+ }
106
+
107
+ // ============================================
108
+ // ENTERPRISE STYLES - ONLY FOR POPUP ITEMS
109
+ // ============================================
110
+ // Target items inside NavigationMenuContent (popup/submenu)
111
+ .#{$prefix}navigation-menu-content .#{$prefix}navigation-menu-item {
112
+ // Enhanced padding for popup items (but respect size variables)
113
+ padding-block: var(--#{$prefix}navigation-menu-item-padding-block, 0.75rem);
114
+ padding-left: var(--#{$prefix}navigation-menu-item-padding-left, 1rem);
115
+ padding-right: var(--#{$prefix}navigation-menu-item-padding-right, 1rem);
116
+ margin-inline: 0;
117
+ margin-bottom: 0.125rem;
118
+
119
+ &__container {
120
+ gap: var(--#{$prefix}navigation-menu-item-gap, 0.75rem);
121
+ }
122
+
123
+ // Icon with background circle (enterprise style) - uses CSS variables
124
+ &__start-content {
125
+ display: flex;
126
+ align-items: center;
127
+ justify-content: center;
128
+ width: var(--#{$prefix}navigation-menu-item-icon-size, 2rem);
129
+ height: var(--#{$prefix}navigation-menu-item-icon-size, 2rem);
130
+ border-radius: var(--#{$prefix}navigation-menu-item-icon-radius, 0.375rem);
131
+ background: var(--#{$prefix}navigation-menu-item-icon-bg, rgba(0, 0, 0, 0.04));
132
+ transition: background-color 120ms ease-out;
133
+ }
134
+
135
+ // Use variables for typography (respects SM/MD/LG)
136
+ &__title {
137
+ font-size: var(--#{$prefix}navigation-menu-item-title-font-size);
138
+ line-height: var(--#{$prefix}navigation-menu-item-title-line-height);
139
+ color: var(--#{$prefix}navigation-menu-item-title-color, #111827);
140
+ letter-spacing: -0.015em;
141
+ }
142
+
143
+ &__subtitle {
144
+ font-size: var(--#{$prefix}navigation-menu-item-subtitle-font-size);
145
+ line-height: var(--#{$prefix}navigation-menu-item-subtitle-line-height);
146
+ letter-spacing: -0.005em;
147
+ }
148
+
149
+ &__description {
150
+ font-size: var(--#{$prefix}navigation-menu-item-description-font-size);
151
+ line-height: var(--#{$prefix}navigation-menu-item-description-line-height);
152
+ letter-spacing: -0.005em;
76
153
  }
77
154
  }
package/scss/components/_navigation-menu.scss CHANGED
@@ -20,7 +20,11 @@
20
20
  }
21
21
 
22
22
  &-icon {
23
+ display: flex;
24
+ align-items: center;
25
+ justify-content: center;
23
26
  transition: transform 0.2s ease;
27
+ transform-origin: center;
24
28
 
25
29
  &[data-popup-open] {
26
30
  transform: rotate(180deg);
@@ -47,7 +51,8 @@
47
51
  &-popup {
48
52
  position: relative;
49
53
  box-sizing: border-box;
50
- padding-block: var(--#{$prefix}navigation-menu-popup-padding-block, 0.375rem); // Match dropdown
54
+ padding-block: var(--#{$prefix}navigation-menu-popup-padding-block, 0.375rem);
55
+ padding-inline: var(--#{$prefix}navigation-menu-popup-padding-inline, 0.375rem);
51
56
  border-radius: var(--#{$prefix}navigation-menu-popup-border-radius, 0.5rem);
52
57
  background-color: var(--#{$prefix}navigation-menu-popup-background, rgba(255, 255, 255, 0.98));
53
58
  backdrop-filter: blur(10px);
package/scss/themes/fci/components/_dropdown.scss CHANGED
@@ -63,7 +63,7 @@
63
63
 
64
64
  // Size variants - sm (Compact)
65
65
  .#{$prefix}dropdown--sm .#{$prefix}dropdown-item {
66
- --#{$prefix}dropdown-item-padding-block: 0.25rem; // 4px (was 2px, +2px)
66
+ --#{$prefix}dropdown-item-padding-block: 0.25rem; // 4px
67
67
  --#{$prefix}dropdown-item-padding-left: 0.375rem; // 6px
68
68
  --#{$prefix}dropdown-item-padding-right: 1.25rem; // 20px
69
69
  --#{$prefix}dropdown-item-font-size: 0.6875rem; // 11px
@@ -71,7 +71,11 @@
71
71
  --#{$prefix}dropdown-item-gap: 0.375rem; // 6px
72
72
 
73
73
  --#{$prefix}dropdown-item-title-font-size: 0.6875rem; // 11px
74
+ --#{$prefix}dropdown-item-title-line-height: 0.8125rem; // 13px (was 14px)
74
75
  --#{$prefix}dropdown-item-subtitle-font-size: 0.625rem; // 10px
76
+ --#{$prefix}dropdown-item-subtitle-line-height: 0.6875rem; // 11px (was 12px)
77
+ --#{$prefix}dropdown-item-description-font-size: 0.5625rem; // 9px
78
+ --#{$prefix}dropdown-item-description-line-height: 0.625rem; // 10px (was 11px)
75
79
  }
76
80
 
77
81
  .#{$prefix}dropdown--sm .#{$prefix}dropdown-item .#{$prefix}icon {
@@ -80,7 +84,7 @@
80
84
 
81
85
  // Size variants - md (Default)
82
86
  .#{$prefix}dropdown--md .#{$prefix}dropdown-item {
83
- --#{$prefix}dropdown-item-padding-block: 0.3125rem; // 5px (was 3px, +2px)
87
+ --#{$prefix}dropdown-item-padding-block: 0.375rem; // 6px (increased for better spacing)
84
88
  --#{$prefix}dropdown-item-padding-left: 0.5rem; // 8px
85
89
  --#{$prefix}dropdown-item-padding-right: 1.5rem; // 24px
86
90
  --#{$prefix}dropdown-item-font-size: 0.75rem; // 12px
@@ -88,7 +92,11 @@
88
92
  --#{$prefix}dropdown-item-gap: 0.5rem; // 8px
89
93
 
90
94
  --#{$prefix}dropdown-item-title-font-size: 0.75rem; // 12px
95
+ --#{$prefix}dropdown-item-title-line-height: 0.9375rem; // 15px (was 16px)
91
96
  --#{$prefix}dropdown-item-subtitle-font-size: 0.6875rem; // 11px
97
+ --#{$prefix}dropdown-item-subtitle-line-height: 0.8125rem; // 13px (was 14px)
98
+ --#{$prefix}dropdown-item-description-font-size: 0.625rem; // 10px
99
+ --#{$prefix}dropdown-item-description-line-height: 0.6875rem; // 11px (was 12px)
92
100
  }
93
101
 
94
102
  .#{$prefix}dropdown--md .#{$prefix}dropdown-item .#{$prefix}icon {
@@ -97,7 +105,7 @@
97
105
 
98
106
  // Size variants - lg (Spacious)
99
107
  .#{$prefix}dropdown--lg .#{$prefix}dropdown-item {
100
- --#{$prefix}dropdown-item-padding-block: 0.4375rem; // 7px (was 5px, +2px)
108
+ --#{$prefix}dropdown-item-padding-block: 0.5rem; // 8px (increased for proportional consistency)
101
109
  --#{$prefix}dropdown-item-padding-left: 0.75rem; // 12px
102
110
  --#{$prefix}dropdown-item-padding-right: 2rem; // 32px
103
111
  --#{$prefix}dropdown-item-font-size: 0.875rem; // 14px
@@ -105,7 +113,11 @@
105
113
  --#{$prefix}dropdown-item-gap: 0.625rem; // 10px
106
114
 
107
115
  --#{$prefix}dropdown-item-title-font-size: 0.875rem; // 14px
116
+ --#{$prefix}dropdown-item-title-line-height: 1.0625rem; // 17px (was 18px)
108
117
  --#{$prefix}dropdown-item-subtitle-font-size: 0.75rem; // 12px
118
+ --#{$prefix}dropdown-item-subtitle-line-height: 0.9375rem; // 15px (was 16px)
119
+ --#{$prefix}dropdown-item-description-font-size: 0.6875rem; // 11px
120
+ --#{$prefix}dropdown-item-description-line-height: 0.8125rem; // 13px (was 14px)
109
121
  }
110
122
 
111
123
  .#{$prefix}dropdown--lg .#{$prefix}dropdown-item .#{$prefix}icon {
package/scss/themes/fci/components/_navigation-menu-item.scss CHANGED
@@ -2,39 +2,40 @@
2
2
 
3
3
  .#{$prefix}theme-fci {
4
4
  .#{$prefix}navigation-menu-item {
5
- --#{$prefix}navigation-menu-item-padding-block: 0.375rem;
6
- --#{$prefix}navigation-menu-item-padding-inline: 1rem;
7
- --#{$prefix}navigation-menu-item-border-radius: 0.375rem;
8
- --#{$prefix}navigation-menu-item-gap: 0.75rem;
5
+ --#{$prefix}navigation-menu-item-padding-block: 0.5rem;
6
+ --#{$prefix}navigation-menu-item-padding-inline: 0.875rem;
7
+ --#{$prefix}navigation-menu-item-border-radius: 0.5rem;
8
+ --#{$prefix}navigation-menu-item-gap: 0.625rem;
9
9
 
10
- --#{$prefix}navigation-menu-item-title-font-weight: 500;
10
+ --#{$prefix}navigation-menu-item-title-font-weight: 600;
11
11
  --#{$prefix}navigation-menu-item-title-font-size: 0.875rem;
12
12
  --#{$prefix}navigation-menu-item-title-line-height: 1.25rem;
13
13
 
14
14
  --#{$prefix}navigation-menu-item-subtitle-font-size: 0.75rem;
15
- --#{$prefix}navigation-menu-item-subtitle-line-height: 1rem;
16
- --#{$prefix}navigation-menu-item-subtitle-color: #6c757d;
15
+ --#{$prefix}navigation-menu-item-subtitle-line-height: 1.125rem;
16
+ --#{$prefix}navigation-menu-item-subtitle-color: #6b7280;
17
17
 
18
18
  & > .#{$prefix}overlay {
19
- --#{$prefix}overlay-color: inherit;
19
+ --#{$prefix}overlay-color: currentColor;
20
20
  --#{$prefix}overlay-opacity: 0;
21
- --#{$prefix}_hover-overlay-color: inherit;
22
- --#{$prefix}_hover-overlay-opacity: 0.06;
23
- --#{$prefix}_active-overlay-opacity: 0.1;
24
- transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
21
+ --#{$prefix}_hover-overlay-color: currentColor;
22
+ --#{$prefix}_hover-overlay-opacity: 0.08;
23
+ --#{$prefix}_active-overlay-opacity: 0.12;
24
+ transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1),
25
+ background-color 120ms cubic-bezier(0.4, 0, 0.2, 1);
25
26
  }
26
27
 
27
28
  &--selected {
28
29
  --#{$prefix}navigation-menu-item-selected-color: var(--#{$prefix}primary-color);
29
- font-weight: 500;
30
+ font-weight: 600;
30
31
 
31
32
  & > .#{$prefix}overlay {
32
33
  --#{$prefix}overlay-color: var(--#{$prefix}primary-color);
33
- --#{$prefix}overlay-opacity: 0.1;
34
+ --#{$prefix}overlay-opacity: 0.12;
34
35
  --#{$prefix}_hover-overlay-color: var(--#{$prefix}primary-color);
35
- --#{$prefix}_hover-overlay-opacity: 0.14;
36
+ --#{$prefix}_hover-overlay-opacity: 0.16;
36
37
  --#{$prefix}_active-overlay-color: var(--#{$prefix}primary-color);
37
- --#{$prefix}_active-overlay-opacity: 0.18;
38
+ --#{$prefix}_active-overlay-opacity: 0.2;
38
39
  }
39
40
  }
40
41
 
@@ -44,17 +45,25 @@
44
45
  }
45
46
 
46
47
  // Size variants - sm (Compact)
47
- .#{$prefix}navigation-menu--sm .#{$prefix}navigation-menu-item {
48
- --#{$prefix}navigation-menu-item-padding-block: 0.25rem; // 4px
49
- --#{$prefix}navigation-menu-item-padding-left: 0.375rem; // 6px
50
- --#{$prefix}navigation-menu-item-padding-right: 0.375rem; // 6px (Balanced for root)
51
- --#{$prefix}navigation-menu-item-gap: 0.375rem; // 6px
52
-
53
- --#{$prefix}navigation-menu-item-title-font-size: 0.6875rem; // 11px
54
- --#{$prefix}navigation-menu-item-title-line-height: 0.875rem; // 14px
55
-
56
- --#{$prefix}navigation-menu-item-subtitle-font-size: 0.625rem; // 10px
57
- --#{$prefix}navigation-menu-item-subtitle-line-height: 0.75rem; // 12px
48
+ .#{$prefix}navigation-menu--sm {
49
+ --#{$prefix}navigation-menu-popup-padding-inline: 0.25rem; // 4px
50
+
51
+ .#{$prefix}navigation-menu-item {
52
+ --#{$prefix}navigation-menu-item-padding-block: 0.25rem; // 4px
53
+ --#{$prefix}navigation-menu-item-padding-left: 0.375rem; // 6px
54
+ --#{$prefix}navigation-menu-item-padding-right: 0.375rem; // 6px (Balanced for root)
55
+ --#{$prefix}navigation-menu-item-gap: 0.375rem; // 6px
56
+ --#{$prefix}navigation-menu-item-icon-size: 1.75rem; // 28px
57
+
58
+ --#{$prefix}navigation-menu-item-title-font-size: 0.6875rem; // 11px
59
+ --#{$prefix}navigation-menu-item-title-line-height: 0.8125rem; // 13px
60
+
61
+ --#{$prefix}navigation-menu-item-subtitle-font-size: 0.625rem; // 10px
62
+ --#{$prefix}navigation-menu-item-subtitle-line-height: 0.6875rem; // 11px
63
+
64
+ --#{$prefix}navigation-menu-item-description-font-size: 0.5625rem; // 9px
65
+ --#{$prefix}navigation-menu-item-description-line-height: 0.875rem; // 14px (increased)
66
+ }
58
67
  }
59
68
 
60
69
  // Submenu override for sm (matches dropdown exactly)
@@ -70,17 +79,25 @@
70
79
  }
71
80
 
72
81
  // Size variants - md (Default)
73
- .#{$prefix}navigation-menu--md .#{$prefix}navigation-menu-item {
74
- --#{$prefix}navigation-menu-item-padding-block: 0.3125rem; // 5px
75
- --#{$prefix}navigation-menu-item-padding-left: 0.5rem; // 8px
76
- --#{$prefix}navigation-menu-item-padding-right: 0.5rem; // 8px (Balanced for root)
77
- --#{$prefix}navigation-menu-item-gap: 0.5rem; // 8px
78
-
79
- --#{$prefix}navigation-menu-item-title-font-size: 0.75rem; // 12px
80
- --#{$prefix}navigation-menu-item-title-line-height: 1rem; // 16px
81
-
82
- --#{$prefix}navigation-menu-item-subtitle-font-size: 0.6875rem; // 11px
83
- --#{$prefix}navigation-menu-item-subtitle-line-height: 0.875rem; // 14px
82
+ .#{$prefix}navigation-menu--md {
83
+ --#{$prefix}navigation-menu-popup-padding-inline: 0.375rem; // 6px
84
+
85
+ .#{$prefix}navigation-menu-item {
86
+ --#{$prefix}navigation-menu-item-padding-block: 0.3125rem; // 5px
87
+ --#{$prefix}navigation-menu-item-padding-left: 0.5rem; // 8px
88
+ --#{$prefix}navigation-menu-item-padding-right: 0.5rem; // 8px (Balanced for root)
89
+ --#{$prefix}navigation-menu-item-gap: 0.5rem; // 8px
90
+ --#{$prefix}navigation-menu-item-icon-size: 2rem; // 32px
91
+
92
+ --#{$prefix}navigation-menu-item-title-font-size: 0.75rem; // 12px
93
+ --#{$prefix}navigation-menu-item-title-line-height: 0.9375rem; // 15px
94
+
95
+ --#{$prefix}navigation-menu-item-subtitle-font-size: 0.6875rem; // 11px
96
+ --#{$prefix}navigation-menu-item-subtitle-line-height: 0.8125rem; // 13px
97
+
98
+ --#{$prefix}navigation-menu-item-description-font-size: 0.625rem; // 10px
99
+ --#{$prefix}navigation-menu-item-description-line-height: 1rem; // 16px (increased)
100
+ }
84
101
  }
85
102
 
86
103
  // Submenu override for md (matches dropdown exactly)
@@ -96,17 +113,25 @@
96
113
  }
97
114
 
98
115
  // Size variants - lg (Spacious)
99
- .#{$prefix}navigation-menu--lg .#{$prefix}navigation-menu-item {
100
- --#{$prefix}navigation-menu-item-padding-block: 0.4375rem; // 7px
101
- --#{$prefix}navigation-menu-item-padding-left: 0.75rem; // 12px
102
- --#{$prefix}navigation-menu-item-padding-right: 0.75rem; // 12px (Balanced for root)
103
- --#{$prefix}navigation-menu-item-gap: 0.625rem; // 10px
104
-
105
- --#{$prefix}navigation-menu-item-title-font-size: 0.875rem; // 14px
106
- --#{$prefix}navigation-menu-item-title-line-height: 1.125rem; // 18px
107
-
108
- --#{$prefix}navigation-menu-item-subtitle-font-size: 0.75rem; // 12px
109
- --#{$prefix}navigation-menu-item-subtitle-line-height: 1rem; // 16px
116
+ .#{$prefix}navigation-menu--lg {
117
+ --#{$prefix}navigation-menu-popup-padding-inline: 0.5rem; // 8px
118
+
119
+ .#{$prefix}navigation-menu-item {
120
+ --#{$prefix}navigation-menu-item-padding-block: 0.4375rem; // 7px
121
+ --#{$prefix}navigation-menu-item-padding-left: 0.75rem; // 12px
122
+ --#{$prefix}navigation-menu-item-padding-right: 0.75rem; // 12px (Balanced for root)
123
+ --#{$prefix}navigation-menu-item-gap: 0.625rem; // 10px
124
+ --#{$prefix}navigation-menu-item-icon-size: 2.25rem; // 36px
125
+
126
+ --#{$prefix}navigation-menu-item-title-font-size: 0.875rem; // 14px
127
+ --#{$prefix}navigation-menu-item-title-line-height: 1.0625rem; // 17px
128
+
129
+ --#{$prefix}navigation-menu-item-subtitle-font-size: 0.75rem; // 12px
130
+ --#{$prefix}navigation-menu-item-subtitle-line-height: 0.9375rem; // 15px
131
+
132
+ --#{$prefix}navigation-menu-item-description-font-size: 0.6875rem; // 11px
133
+ --#{$prefix}navigation-menu-item-description-line-height: 1.125rem; // 18px (increased)
134
+ }
110
135
  }
111
136
 
112
137
  // Submenu override for lg (matches dropdown exactly)