feat(ui5-panel): expose header-wrapper part (#13571)

a 'header-wrapper' part is added to allow apps to style the
outermost header wrapper, useful for adjusting sticky header position.

Related to: #13392

Author: ndeshev

packages/main/src/Panel.ts

@@ -76,7 +76,8 @@ import panelCss from "./generated/themes/Panel.css.js";
  * @extends UI5Element
  * @public
  * @slot {Array<Node>} default - Defines the content of the component. The content is visible only when the component is expanded.
- * @csspart header - Used to style the wrapper of the header.
+ * @csspart header-wrapper - Used to style the outermost header wrapper, useful for adjusting sticky header position.
+ * @csspart header - Used to style the header.
  * @csspart content - Used to style the wrapper of the content.
  */
 @customElement({

packages/main/src/PanelTemplate.tsx

@@ -21,6 +21,7 @@ export default function PanelTemplate(this: Panel) {
 					}}
 					role={this.headingWrapperRole}
 					aria-level={this.headingWrapperAriaLevel}
+					part="header-wrapper"
 				>
 					<div
 						onClick={this._headerClick}

packages/main/test/pages/Panel.html

@@ -175,6 +175,40 @@
 		</ui5-label>
 	</ui5-panel>
 
+	<br>
+
+	<section>
+		<ui5-title>Sticky Header with Custom Top Offset Demo</ui5-title>
+		<p>The container below has a fixed toolbar at the top. The panel's sticky header uses <code>::part(header-wrapper) { top: 50px }</code> to stick below the toolbar.</p>
+
+		<div id="sticky-demo-container">
+			<div id="sticky-demo-toolbar">Fixed Toolbar (50px)</div>
+			<div id="sticky-demo-scroll-area">
+				<ui5-panel id="panel-stickyHeader-customTop" fixed sticky-header header-text="Sticky header with custom top (50px)">
+					<ui5-label wrapping-type="Normal">
+						<span>
+							Scroll this container to see the sticky header stick at 50px from the top (below the toolbar).
+							Lorem ipsum dolor sit amet, tamquam invidunt cu sed, unum regione mel ea, quo ea alia novum. Ne qui illud zril
+							nostrum, vel ea sint dicant postea. Vel ne facete tritani, neglegentur concludaturque sed te. His animal dolorum ut.
+							Aeterno appareat ei mei, cu sed elit scripserit, an quodsi oportere accusamus quo. Pri ea probo corpora rationibus,
+							soluta incorrupte ex his.
+							Mei ei brute cetero, id duo magna aeque torquatos. Quodsi erroribus mediocritatem his ut, ad pri legere iracundia
+							democritum. Menandri intellegam in mea, ex vero movet qualisque sed. Maiorum verterem perfecto nec ea, est velit
+							elaboraret consequuntur eu, eam ad reque postea admodum. Ne inimicus convenire pri, doctus vidisse te ius.
+							Percipitur contentiones in vis, cu vim propriae phaedrum. Has ad magna errem honestatis, duo vero graeco epicurei
+							no, populo semper sit ne. Vulputate dissentiunt interpretaris ea vis, nec civibus moderatius at. Cu vim stet
+							dissentias, no vidit saperet indoctum nec, et pro magna prima nobis. Vis consul feugiat qualisque in, regione
+							persecuti cotidieque id eos, id ius omnesque vituperata.
+							Pri ex impedit percipit consulatu. Ius iudico feugiat instructior an. Iusto putant eum eu, ubique splendide pri ad,
+							cu qui salutandi assentior percipitur. At esse ceteros salutandi ius. Te dicam reprehendunt nec, ea discere ponderum
+							sensibus duo. Vis cu commodo definiebas, postea dissentias ne vim. Modo homero eos ad. Ut vix equidem temporibus.
+						</span>
+					</ui5-label>
+				</ui5-panel>
+			</div>
+		</div>
+	</section>
+
 	<br>
 	<ui5-panel id="panel1" collapsed header-text="Click to expand!" header-level="H3" accessible-role="Form">
 

packages/main/test/pages/styles/Panel.css

@@ -14,4 +14,35 @@
 
 #panel-expandable::part(header) {
     color: green;
+}
+
+#sticky-demo-container {
+    position: relative;
+    height: 300px;
+    border: 1px solid #ccc;
+}
+
+#sticky-demo-toolbar {
+    position: sticky;
+    top: 0;
+    height: 50px;
+    background: #0854a0;
+    color: white;
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
+    z-index: 2;
+}
+
+#sticky-demo-scroll-area {
+    height: 250px;
+    overflow: auto;
+}
+
+#panel-stickyHeader-customTop::part(header-wrapper) {
+    top: 50px;
+}
+
+#panel-stickyHeader-customTop::part(content) {
+    padding-top: 50px;
 }