@fundamental-styles/mcp 0.41.8-rc.8 → 0.41.8
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.
- package/data/CHANGELOG.md +32 -0
- package/data/accessibility.json +34 -6
- package/data/component-graph.md +7128 -465
- package/data/component-relationships.json +42632 -2263
- package/data/components/avatar-product-switch.md +391 -271
- package/data/components/dynamic-page-dynamic-page.md +287 -3
- package/data/components/dynamic-page.md +1 -1
- package/data/components/panel.md +15 -11
- package/data/design-tokens.json +2 -2
- package/data/examples/Components/panel/borderless.example.html +3 -3
- package/data/examples/Components/panel/expandable.example.html +2 -2
- package/data/examples/Components/panel/fixed-height-content.example.html +1 -1
- package/data/examples/Components/panel/fixed.example.html +1 -1
- package/data/examples/Components/panel/sticky-header.example.html +1 -1
- package/data/examples/Components/panel/transparent.example.html +2 -2
- package/data/examples/Components/product-switch/large.example.html +125 -94
- package/data/examples/Components/product-switch/medium.example.html +26 -13
- package/data/examples/Components/product-switch/small.example.html +71 -33
- package/data/examples/Layouts/dynamic-page/large.example.html +156 -0
- package/data/examples/Layouts/dynamic-page/mobile-collapsed.example.html +1 -1
- package/data/examples/Layouts/dynamic-page/responsive-paddings.example.html +121 -0
- package/data/examples/Layouts/dynamic-page/summary-line.example.html +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
|
|
2
|
+
<article class="fd-dynamic-page fd-dynamic-page--lg" aria-roledescription="Dynamic Page">
|
|
3
|
+
<header class="fd-dynamic-page__header">
|
|
4
|
+
<span
|
|
5
|
+
role="button"
|
|
6
|
+
aria-expanded="true"
|
|
7
|
+
aria-labelledby="fd-dynamic-page-title-lg"
|
|
8
|
+
aria-label="Toggle header"
|
|
9
|
+
tabindex="0"
|
|
10
|
+
class="fd-dynamic-page__header-button">
|
|
11
|
+
</span>
|
|
12
|
+
<div class="fd-dynamic-page__title-area">
|
|
13
|
+
<div class="fd-dynamic-page__main-container">
|
|
14
|
+
<div class="fd-dynamic-page__breadcrumb-title-container">
|
|
15
|
+
<div class="fd-dynamic-page__breadcrumb-container">
|
|
16
|
+
<nav aria-label="Breadcrumbs">
|
|
17
|
+
<ul class="fd-dynamic-page__breadcrumb fd-breadcrumb">
|
|
18
|
+
<li class="fd-breadcrumb__item">
|
|
19
|
+
<a class="fd-link" tabindex="0" href="#">
|
|
20
|
+
<span class="fd-link__content">Men</span>
|
|
21
|
+
</a>
|
|
22
|
+
<span class="fd-breadcrumb__separator" aria-hidden="true"></span>
|
|
23
|
+
</li>
|
|
24
|
+
<li class="fd-breadcrumb__item">
|
|
25
|
+
<a class="fd-link" tabindex="0" href="#">
|
|
26
|
+
<span class="fd-link__content">Shoes</span>
|
|
27
|
+
</a>
|
|
28
|
+
<span class="fd-breadcrumb__separator" aria-hidden="true"></span>
|
|
29
|
+
</li>
|
|
30
|
+
<li class="fd-breadcrumb__item">
|
|
31
|
+
<a aria-current="page" class="fd-link" tabindex="0" href="#">
|
|
32
|
+
<span class="fd-link__content">Running Shoes</span>
|
|
33
|
+
</a>
|
|
34
|
+
<span class="fd-breadcrumb__separator" aria-hidden="true"></span>
|
|
35
|
+
</li>
|
|
36
|
+
</ul>
|
|
37
|
+
</nav>
|
|
38
|
+
<div class="fd-dynamic-page__toolbar-container">
|
|
39
|
+
<div
|
|
40
|
+
role="toolbar"
|
|
41
|
+
aria-label="Product actions"
|
|
42
|
+
class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent"
|
|
43
|
+
>
|
|
44
|
+
<button class="fd-button fd-button--transparent" aria-label="Resize">
|
|
45
|
+
<i class="sap-icon--resize"></i>
|
|
46
|
+
</button>
|
|
47
|
+
<button class="fd-button fd-button--transparent" aria-label="Exit fullscreen">
|
|
48
|
+
<i class="sap-icon--exitfullscreen"></i>
|
|
49
|
+
</button>
|
|
50
|
+
<button class="fd-button fd-button--transparent" aria-label="Close">
|
|
51
|
+
<i class="sap-icon--decline"></i>
|
|
52
|
+
</button>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="fd-dynamic-page__title-container">
|
|
57
|
+
<div
|
|
58
|
+
id="fd-dynamic-page-title-lg"
|
|
59
|
+
aria-level="2"
|
|
60
|
+
role="heading"
|
|
61
|
+
class="fd-title fd-dynamic-page__title"
|
|
62
|
+
title="Balenciaga Triple S Trainers">
|
|
63
|
+
Balenciaga Triple S Trainers
|
|
64
|
+
</div>
|
|
65
|
+
<div class="fd-dynamic-page__title-content" title="Some RANDOM things">
|
|
66
|
+
Some RANDOM things
|
|
67
|
+
</div>
|
|
68
|
+
<div class="fd-dynamic-page__toolbar-container">
|
|
69
|
+
<div
|
|
70
|
+
role="toolbar"
|
|
71
|
+
aria-label="Navigation actions"
|
|
72
|
+
class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent"
|
|
73
|
+
>
|
|
74
|
+
<button class="fd-button fd-button--positive">Accept</button>
|
|
75
|
+
<button class="fd-button fd-button--reject">Reject</button>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
<div class="fd-dynamic-page__subtitle"> Oversized multimaterial sneakers with quilted effect</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="fd-dynamic-page__collapsible-header-container">
|
|
84
|
+
<section class="fd-dynamic-page__collapsible-header" role="region" aria-hidden="false" id="fddplhvc-lg" aria-label="Expanded header">
|
|
85
|
+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, delectus
|
|
86
|
+
necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio
|
|
87
|
+
consequatur nobis?
|
|
88
|
+
</section>
|
|
89
|
+
<div class="fd-dynamic-page__collapsible-header-visibility-container">
|
|
90
|
+
<div class="fd-dynamic-page__collapsible-header-visibility-container--left-gradient"></div>
|
|
91
|
+
<div
|
|
92
|
+
role="toolbar"
|
|
93
|
+
aria-label="Header actions"
|
|
94
|
+
class="fd-dynamic-page__collapsible-header-visibility-container--button-group"
|
|
95
|
+
>
|
|
96
|
+
<button
|
|
97
|
+
class="fd-dynamic-page__collapse-button fd-button"
|
|
98
|
+
aria-label="See More"
|
|
99
|
+
aria-expanded="true"
|
|
100
|
+
aria-haspopup="true"
|
|
101
|
+
aria-controls="fddplhvc-lg"
|
|
102
|
+
>
|
|
103
|
+
<i class="sap-icon--slim-arrow-up"></i>
|
|
104
|
+
</button>
|
|
105
|
+
<button class="fd-dynamic-page__pin-button fd-button" aria-label="Pin this">
|
|
106
|
+
<i class="sap-icon--pushpin-off"></i>
|
|
107
|
+
</button>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="fd-dynamic-page__collapsible-header-visibility-container--right-gradient"></div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
<div class="fd-dynamic-page__tabs--overflow">
|
|
113
|
+
<ul class="fd-tabs fd-tabs--l fd-dynamic-page__tabs fd-dynamic-page__tabs--add-shadow" role="tablist">
|
|
114
|
+
<li role="tab" class="fd-tabs__item" aria-controls="fuCwV-lg1">
|
|
115
|
+
<a class="fd-tabs__link" href="#fuCwV-lg1">
|
|
116
|
+
<span class="fd-tabs__tag">Link</span>
|
|
117
|
+
</a>
|
|
118
|
+
</li>
|
|
119
|
+
<li role="tab" class="fd-tabs__item" aria-selected="true" aria-controls="AiWfz-lg2">
|
|
120
|
+
<a class="fd-tabs__link" href="#AiWfz-lg2">
|
|
121
|
+
<span class="fd-tabs__tag">Selected</span>
|
|
122
|
+
</a>
|
|
123
|
+
</li>
|
|
124
|
+
</ul>
|
|
125
|
+
</div>
|
|
126
|
+
</header>
|
|
127
|
+
<div class="fd-dynamic-page__content">
|
|
128
|
+
<div class="fd-tabs__panel" aria-expanded="false" id="fuCwV-lg1" role="tabpanel">
|
|
129
|
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
|
|
130
|
+
dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? Lorem ipsum dolor, sit
|
|
131
|
+
amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam
|
|
132
|
+
perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
|
|
133
|
+
</div>
|
|
134
|
+
<div class="fd-tabs__panel" aria-expanded="true" id="AiWfz-lg2" role="tabpanel">
|
|
135
|
+
Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in
|
|
136
|
+
atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. Dolor sit Lorem ipsum dolor sit amet,
|
|
137
|
+
consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus
|
|
138
|
+
rerum incidunt unde quod fuga amet ea reprehenderit.
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
<footer class="fd-bar fd-bar--floating-footer" style="position:relative">
|
|
142
|
+
<div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
|
|
143
|
+
<div class="fd-bar__element">
|
|
144
|
+
<button aria-label="button" class="fd-button fd-button--emphasized">
|
|
145
|
+
Save
|
|
146
|
+
</button>
|
|
147
|
+
</div>
|
|
148
|
+
<div class="fd-bar__element">
|
|
149
|
+
<button aria-label="button" class="fd-button fd-button--transparent">
|
|
150
|
+
Cancel
|
|
151
|
+
</button>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</footer>
|
|
155
|
+
</article>
|
|
156
|
+
<br /><br />
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
tabindex="0"
|
|
10
10
|
class="fd-dynamic-page__header-button">
|
|
11
11
|
</span>
|
|
12
|
-
<div class="fd-dynamic-page__title-area
|
|
12
|
+
<div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed">
|
|
13
13
|
<div class="fd-dynamic-page__main-container">
|
|
14
14
|
<div class="fd-dynamic-page__breadcrumb-title-container">
|
|
15
15
|
<div class="fd-dynamic-page__breadcrumb-container">
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
|
|
2
|
+
<article class="fd-dynamic-page fd-dynamic-page--responsive-paddings" aria-roledescription="Dynamic Page">
|
|
3
|
+
<header class="fd-dynamic-page__header">
|
|
4
|
+
<span
|
|
5
|
+
role="button"
|
|
6
|
+
aria-expanded="true"
|
|
7
|
+
aria-labelledby="fd-dynamic-page-title-rp"
|
|
8
|
+
aria-label="Toggle header"
|
|
9
|
+
tabindex="0"
|
|
10
|
+
class="fd-dynamic-page__header-button">
|
|
11
|
+
</span>
|
|
12
|
+
<div class="fd-dynamic-page__title-area">
|
|
13
|
+
<div class="fd-dynamic-page__main-container">
|
|
14
|
+
<div class="fd-dynamic-page__breadcrumb-title-container">
|
|
15
|
+
<nav aria-label="Breadcrumbs">
|
|
16
|
+
<ul class="fd-dynamic-page__breadcrumb fd-breadcrumb">
|
|
17
|
+
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Men</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
|
|
18
|
+
<li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
|
|
19
|
+
<li class="fd-breadcrumb__item"><a aria-current="page" class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Running Shoes</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
|
|
20
|
+
</ul>
|
|
21
|
+
</nav>
|
|
22
|
+
<div class="fd-dynamic-page__title-container">
|
|
23
|
+
<div
|
|
24
|
+
id="fd-dynamic-page-title-rp"
|
|
25
|
+
aria-level="2"
|
|
26
|
+
role="heading"
|
|
27
|
+
class="fd-title fd-dynamic-page__title"
|
|
28
|
+
title="Balenciaga Triple S Trainers">
|
|
29
|
+
Balenciaga Triple S Trainers
|
|
30
|
+
</div>
|
|
31
|
+
<div class="fd-dynamic-page__title-content" title="Some RANDOM things"> Some RANDOM things </div>
|
|
32
|
+
<div class="fd-dynamic-page__toolbar-container">
|
|
33
|
+
<div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
|
|
34
|
+
<button class="fd-button fd-button--positive">Accept</button>
|
|
35
|
+
<button class="fd-button fd-button--reject">Reject</button>
|
|
36
|
+
<span class="fd-toolbar__separator"></span>
|
|
37
|
+
</div>
|
|
38
|
+
<div role="toolbar" aria-label="Navigation actions" class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
|
|
39
|
+
<button class="fd-button fd-button--transparent" aria-label="Resize">
|
|
40
|
+
<i class="sap-icon--resize"></i>
|
|
41
|
+
</button>
|
|
42
|
+
<button class="fd-button fd-button--transparent" aria-label="Exit fullscreen">
|
|
43
|
+
<i class="sap-icon--exitfullscreen"></i>
|
|
44
|
+
</button>
|
|
45
|
+
<button class="fd-button fd-button--transparent" aria-label="Close">
|
|
46
|
+
<i class="sap-icon--decline"></i>
|
|
47
|
+
</button>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="fd-dynamic-page__subtitle"> Oversized multimaterial sneakers with quilted effect </div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="fd-dynamic-page__collapsible-header-container">
|
|
56
|
+
<section class="fd-dynamic-page__collapsible-header" role="region" id="fddplhvc-rp" aria-label="Expanded header">
|
|
57
|
+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis,
|
|
58
|
+
delectus necessitatibus incidunt numquam asperiores tenetur iure.
|
|
59
|
+
Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis?
|
|
60
|
+
</section>
|
|
61
|
+
<div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow">
|
|
62
|
+
<div class="fd-dynamic-page__collapsible-header-visibility-container--left-gradient"></div>
|
|
63
|
+
<div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group">
|
|
64
|
+
<button class="fd-dynamic-page__collapse-button fd-button"
|
|
65
|
+
aria-label="See More"
|
|
66
|
+
aria-expanded="true"
|
|
67
|
+
aria-haspopup="true"
|
|
68
|
+
aria-controls="fddplhvc-rp">
|
|
69
|
+
<i class="sap-icon--slim-arrow-up"></i>
|
|
70
|
+
</button>
|
|
71
|
+
<button class="fd-dynamic-page__pin-button fd-button"
|
|
72
|
+
aria-label="Pin this">
|
|
73
|
+
<i class="sap-icon--pushpin-off"></i>
|
|
74
|
+
</button>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="fd-dynamic-page__collapsible-header-visibility-container--right-gradient"></div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="fd-dynamic-page__tabs--overflow">
|
|
80
|
+
<ul class="fd-tabs fd-tabs--l fd-dynamic-page__tabs fd-dynamic-page__tabs--add-shadow" role="tablist">
|
|
81
|
+
<li role="tab" class="fd-tabs__item">
|
|
82
|
+
<a class="fd-tabs__link" aria-controls="fuCwV550rp" href="#fuCwV550rp">
|
|
83
|
+
<span class="fd-tabs__tag">
|
|
84
|
+
Link
|
|
85
|
+
</span>
|
|
86
|
+
</a>
|
|
87
|
+
</li>
|
|
88
|
+
<li role="tab" class="fd-tabs__item" aria-selected="true">
|
|
89
|
+
<a class="fd-tabs__link" aria-controls="AiWfz165rp" href="#AiWfz165rp">
|
|
90
|
+
<span class="fd-tabs__tag">
|
|
91
|
+
Selected
|
|
92
|
+
</span>
|
|
93
|
+
</a>
|
|
94
|
+
</li>
|
|
95
|
+
</ul>
|
|
96
|
+
</div>
|
|
97
|
+
</header>
|
|
98
|
+
<div class="fd-dynamic-page__content">
|
|
99
|
+
<div class="fd-tabs__panel" aria-expanded="false" id="fuCwV550rp" role="tabpanel">
|
|
100
|
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam
|
|
101
|
+
eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
|
|
102
|
+
</div>
|
|
103
|
+
<div class="fd-tabs__panel" aria-expanded="true" id="AiWfz165rp" role="tabpanel">
|
|
104
|
+
Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
|
|
105
|
+
in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
|
|
106
|
+
Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
|
|
107
|
+
in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
<footer class="fd-bar fd-bar--floating-footer" style="position:relative">
|
|
111
|
+
<div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
|
|
112
|
+
<div class="fd-bar__element">
|
|
113
|
+
<button aria-label="button" class="fd-button fd-button--emphasized">Save</button>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="fd-bar__element">
|
|
116
|
+
<button aria-label="button" class="fd-button fd-button--transparent">Cancel</button>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</footer>
|
|
120
|
+
</article>
|
|
121
|
+
<br /><br />
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
</button>
|
|
19
19
|
</div>
|
|
20
20
|
</div>
|
|
21
|
-
<div class="fd-dynamic-page__title-area
|
|
21
|
+
<div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed"
|
|
22
22
|
aria-hidden="true">
|
|
23
23
|
<div class="fd-dynamic-page__breadcrumb-title-container">
|
|
24
24
|
<nav aria-label="Breadcrumbs">
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fundamental-styles/mcp",
|
|
3
|
-
"version": "0.41.8
|
|
3
|
+
"version": "0.41.8",
|
|
4
|
+
"mcpName": "io.github.sap/fundamental-styles-mcp",
|
|
4
5
|
"description": "MCP server exposing fundamental-styles CSS component metadata for AI coding assistants",
|
|
5
6
|
"license": "Apache-2.0",
|
|
6
7
|
"repository": {
|