@fundamental-styles/mcp 0.41.9-rc.21 → 0.41.9-rc.22

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 (12) hide show
  1. package/data/CHANGELOG.md +9 -3
  2. package/data/components/dialog-docs-static-settings.md +1490 -130
  3. package/data/examples/Components/settings/md.example.html +124 -30
  4. package/data/examples/Components/settings/sm.example.html +64 -27
  5. package/data/examples/Components/settings/xl-appearance.example.html +370 -0
  6. package/data/examples/Components/settings/xl-language-region.example.html +284 -0
  7. package/data/examples/Components/settings/xl-notifications-details.example.html +240 -0
  8. package/data/examples/Components/settings/xl-notifications.example.html +370 -0
  9. package/data/examples/Components/settings/xl-user-account.example.html +114 -0
  10. package/data/examples/Components/settings/xl.example.html +113 -25
  11. package/package.json +1 -1
  12. package/data/examples/Components/settings/xl-default.example.html +0 -108
package/data/examples/Components/settings/md.example.html CHANGED
@@ -1,25 +1,39 @@
1
- <div style="display: flex; gap: 1rem; max-width: 1200px;">
1
+ <div style="display: flex; gap: 1rem; max-width: 1200px">
2
2
  <section class="fd-dialog-docs-static fd-dialog fd-settings fd-dialog--active">
3
- <div class="fd-dialog__content fd-settings__dialog-content" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1" style="height: 800px;">
4
- <div class="fd-dialog__body fd-settings__dialog-body" >
3
+ <div
4
+ class="fd-dialog__content fd-settings__dialog-content"
5
+ role="dialog"
6
+ aria-modal="true"
7
+ aria-labelledby="dialog-title-1"
8
+ style="height: 800px"
9
+ >
10
+ <div class="fd-dialog__body fd-settings__dialog-body">
5
11
  <div class="fd-settings__container fd-settings__container--md">
6
12
  <div class="fd-settings__list-area">
7
13
  <div class="fd-bar fd-bar--header fd-bar--header-with-subheader">
8
14
  <div class="fd-bar__left">
9
15
  <div class="fd-bar__element">
10
- <h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
16
+ <h1 class="fd-title fd-title--h5" aria-label="text">Settings</h1>
11
17
  </div>
12
18
  </div>
13
19
  </div>
14
20
  <div class="fd-bar fd-bar--subheader">
15
21
  <div class="fd-bar__middle">
16
22
  <div class="fd-bar__element fd-bar__element--full-width">
17
- <input class="fd-input fd-input-group__input" type="text" placeholder="Search" aria-label="input">
23
+ <input
24
+ class="fd-input fd-input-group__input"
25
+ type="text"
26
+ placeholder="Search"
27
+ aria-label="input"
28
+ />
18
29
  </div>
19
30
  </div>
20
31
  </div>
21
32
  <div class="fd-settings__list-container">
22
- <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list" role="list">
33
+ <ul
34
+ class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list"
35
+ role="list"
36
+ >
23
37
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
24
38
  <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
25
39
  <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
@@ -31,7 +45,7 @@
31
45
  <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
32
46
  <span class="fd-list__title">Settings Item</span>
33
47
  </a>
34
- </li>
48
+ </li>
35
49
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
36
50
  <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
37
51
  <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
@@ -41,7 +55,7 @@
41
55
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
42
56
  <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
43
57
  <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
44
- <span class="fd-list__title">Settings Item</span>
58
+ <span class="fd-list__title">Settings Item</span>
45
59
  </a>
46
60
  </li>
47
61
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
@@ -69,8 +83,11 @@
69
83
  </a>
70
84
  </li>
71
85
  </ul>
72
-
73
- <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer" role="list">
86
+
87
+ <ul
88
+ class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer"
89
+ role="list"
90
+ >
74
91
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
75
92
  <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
76
93
  <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
@@ -85,9 +102,7 @@
85
102
  <footer class="fd-dialog__footer fd-bar fd-bar--footer">
86
103
  <div class="fd-bar__right">
87
104
  <div class="fd-bar__element">
88
- <button class="fd-dialog__decisive-button fd-button fd-button--transparent">
89
- Close
90
- </button>
105
+ <button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
91
106
  </div>
92
107
  </div>
93
108
  </footer>
@@ -95,7 +110,13 @@
95
110
  </section>
96
111
 
97
112
  <section class="fd-dialog-docs-static fd-dialog fd-settings fd-settings--md fd-dialog--active">
98
- <div class="fd-dialog__content fd-settings__dialog-content" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1" style="height: 800px;">
113
+ <div
114
+ class="fd-dialog__content fd-settings__dialog-content"
115
+ role="dialog"
116
+ aria-modal="true"
117
+ aria-labelledby="dialog-title-1"
118
+ style="height: 800px"
119
+ >
99
120
  <div class="fd-dialog__body fd-settings__dialog-body">
100
121
  <div class="fd-settings__container fd-settings__container--md">
101
122
  <div class="fd-settings__detail-area">
@@ -107,15 +128,21 @@
107
128
  </button>
108
129
  </div>
109
130
  <div class="fd-bar__element">
110
- <h5 class="fd-title fd-title--h5" aria-label="text">Settings Item</h5>
131
+ <h2 class="fd-title fd-title--h5" aria-label="text">Settings Item</h2>
111
132
  </div>
112
133
  </div>
113
134
  </div>
114
-
135
+
115
136
  <div class="fd-icon-tab-bar fd-icon-tab-bar--sm fd-settings__tab-bar">
116
137
  <ul role="tablist" class="fd-icon-tab-bar__header">
117
138
  <li role="presentation" class="fd-icon-tab-bar__item">
118
- <a role="tab" class="fd-icon-tab-bar__tab" aria-selected="true" href="#section1" id="tab1">
139
+ <a
140
+ role="tab"
141
+ class="fd-icon-tab-bar__tab"
142
+ aria-selected="true"
143
+ href="#section1"
144
+ id="tab1"
145
+ >
119
146
  <span class="fd-icon-tab-bar__tag">Tab Text</span>
120
147
  </a>
121
148
  </li>
@@ -125,30 +152,97 @@
125
152
  </a>
126
153
  </li>
127
154
  </ul>
128
- <section role="tabpanel" class="fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background" id="section1" aria-labelledby="tab1">
129
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
130
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
131
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
132
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
133
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
134
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
155
+ <section
156
+ role="tabpanel"
157
+ class="fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background"
158
+ id="section1"
159
+ aria-labelledby="tab1"
160
+ >
161
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
162
+ laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
163
+ architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
164
+ sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
165
+ voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
166
+ amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
167
+ labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
168
+ nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
169
+ consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
170
+ nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
171
+ pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
172
+ doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
173
+ quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
174
+ voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
175
+ ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
176
+ dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
177
+ incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
178
+ veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
179
+ ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
180
+ velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
181
+ voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem
182
+ accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
183
+ veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
184
+ voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
185
+ dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
186
+ ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
187
+ tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad
188
+ minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
189
+ aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
190
+ voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat
191
+ quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit
192
+ voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
193
+ inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
194
+ ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
195
+ magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
196
+ dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
197
+ eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut
198
+ enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
199
+ nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
200
+ ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum
201
+ fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit
202
+ voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
203
+ inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
204
+ ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
205
+ magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
206
+ dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
207
+ eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut
208
+ enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
209
+ nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
210
+ ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum
211
+ fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit
212
+ voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
213
+ inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
214
+ ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
215
+ magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
216
+ dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
217
+ eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut
218
+ enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
219
+ nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
220
+ ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum
221
+ fugiat quo voluptas nulla pariatur?
135
222
  </section>
136
- <section role="tabpanel" class="fd-icon-tab-bar__panel fd-settings__content" id="section2" aria-labelledby="tab2" hidden>
223
+ <section
224
+ role="tabpanel"
225
+ class="fd-icon-tab-bar__panel fd-settings__content"
226
+ id="section2"
227
+ aria-labelledby="tab2"
228
+ hidden
229
+ >
137
230
  Section
138
231
  </section>
139
232
  </div>
140
233
  </div>
141
234
  </div>
142
235
  </div>
143
- <footer class="fd-dialog__footer fd-bar fd-bar--footer">
236
+ <footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
144
237
  <div class="fd-bar__right">
145
238
  <div class="fd-bar__element">
146
- <button class="fd-dialog__decisive-button fd-button fd-button--transparent">
147
- Close
148
- </button>
239
+ <button class="fd-dialog__decisive-button fd-button fd-button--emphasized">Save</button>
240
+ </div>
241
+ <div class="fd-bar__element">
242
+ <button class="fd-dialog__decisive-button fd-button fd-button--transparent">Cancel</button>
149
243
  </div>
150
244
  </div>
151
245
  </footer>
152
246
  </div>
153
247
  </section>
154
- </div>
248
+ </div>
package/data/examples/Components/settings/sm.example.html CHANGED
@@ -1,25 +1,39 @@
1
- <div style="display: flex; gap: 1rem; max-width: 1200px;">
2
- <section class="fd-dialog-docs-static fd-dialog fd-settings fd-settings--sm fd-dialog--active" style="width: 400px;">
3
- <div class="fd-dialog__content fd-settings__dialog-content" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1" style="height: 800px;">
4
- <div class="fd-dialog__body fd-settings__dialog-body" >
1
+ <div style="display: flex; gap: 1rem; max-width: 1200px">
2
+ <section class="fd-dialog-docs-static fd-dialog fd-settings fd-settings--sm fd-dialog--active" style="width: 400px">
3
+ <div
4
+ class="fd-dialog__content fd-settings__dialog-content"
5
+ role="dialog"
6
+ aria-modal="true"
7
+ aria-labelledby="dialog-title-1"
8
+ style="height: 800px"
9
+ >
10
+ <div class="fd-dialog__body fd-settings__dialog-body">
5
11
  <div class="fd-settings__container fd-settings__container--sm">
6
12
  <div class="fd-settings__list-area">
7
13
  <div class="fd-bar fd-bar--header fd-bar--header-with-subheader">
8
14
  <div class="fd-bar__left">
9
15
  <div class="fd-bar__element">
10
- <h5 class="fd-title fd-title--h5" aria-label="text">Settings</h5>
16
+ <h1 class="fd-title fd-title--h5" aria-label="text">Settings</h1>
11
17
  </div>
12
18
  </div>
13
19
  </div>
14
20
  <div class="fd-bar fd-bar--subheader">
15
21
  <div class="fd-bar__middle">
16
22
  <div class="fd-bar__element fd-bar__element--full-width">
17
- <input class="fd-input fd-input-group__input" type="text" placeholder="Search" aria-label="input">
23
+ <input
24
+ class="fd-input fd-input-group__input"
25
+ type="text"
26
+ placeholder="Search"
27
+ aria-label="input"
28
+ />
18
29
  </div>
19
30
  </div>
20
31
  </div>
21
32
  <div class="fd-settings__list-container">
22
- <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list" role="list">
33
+ <ul
34
+ class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list"
35
+ role="list"
36
+ >
23
37
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
24
38
  <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
25
39
  <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
@@ -31,7 +45,7 @@
31
45
  <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
32
46
  <span class="fd-list__title">Settings Item</span>
33
47
  </a>
34
- </li>
48
+ </li>
35
49
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
36
50
  <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
37
51
  <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
@@ -41,7 +55,7 @@
41
55
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
42
56
  <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
43
57
  <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
44
- <span class="fd-list__title">Settings Item</span>
58
+ <span class="fd-list__title">Settings Item</span>
45
59
  </a>
46
60
  </li>
47
61
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
@@ -69,8 +83,11 @@
69
83
  </a>
70
84
  </li>
71
85
  </ul>
72
-
73
- <ul class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer" role="list">
86
+
87
+ <ul
88
+ class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border fd-settings__list fd-settings__list--footer"
89
+ role="list"
90
+ >
74
91
  <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
75
92
  <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
76
93
  <i role="presentation" class="fd-list__icon sap-icon--globe"></i>
@@ -82,20 +99,24 @@
82
99
  </div>
83
100
  </div>
84
101
  </div>
85
- <footer class="fd-dialog__footer fd-bar fd-bar--footer">
102
+ <footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
86
103
  <div class="fd-bar__right">
87
104
  <div class="fd-bar__element">
88
- <button class="fd-dialog__decisive-button fd-button fd-button--transparent">
89
- Close
90
- </button>
105
+ <button class="fd-dialog__decisive-button fd-button fd-button--transparent">Close</button>
91
106
  </div>
92
107
  </div>
93
108
  </footer>
94
109
  </div>
95
110
  </section>
96
111
 
97
- <section class="fd-dialog-docs-static fd-dialog fd-settings fd-settings--sm fd-dialog--active" style="width: 400px;">
98
- <div class="fd-dialog__content fd-settings__dialog-content" role="dialog" aria-modal="true" aria-labelledby="dialog-title-1" style="height: 800px;">
112
+ <section class="fd-dialog-docs-static fd-dialog fd-settings fd-settings--sm fd-dialog--active" style="width: 400px">
113
+ <div
114
+ class="fd-dialog__content fd-settings__dialog-content"
115
+ role="dialog"
116
+ aria-modal="true"
117
+ aria-labelledby="dialog-title-1"
118
+ style="height: 800px"
119
+ >
99
120
  <div class="fd-dialog__body fd-settings__dialog-body">
100
121
  <div class="fd-settings__container fd-settings__container--sm">
101
122
  <div class="fd-settings__detail-area">
@@ -107,27 +128,43 @@
107
128
  </button>
108
129
  </div>
109
130
  <div class="fd-bar__element">
110
- <h5 class="fd-title fd-title--h5" aria-label="text">Settings Item</h5>
131
+ <h2 class="fd-title fd-title--h5" aria-label="text">Settings Item</h2>
111
132
  </div>
112
133
  </div>
113
134
  </div>
114
-
115
- <section class="fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background" id="section1" aria-labelledby="tab1">
116
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
117
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
135
+
136
+ <section
137
+ class="fd-icon-tab-bar__panel fd-settings__content fd-settings__content--no-background"
138
+ id="section1"
139
+ aria-labelledby="tab1"
140
+ >
141
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
142
+ laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
143
+ architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
144
+ aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
145
+ voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
146
+ consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
147
+ dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
148
+ exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
149
+ consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
150
+ molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut
151
+ perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
152
+ totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
153
+ vitae dicta sunt explicabo.
118
154
  </section>
119
155
  </div>
120
156
  </div>
121
157
  </div>
122
- <footer class="fd-dialog__footer fd-bar fd-bar--footer">
158
+ <footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
123
159
  <div class="fd-bar__right">
124
160
  <div class="fd-bar__element">
125
- <button class="fd-dialog__decisive-button fd-button fd-button--transparent">
126
- Close
127
- </button>
161
+ <button class="fd-dialog__decisive-button fd-button fd-button--emphasized">Save</button>
162
+ </div>
163
+ <div class="fd-bar__element">
164
+ <button class="fd-dialog__decisive-button fd-button fd-button--transparent">Cancel</button>
128
165
  </div>
129
166
  </div>
130
167
  </footer>
131
168
  </div>
132
169
  </section>
133
- </div>
170
+ </div>