@fundamental-styles/mcp 0.41.8-rc.9 → 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.
Files changed (15) hide show
  1. package/data/CHANGELOG.md +29 -3
  2. package/data/components/dynamic-page-dynamic-page.md +287 -3
  3. package/data/components/dynamic-page.md +1 -1
  4. package/data/components/panel.md +15 -11
  5. package/data/examples/Components/panel/borderless.example.html +3 -3
  6. package/data/examples/Components/panel/expandable.example.html +2 -2
  7. package/data/examples/Components/panel/fixed-height-content.example.html +1 -1
  8. package/data/examples/Components/panel/fixed.example.html +1 -1
  9. package/data/examples/Components/panel/sticky-header.example.html +1 -1
  10. package/data/examples/Components/panel/transparent.example.html +2 -2
  11. package/data/examples/Layouts/dynamic-page/large.example.html +156 -0
  12. package/data/examples/Layouts/dynamic-page/mobile-collapsed.example.html +1 -1
  13. package/data/examples/Layouts/dynamic-page/responsive-paddings.example.html +121 -0
  14. package/data/examples/Layouts/dynamic-page/summary-line.example.html +1 -1
  15. package/package.json +2 -1
package/data/CHANGELOG.md CHANGED
@@ -3,6 +3,32 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.41.8](https://github.com/SAP/fundamental-styles/compare/v0.41.8-rc.13...v0.41.8) (2026-07-06)
7
+
8
+ **Note:** Version bump only for package fundamental-styles
9
+
10
+ ## [0.41.8-rc.13](https://github.com/SAP/fundamental-styles/compare/v0.41.8-rc.12...v0.41.8-rc.13) (2026-07-06)
11
+
12
+ ### Bug Fixes
13
+
14
+ - **styles:** ACC-282.1 (Level AA) Section headers truncated at 320px viewport width ([#6350](https://github.com/SAP/fundamental-styles/issues/6350)) ([d821be0](https://github.com/SAP/fundamental-styles/commit/d821be01a72d868efaf18a7c03bd826ef63e8dc8))
15
+
16
+ ## [0.41.8-rc.12](https://github.com/SAP/fundamental-styles/compare/v0.41.8-rc.11...v0.41.8-rc.12) (2026-06-30)
17
+
18
+ ### Bug Fixes
19
+
20
+ - **styles:** replace outline with fake focus in Input Group [ci visual] ([#6347](https://github.com/SAP/fundamental-styles/issues/6347)) ([80ad171](https://github.com/SAP/fundamental-styles/commit/80ad1719a401d441cbf207ff58382a45071b255e))
21
+
22
+ ## [0.41.8-rc.11](https://github.com/SAP/fundamental-styles/compare/v0.41.8-rc.10...v0.41.8-rc.11) (2026-06-29)
23
+
24
+ **Note:** Version bump only for package fundamental-styles
25
+
26
+ ## [0.41.8-rc.10](https://github.com/SAP/fundamental-styles/compare/v0.41.8-rc.9...v0.41.8-rc.10) (2026-06-26)
27
+
28
+ ### Features
29
+
30
+ - **styles, docs:** update dynamic page styles and examples ([#6343](https://github.com/SAP/fundamental-styles/issues/6343)) ([ca7cfdb](https://github.com/SAP/fundamental-styles/commit/ca7cfdbb4c9d553a0a9acf6bd24db5a7422f6ead))
31
+
6
32
  ## [0.41.8-rc.9](https://github.com/SAP/fundamental-styles/compare/v0.41.8-rc.8...v0.41.8-rc.9) (2026-06-23)
7
33
 
8
34
  ### Features
@@ -6989,9 +7015,9 @@ Co-authored-by: droshev <mladen.droshev@sap.com>
6989
7015
 
6990
7016
  - added a new modifier class to fd-row to achieve even alignment of its elements:fd-row--top in a form.
6991
7017
  Before:
6992
- <div class="fd-row">
6993
- After:
6994
- <div class="fd-row fd-row--top">
7018
+ <div class="fd-row">
7019
+ After:
7020
+ <div class="fd-row fd-row--top">
6995
7021
 
6996
7022
  ### Bug Fixes
6997
7023
 
package/data/components/dynamic-page-dynamic-page.md CHANGED
@@ -239,7 +239,9 @@ npm install fundamental-styles
239
239
 
240
240
  | Class | Description |
241
241
  |-------|-------------|
242
+ | `fd-dynamic-page--lg` | Style variant |
242
243
  | `fd-dynamic-page--md` | Style variant |
244
+ | `fd-dynamic-page--responsive-paddings` | Style variant |
243
245
  | `fd-dynamic-page--sm` | Style variant |
244
246
  | `fd-dynamic-page--xl` | Optimized for desktop screens (L, XL, and XXL sizes) |
245
247
 
@@ -324,13 +326,13 @@ Key CSS variables used by this component:
324
326
  - `--fdButtonBackgroundColor`
325
327
  - `--fdDynamicPage_Button_Group_Background`
326
328
  - `--fdDynamicPage_Button_Left_Gradient`
327
- - `--fdDynamicPage_Button_Pin_Background`
328
329
  - `--fdDynamicPage_Button_Right_Gradient`
329
330
  - `--fdDynamicPage_Content_List_Background`
330
331
  - `--fdDynamicPage_Content_Transparent_Background`
331
332
  - `--fdDynamicPage_Hover_Border_Bottom`
332
333
  - `--fdDynamicPage_Subtitle_Color`
333
334
  - `--fdDynamicPage_Title_Collapsed_Font_Size`
335
+ - `--fdDynamicPage_Title_Color`
334
336
 
335
337
  *...and 5 more*
336
338
 
@@ -479,6 +481,163 @@ Optimized for desktop screens (L, XL, and XXL sizes). Apply the \
479
481
  </article>
480
482
  ```
481
483
 
484
+ ### Large
485
+
486
+ Optimized for large screens (L size, 1024–1439px). Apply the \
487
+
488
+ ```html
489
+ <article class="fd-dynamic-page fd-dynamic-page--lg" aria-roledescription="Dynamic Page">
490
+ <header class="fd-dynamic-page__header">
491
+ <span
492
+ role="button"
493
+ aria-expanded="true"
494
+ aria-labelledby="fd-dynamic-page-title-lg"
495
+ aria-label="Toggle header"
496
+ tabindex="0"
497
+ class="fd-dynamic-page__header-button">
498
+ </span>
499
+ <div class="fd-dynamic-page__title-area">
500
+ <div class="fd-dynamic-page__main-container">
501
+ <div class="fd-dynamic-page__breadcrumb-title-container">
502
+ <div class="fd-dynamic-page__breadcrumb-container">
503
+ <nav aria-label="Breadcrumbs">
504
+ <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb">
505
+ <li class="fd-breadcrumb__item">
506
+ <a class="fd-link" tabindex="0" href="#">
507
+ <span class="fd-link__content">Men</span>
508
+ </a>
509
+ <span class="fd-breadcrumb__separator" aria-hidden="true"></span>
510
+ </li>
511
+ <li class="fd-breadcrumb__item">
512
+ <a class="fd-link" tabindex="0" href="#">
513
+ <span class="fd-link__content">Shoes</span>
514
+ </a>
515
+ <span class="fd-breadcrumb__separator" aria-hidden="true"></span>
516
+ </li>
517
+ <li class="fd-breadcrumb__item">
518
+ <a aria-current="page" class="fd-link" tabindex="0" href="#">
519
+ <span class="fd-link__content">Running Shoes</span>
520
+ </a>
521
+ <span class="fd-breadcrumb__separator" aria-hidden="true"></span>
522
+ </li>
523
+ </ul>
524
+ </nav>
525
+ <div class="fd-dynamic-page__toolbar-container">
526
+ <div
527
+ role="toolbar"
528
+ aria-label="Product actions"
529
+ class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent"
530
+ >
531
+ <button class="fd-button fd-button--transparent" aria-label="Resize">
532
+ <i class="sap-icon--resize"></i>
533
+ </button>
534
+ <button class="fd-button fd-button--transparent" aria-label="Exit fullscreen">
535
+ <i class="sap-icon--exitfullscreen"></i>
536
+ </button>
537
+ <button class="fd-button fd-button--transparent" aria-label="Close">
538
+ <i class="sap-icon--decline"></i>
539
+ </button>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ <div class="fd-dynamic-page__title-container">
544
+ <div
545
+ id="fd-dynamic-page-title-lg"
546
+ aria-level="2"
547
+ role="heading"
548
+ class="fd-title fd-dynamic-page__title"
549
+ title="Balenciaga Triple S Trainers">
550
+ Balenciaga Triple S Trainers
551
+ </div>
552
+ <div class="fd-dynamic-page__title-content" title="Some RANDOM things">
553
+ Some RANDOM things
554
+ </div>
555
+ <div class="fd-dynamic-page__toolbar-container">
556
+ <div
557
+ role="toolbar"
558
+ aria-label="Navigation actions"
559
+ class="fd-dynamic-page__toolbar fd-dynamic-page__toolbar--actions fd-toolbar fd-toolbar--clear fd-toolbar--transparent"
560
+ >
561
+ <button class="fd-button fd-button--positive">Accept</button>
562
+ <button class="fd-button fd-button--reject">Reject</button>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ <div class="fd-dynamic-page__subtitle"> Oversized multimaterial sneakers with quilted effect</div>
567
+ <div class="fd-dynamic-page__collapsible-header-container">
568
+ <section class="fd-dynamic-page__collapsible-header" role="region" aria-hidden="false" id="fddplhvc-lg" aria-label="Expanded header">
569
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis, delectus
570
+ necessitatibus incidunt numquam asperiores tenetur iure. Cum consequuntur impedit repellendus esse, facere autem optio
571
+ consequatur nobis?
572
+ </section>
573
+ <div class="fd-dynamic-page__collapsible-header-visibility-container">
574
+
575
+ <div
576
+ role="toolbar"
577
+ aria-label="Header actions"
578
+ class="fd-dynamic-page__collapsible-header-visibility-container--button-group"
579
+ >
580
+ <button
581
+ class="fd-dynamic-page__collapse-button fd-button"
582
+ aria-label="See More"
583
+ aria-expanded="true"
584
+ aria-haspopup="true"
585
+ aria-controls="fddplhvc-lg"
586
+ >
587
+ <i class="sap-icon--slim-arrow-up"></i>
588
+ </button>
589
+ <button class="fd-dynamic-page__pin-button fd-button" aria-label="Pin this">
590
+ <i class="sap-icon--pushpin-off"></i>
591
+ </button>
592
+ </div>
593
+
594
+ </div>
595
+ <div class="fd-dynamic-page__tabs--overflow">
596
+ <ul class="fd-tabs fd-tabs--l fd-dynamic-page__tabs fd-dynamic-page__tabs--add-shadow" role="tablist">
597
+ <li role="tab" class="fd-tabs__item" aria-controls="fuCwV-lg1">
598
+ <a class="fd-tabs__link" href="#fuCwV-lg1">
599
+ <span class="fd-tabs__tag">Link</span>
600
+ </a>
601
+ </li>
602
+ <li role="tab" class="fd-tabs__item" aria-selected="true" aria-controls="AiWfz-lg2">
603
+ <a class="fd-tabs__link" href="#AiWfz-lg2">
604
+ <span class="fd-tabs__tag">Selected</span>
605
+ </a>
606
+ </li>
607
+ </ul>
608
+ </div>
609
+ </header>
610
+ <div class="fd-dynamic-page__content">
611
+ <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV-lg1" role="tabpanel">
612
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid
613
+ dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet? Lorem ipsum dolor, sit
614
+ amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam eum tempore aliquid dolorem cumque ullam
615
+ perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
616
+ </div>
617
+ <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz-lg2" role="tabpanel">
618
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in
619
+ atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit. Dolor sit Lorem ipsum dolor sit amet,
620
+ consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti in atque quis, sed cum asperiores minus
621
+ rerum incidunt unde quod fuga amet ea reprehenderit.
622
+ </div>
623
+ </div>
624
+ <footer class="fd-bar fd-bar--floating-footer">
625
+ <div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
626
+ <div class="fd-bar__element">
627
+ <button aria-label="button" class="fd-button fd-button--emphasized">
628
+ Save
629
+ </button>
630
+ </div>
631
+ <div class="fd-bar__element">
632
+ <button aria-label="button" class="fd-button fd-button--transparent">
633
+ Cancel
634
+ </button>
635
+ </div>
636
+ </div>
637
+ </footer>
638
+ </article>
639
+ ```
640
+
482
641
  ### Tablet
483
642
 
484
643
  Optimized for tablet screens (M size). Apply the \
@@ -815,6 +974,131 @@ Optimized for mobile screens (S size). Apply the \
815
974
  </article>
816
975
  ```
817
976
 
977
+ ### ResponsivePaddings
978
+
979
+ When the page needs to adapt its inline padding automatically based on the viewport width, use the \
980
+
981
+ ```html
982
+ <article class="fd-dynamic-page fd-dynamic-page--responsive-paddings" aria-roledescription="Dynamic Page">
983
+ <header class="fd-dynamic-page__header">
984
+ <span
985
+ role="button"
986
+ aria-expanded="true"
987
+ aria-labelledby="fd-dynamic-page-title-rp"
988
+ aria-label="Toggle header"
989
+ tabindex="0"
990
+ class="fd-dynamic-page__header-button">
991
+ </span>
992
+ <div class="fd-dynamic-page__title-area">
993
+ <div class="fd-dynamic-page__main-container">
994
+ <div class="fd-dynamic-page__breadcrumb-title-container">
995
+ <nav aria-label="Breadcrumbs">
996
+ <ul class="fd-dynamic-page__breadcrumb fd-breadcrumb">
997
+ <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>
998
+ <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>
999
+ <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>
1000
+ </ul>
1001
+ </nav>
1002
+ <div class="fd-dynamic-page__title-container">
1003
+ <div
1004
+ id="fd-dynamic-page-title-rp"
1005
+ aria-level="2"
1006
+ role="heading"
1007
+ class="fd-title fd-dynamic-page__title"
1008
+ title="Balenciaga Triple S Trainers">
1009
+ Balenciaga Triple S Trainers
1010
+ </div>
1011
+ <div class="fd-dynamic-page__title-content" title="Some RANDOM things"> Some RANDOM things </div>
1012
+ <div class="fd-dynamic-page__toolbar-container">
1013
+ <div role="toolbar" aria-label="Product actions" class="fd-dynamic-page__toolbar fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1014
+ <button class="fd-button fd-button--positive">Accept</button>
1015
+ <button class="fd-button fd-button--reject">Reject</button>
1016
+ <span class="fd-toolbar__separator"></span>
1017
+ </div>
1018
+ <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">
1019
+ <button class="fd-button fd-button--transparent" aria-label="Resize">
1020
+ <i class="sap-icon--resize"></i>
1021
+ </button>
1022
+ <button class="fd-button fd-button--transparent" aria-label="Exit fullscreen">
1023
+ <i class="sap-icon--exitfullscreen"></i>
1024
+ </button>
1025
+ <button class="fd-button fd-button--transparent" aria-label="Close">
1026
+ <i class="sap-icon--decline"></i>
1027
+ </button>
1028
+ </div>
1029
+ </div>
1030
+ </div>
1031
+ </div>
1032
+ </div>
1033
+ <div class="fd-dynamic-page__subtitle"> Oversized multimaterial sneakers with quilted effect </div>
1034
+ <div class="fd-dynamic-page__collapsible-header-container">
1035
+ <section class="fd-dynamic-page__collapsible-header" role="region" id="fddplhvc-rp" aria-label="Expanded header">
1036
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam possimus corrupti architecto perspiciatis,
1037
+ delectus necessitatibus incidunt numquam asperiores tenetur iure.
1038
+ Cum consequuntur impedit repellendus esse, facere autem optio consequatur nobis?
1039
+ </section>
1040
+ <div class="fd-dynamic-page__collapsible-header-visibility-container fd-dynamic-page__collapsible-header-visibility-container--no-shadow">
1041
+
1042
+ <div role="toolbar" aria-label="Header actions" class="fd-dynamic-page__collapsible-header-visibility-container--button-group">
1043
+ <button class="fd-dynamic-page__collapse-button fd-button"
1044
+ aria-label="See More"
1045
+ aria-expanded="true"
1046
+ aria-haspopup="true"
1047
+ aria-controls="fddplhvc-rp">
1048
+ <i class="sap-icon--slim-arrow-up"></i>
1049
+ </button>
1050
+ <button class="fd-dynamic-page__pin-button fd-button"
1051
+ aria-label="Pin this">
1052
+ <i class="sap-icon--pushpin-off"></i>
1053
+ </button>
1054
+ </div>
1055
+
1056
+ </div>
1057
+ </div>
1058
+ <div class="fd-dynamic-page__tabs--overflow">
1059
+ <ul class="fd-tabs fd-tabs--l fd-dynamic-page__tabs fd-dynamic-page__tabs--add-shadow" role="tablist">
1060
+ <li role="tab" class="fd-tabs__item">
1061
+ <a class="fd-tabs__link" aria-controls="fuCwV550rp" href="#fuCwV550rp">
1062
+ <span class="fd-tabs__tag">
1063
+ Link
1064
+ </span>
1065
+ </a>
1066
+ </li>
1067
+ <li role="tab" class="fd-tabs__item" aria-selected="true">
1068
+ <a class="fd-tabs__link" aria-controls="AiWfz165rp" href="#AiWfz165rp">
1069
+ <span class="fd-tabs__tag">
1070
+ Selected
1071
+ </span>
1072
+ </a>
1073
+ </li>
1074
+ </ul>
1075
+ </div>
1076
+ </header>
1077
+ <div class="fd-dynamic-page__content">
1078
+ <div class="fd-tabs__panel" aria-expanded="false" id="fuCwV550rp" role="tabpanel">
1079
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo voluptatem, unde voluptate aliquam
1080
+ eum tempore aliquid dolorem cumque ullam perspiciatis omnis et asperiores dolores, consequatur, suscipit sint animi amet?
1081
+ </div>
1082
+ <div class="fd-tabs__panel" aria-expanded="true" id="AiWfz165rp" role="tabpanel">
1083
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1084
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1085
+ Dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius assumenda, quidem natus optio repudiandae deleniti
1086
+ in atque quis, sed cum asperiores minus rerum incidunt unde quod fuga amet ea reprehenderit.
1087
+ </div>
1088
+ </div>
1089
+ <footer class="fd-bar fd-bar--floating-footer">
1090
+ <div role="toolbar" aria-label="Finalizing actions" class="fd-bar__right">
1091
+ <div class="fd-bar__element">
1092
+ <button aria-label="button" class="fd-button fd-button--emphasized">Save</button>
1093
+ </div>
1094
+ <div class="fd-bar__element">
1095
+ <button aria-label="button" class="fd-button fd-button--transparent">Cancel</button>
1096
+ </div>
1097
+ </div>
1098
+ </footer>
1099
+ </article>
1100
+ ```
1101
+
818
1102
  ### Collapsed Header (mobile)
819
1103
 
820
1104
  Displays the dynamic page with a collapsed header on mobile screens.
@@ -831,7 +1115,7 @@ Displays the dynamic page with a collapsed header on mobile screens.
831
1115
  tabindex="0"
832
1116
  class="fd-dynamic-page__header-button">
833
1117
  </span>
834
- <div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed">
1118
+ <div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed">
835
1119
  <div class="fd-dynamic-page__main-container">
836
1120
  <div class="fd-dynamic-page__breadcrumb-title-container">
837
1121
  <div class="fd-dynamic-page__breadcrumb-container">
@@ -1002,7 +1286,7 @@ On mobile, a summary line can replace the expand/collapse header to help users f
1002
1286
  <button class="fd-button fd-button--transparent" aria-label="Expand">
1003
1287
  <i class="sap-icon--slim-arrow-down"></i>
1004
1288
  </button>
1005
- <div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed"
1289
+ <div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed"
1006
1290
  aria-hidden="true">
1007
1291
  <div class="fd-dynamic-page__breadcrumb-title-container">
1008
1292
  <nav aria-label="Breadcrumbs">
package/data/components/dynamic-page.md CHANGED
@@ -232,13 +232,13 @@ Key CSS variables used by this component:
232
232
  - `--fdButtonBackgroundColor`
233
233
  - `--fdDynamicPage_Button_Group_Background`
234
234
  - `--fdDynamicPage_Button_Left_Gradient`
235
- - `--fdDynamicPage_Button_Pin_Background`
236
235
  - `--fdDynamicPage_Button_Right_Gradient`
237
236
  - `--fdDynamicPage_Content_List_Background`
238
237
  - `--fdDynamicPage_Content_Transparent_Background`
239
238
  - `--fdDynamicPage_Hover_Border_Bottom`
240
239
  - `--fdDynamicPage_Subtitle_Color`
241
240
  - `--fdDynamicPage_Title_Collapsed_Font_Size`
241
+ - `--fdDynamicPage_Title_Color`
242
242
 
243
243
  *...and 5 more*
244
244
 
package/data/components/panel.md CHANGED
@@ -31,6 +31,9 @@ The panel is a container for grouping and displaying information. Panels are res
31
31
  ##Types
32
32
  There are two types of panels: fixed and expandable.
33
33
 
34
+ ##Title wrapping
35
+ By default, the panel title truncates with an ellipsis when it exceeds the available width. To allow the title to wrap onto multiple lines instead — for example, to comply with WCAG 1.4.10 (Reflow) at narrow viewports — add the \
36
+
34
37
  ## Usage Guidelines
35
38
 
36
39
  **Use the panel if:**
@@ -79,7 +82,7 @@ npm install fundamental-styles
79
82
  ```html
80
83
  <div class="fd-panel" aria-labelledby="__panel-title-6" role="form">
81
84
  <div class="fd-panel__header">
82
- <h4 class="fd-panel__title" id="__panel-title-6">Panel header</h4>
85
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-6">Panel header with a long title that reflows at narrow viewports (320px)</h4>
83
86
  <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
84
87
  <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
85
88
  <div class="fd-segmented-button" role="group" aria-label="Group label">
@@ -120,6 +123,7 @@ This component uses the following BEM elements:
120
123
  - `fd-panel__expand`
121
124
  - `fd-panel__header`
122
125
  - `fd-panel__title`
126
+ - `fd-panel__title--wrap`
123
127
 
124
128
  ## Related Components
125
129
 
@@ -160,7 +164,7 @@ Key CSS variables used by this component:
160
164
  ```html
161
165
  <div class="fd-panel" aria-labelledby="__panel-title-6" role="form">
162
166
  <div class="fd-panel__header">
163
- <h4 class="fd-panel__title" id="__panel-title-6">Panel header</h4>
167
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-6">Panel header with a long title that reflows at narrow viewports (320px)</h4>
164
168
  <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
165
169
  <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
166
170
  <div class="fd-segmented-button" role="group" aria-label="Group label">
@@ -195,7 +199,7 @@ Expandable panels are much like fixed panels, except their content can be expand
195
199
  <i class="sap-icon--slim-arrow-right"></i>
196
200
  </button>
197
201
  </div>
198
- <h4 class="fd-panel__title" id="__panel-title-7">Panel header collapsed</h4>
202
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-7">Panel header collapsed</h4>
199
203
  <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
200
204
  <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
201
205
  <div class="fd-segmented-button" role="group" aria-label="Group label">
@@ -226,7 +230,7 @@ Expandable panels are much like fixed panels, except their content can be expand
226
230
  <i class="sap-icon--slim-arrow-down"></i>
227
231
  </button>
228
232
  </div>
229
- <h4 class="fd-panel__title" id="__panel-title-8">Panel header expanded</h4>
233
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-8">Panel header expanded</h4>
230
234
  </div>
231
235
  <div role="region" aria-labelledby="__panel-title-8" class="fd-panel__content" aria-hidden="false" id="__panel-8">
232
236
  <span>
@@ -255,7 +259,7 @@ When the height of the panel's content is set to a fixed size, the content area
255
259
  <i class="sap-icon--slim-arrow-down"></i>
256
260
  </button>
257
261
  </div>
258
- <h4 class="fd-panel__title" id="__panel-title-fixed">Panel header expanded</h4>
262
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-fixed">Panel header expanded</h4>
259
263
  </div>
260
264
  <div role="region" aria-labelledby="__panel-title-fixed" class="fd-panel__content" aria-hidden="false" id="__panel-fixed">
261
265
  <span>
@@ -290,7 +294,7 @@ Panel may have a border or not. For Panel without border use the \
290
294
  <i class="sap-icon--slim-arrow-right"></i>
291
295
  </button>
292
296
  </div>
293
- <h4 class="fd-panel__title" id="__panel-title-1">Panel header collapsed</h4>
297
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-1">Panel header collapsed</h4>
294
298
  <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
295
299
  <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
296
300
  <div class="fd-segmented-button" role="group" aria-label="Group label">
@@ -321,7 +325,7 @@ Panel may have a border or not. For Panel without border use the \
321
325
  <i class="sap-icon--slim-arrow-down"></i>
322
326
  </button>
323
327
  </div>
324
- <h4 class="fd-panel__title" id="__panel-title-2">Panel header expanded</h4>
328
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-2">Panel header expanded</h4>
325
329
  </div>
326
330
  <div role="region" aria-labelledby="__panel-title-2" class="fd-panel__content" aria-hidden="false" id="__panel-2">
327
331
  <span>
@@ -338,7 +342,7 @@ Panel may have a border or not. For Panel without border use the \
338
342
 
339
343
  <div class="fd-panel fd-panel--fixed fd-panel--borderless" aria-labelledby="__panel-title-3" role="form">
340
344
  <div class="fd-panel__header">
341
- <h4 class="fd-panel__title" id="__panel-title-3">Panel header</h4>
345
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-3">Panel header</h4>
342
346
  <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
343
347
  <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
344
348
  <div class="fd-segmented-button" role="group" aria-label="Group label">
@@ -373,7 +377,7 @@ The background of the content can be set to transparent by applying the \
373
377
  <i class="sap-icon--slim-arrow-down"></i>
374
378
  </button>
375
379
  </div>
376
- <h4 class="fd-panel__title" id="__panel-title-4">Panel header expanded</h4>
380
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-4">Panel header expanded</h4>
377
381
  </div>
378
382
  <div role="region" aria-labelledby="__panel-title-4" class="fd-panel__content" aria-hidden="false" id="__panel-4">
379
383
  <span>
@@ -390,7 +394,7 @@ The background of the content can be set to transparent by applying the \
390
394
 
391
395
  <div class="fd-panel fd-panel--transparent" aria-labelledby="__panel-title-5" role="form">
392
396
  <div class="fd-panel__header">
393
- <h4 class="fd-panel__title" id="__panel-title-5">Panel header</h4>
397
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-5">Panel header</h4>
394
398
  <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
395
399
  <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
396
400
  <div class="fd-segmented-button" role="group" aria-label="Group label">
@@ -424,7 +428,7 @@ Sticky header can be achieved by applying the \
424
428
  aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-sticky">
425
429
  <i class="sap-icon--slim-arrow-down"></i>
426
430
  </button>
427
- <h4 class="fd-panel__title" id="__panel-title-sticky">Panel sticky header</h4>
431
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-sticky">Panel sticky header</h4>
428
432
  </div>
429
433
  <div role="region" aria-labelledby="__panel-title-sticky" class="fd-panel__content" aria-hidden="false" id="__panel-sticky">
430
434
  <span>
package/data/examples/Components/panel/borderless.example.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <i class="sap-icon--slim-arrow-right"></i>
7
7
  </button>
8
8
  </div>
9
- <h4 class="fd-panel__title" id="__panel-title-1">Panel header collapsed</h4>
9
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-1">Panel header collapsed</h4>
10
10
  <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
11
11
  <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
12
12
  <div class="fd-segmented-button" role="group" aria-label="Group label">
@@ -39,7 +39,7 @@
39
39
  <i class="sap-icon--slim-arrow-down"></i>
40
40
  </button>
41
41
  </div>
42
- <h4 class="fd-panel__title" id="__panel-title-2">Panel header expanded</h4>
42
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-2">Panel header expanded</h4>
43
43
  </div>
44
44
  <div role="region" aria-labelledby="__panel-title-2" class="fd-panel__content" aria-hidden="false" id="__panel-2">
45
45
  <span>
@@ -58,7 +58,7 @@
58
58
 
59
59
  <div class="fd-panel fd-panel--fixed fd-panel--borderless" aria-labelledby="__panel-title-3" role="form">
60
60
  <div class="fd-panel__header">
61
- <h4 class="fd-panel__title" id="__panel-title-3">Panel header</h4>
61
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-3">Panel header</h4>
62
62
  <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
63
63
  <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"></span>
64
64
  <div class="fd-segmented-button" role="group" aria-label="Group label">
package/data/examples/Components/panel/expandable.example.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <i class="sap-icon--slim-arrow-right"></i>
7
7
  </button>
8
8
  </div>
9
- <h4 class="fd-panel__title" id="__panel-title-7">Panel header collapsed</h4>
9
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-7">Panel header collapsed</h4>
10
10
  <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
11
11
  <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
12
12
  <div class="fd-segmented-button" role="group" aria-label="Group label">
@@ -37,7 +37,7 @@
37
37
  <i class="sap-icon--slim-arrow-down"></i>
38
38
  </button>
39
39
  </div>
40
- <h4 class="fd-panel__title" id="__panel-title-8">Panel header expanded</h4>
40
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-8">Panel header expanded</h4>
41
41
  </div>
42
42
  <div role="region" aria-labelledby="__panel-title-8" class="fd-panel__content" aria-hidden="false" id="__panel-8">
43
43
  <span>
package/data/examples/Components/panel/fixed-height-content.example.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <i class="sap-icon--slim-arrow-down"></i>
7
7
  </button>
8
8
  </div>
9
- <h4 class="fd-panel__title" id="__panel-title-fixed">Panel header expanded</h4>
9
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-fixed">Panel header expanded</h4>
10
10
  </div>
11
11
  <div role="region" aria-labelledby="__panel-title-fixed" class="fd-panel__content" aria-hidden="false" id="__panel-fixed" style="height: 150px;">
12
12
  <span>
package/data/examples/Components/panel/fixed.example.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <div class="fd-panel" aria-labelledby="__panel-title-6" role="form">
2
2
  <div class="fd-panel__header">
3
- <h4 class="fd-panel__title" id="__panel-title-6">Panel header</h4>
3
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-6">Panel header with a long title that reflows at narrow viewports (320px)</h4>
4
4
  <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
5
5
  <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
6
6
  <div class="fd-segmented-button" role="group" aria-label="Group label">
package/data/examples/Components/panel/sticky-header.example.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <i class="sap-icon--slim-arrow-down"></i>
8
8
  </button>
9
9
  </div>
10
- <h4 class="fd-panel__title" id="__panel-title-sticky">Panel sticky header</h4>
10
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-sticky">Panel sticky header</h4>
11
11
  </div>
12
12
  <div role="region" aria-labelledby="__panel-title-sticky" class="fd-panel__content" aria-hidden="false" id="__panel-sticky">
13
13
  <span>
package/data/examples/Components/panel/transparent.example.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <i class="sap-icon--slim-arrow-down"></i>
7
7
  </button>
8
8
  </div>
9
- <h4 class="fd-panel__title" id="__panel-title-4">Panel header expanded</h4>
9
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-4">Panel header expanded</h4>
10
10
  </div>
11
11
  <div role="region" aria-labelledby="__panel-title-4" class="fd-panel__content" aria-hidden="false" id="__panel-4">
12
12
  <span>
@@ -25,7 +25,7 @@
25
25
 
26
26
  <div class="fd-panel fd-panel--transparent" aria-labelledby="__panel-title-5" role="form">
27
27
  <div class="fd-panel__header">
28
- <h4 class="fd-panel__title" id="__panel-title-5">Panel header</h4>
28
+ <h4 class="fd-panel__title fd-panel__title--wrap" id="__panel-title-5">Panel header</h4>
29
29
  <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
30
30
  <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
31
31
  <div class="fd-segmented-button" role="group" aria-label="Group label">
package/data/examples/Layouts/dynamic-page/large.example.html ADDED
@@ -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 />
package/data/examples/Layouts/dynamic-page/mobile-collapsed.example.html CHANGED
@@ -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 fd-dynamic-page__title-area--collapsed">
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">
package/data/examples/Layouts/dynamic-page/responsive-paddings.example.html ADDED
@@ -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 />
package/data/examples/Layouts/dynamic-page/summary-line.example.html CHANGED
@@ -18,7 +18,7 @@
18
18
  </button>
19
19
  </div>
20
20
  </div>
21
- <div class="fd-dynamic-page__title-area fd-dynamic-page__title-area--collapsed"
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-rc.9",
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": {