@ui5/webcomponents-fiori 2.25.3 → 2.25.5

package/dist/DynamicPage.d.ts

@@ -199,6 +199,7 @@ declare class DynamicPage extends UI5Element {
     get _footerRole(): DynamicPageFooterRoles | undefined;
     get _footerAriaLabel(): string | undefined;
     get _hidePinButton(): boolean;
+    get _actionsBarStickyTop(): number;
     /**
      * Defines if the header is snapped.
      *

package/dist/DynamicPage.js

@@ -224,6 +224,11 @@ let DynamicPage = DynamicPage_1 = class DynamicPage extends UI5Element {
     get _hidePinButton() {
         return this.hidePinButton || isPhone();
     }
+    get _actionsBarStickyTop() {
+        const titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0;
+        const headerHeight = this.headerInTitle ? (this.dynamicPageHeader?.getBoundingClientRect().height || 0) : 0;
+        return titleHeight + headerHeight;
+    }
     /**
      * Defines if the header is snapped.
      *

package/dist/DynamicPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicPage.js","sourceRoot":"","sources":["../src/DynamicPage.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport announce from \"@ui5/webcomponents-base/dist/util/InvisibleMessage.js\";\nimport InvisibleMessageMode from \"@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { AriaLandmarkRole } from \"@ui5/webcomponents-base\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\n\n// Template\nimport DynamicPageTemplate from \"./DynamicPageTemplate.js\";\n\n// Styles\nimport DynamicPageCss from \"./generated/themes/DynamicPage.css.js\";\n\nimport DynamicPageHeader from \"./DynamicPageHeader.js\";\nimport DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport type DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\ntype DynamicPageHeaderRoles = Extract<AriaLandmarkRole, \"none\" | \"banner\" | \"region\">;\ntype DynamicPageContentRoles = Extract<AriaLandmarkRole, \"none\" | \"main\" | \"region\" | \"form\">;\ntype DynamicPageFooterRoles = Extract<AriaLandmarkRole, \"none\" | \"contentinfo\" | \"region\">;\ntype DynamicPageRootRoles = Extract<AriaLandmarkRole, \"none\" | \"main\" | \"region\">;\ntype DynamicPageAccessibilityAttributes = {\n\troot?: {\n\t\trole?: DynamicPageRootRoles,\n\t\tname?: string,\n\t},\n\theader?: {\n\t\trole?: DynamicPageHeaderRoles,\n\t\tname?: string,\n\t},\n\tcontent?: {\n\t\trole?: DynamicPageContentRoles,\n\t\tname?: string,\n\t},\n\tfooter?: {\n\t\trole?: DynamicPageFooterRoles,\n\t\tname?: string,\n\t},\n};\n\nconst SCROLL_DEBOUNCE_RATE = 5; // ms\nconst SCROLL_THRESHOLD = 10; // px\n/**\n * @class\n *\n * ### Overview\n *\n * A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n *\n * The component consist of several components:\n *\n * - `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n * - `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n * - `Content area` - a generic container, which can have a single UI5 layout.\n * - `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n *\n * ### Usage\n *\n * Use the `DynamicPage` if you need to have a title, that is always visible\n * and a header, that has configurable Expanding/Snapping functionality.\n * If you don't need the Expanding/Snapping functionality it is better to use the\n * `ui5-page` as a lighter component.\n *\n * The app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\n * or content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\n * scroll through the content.\n *\n * ## Notes:\n *\n * - Snapping of the `DynamicPageTitle` is not supported in the following case:\n *  - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n *\n * ### Responsive Behavior\n *\n * Dynamic page web component implements the responsive paddings design.\n *\n * ### Keyboard Handling\n *\n *\n * ### Basic Navigation\n *\n * - [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\n * If focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\n * If focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n *\n * ### Fast Navigation\n * - This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.\n * In order to use this functionality, you need to import the following module:\n *\n * - `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @csspart content - Used to style the content of the component\n * @csspart fit-content - Used to style the fit content container of the component.\n * @csspart footer - Used to style the footer of the component\n */\n@customElement({\n\ttag: \"ui5-dynamic-page\",\n\trenderer: jsxRenderer,\n\tstyles: DynamicPageCss,\n\ttemplate: DynamicPageTemplate,\n})\n\n/**\n * Fired when the pin header button is toggled.\n *\n * @public\n */\n@event(\"pin-button-toggle\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the expand/collapse area of the title is toggled.\n *\n * @public\n */\n@event(\"title-toggle\", {\n\tbubbles: true,\n})\n\nclass DynamicPage extends UI5Element {\n\teventDetails!: {\n\t\t\"pin-button-toggle\": void;\n\t\t\"title-toggle\": void;\n\t}\n\t/**\n\t * Defines if the pin button is hidden.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thidePinButton = false;\n\n\t/**\n\t * Defines if the header is pinned.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\theaderPinned = false;\n\n\t/**\n\t * Defines if the footer is shown.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowFooter = false;\n\n\t/**\n\t * Defines the content of the Dynamic Page.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: DefaultSlot<HTMLElement>;\n\n\t/**\n\t * Defines the title HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageTitle })\n\ttitleArea!: Slot<DynamicPageTitle>;\n\n\t/**\n\t * Defines the header HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageHeader })\n\theaderArea!: Slot<DynamicPageHeader>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tfooterArea!: Slot<HTMLElement>;\n\n\t/**\n\t* Defines additional accessibility attributes on different areas of the component.\n\t*\n\t* The accessibilityAttributes object has the following fields,\n\t* where each field is an object supporting one or more accessibility attributes:\n\t*\n\t*  - **root**: `root.role` and `root.name`.\n\t*  - **header**: `header.role` and `header.name`.\n\t*  - **content**: `content.role` and `content.name`.\n\t*  - **footer**: `footer.role` and `footer.name`.\n\t*\n\t* The accessibility attributes support the following values:\n\t*\n\t* - **role**: Defines the accessible ARIA landmark role of the area.\n\t* Accepts the following values per section:\n\t* `root` — `none`, `main`, `region`;\n\t* `header` — `none`, `banner`, `region`;\n\t* `content` — `none`, `main`, `region`, `form`;\n\t* `footer` — `none`, `contentinfo`, `region`.\n\t*\n\t* - **name**: Defines the accessible ARIA name of the area.\n\t* Accepts any string.\n\t*\n\t* @default {}\n\t* @public\n\t* @since 2.24.0\n\t*/\n\t@property({ type: Object })\n\taccessibilityAttributes: DynamicPageAccessibilityAttributes = {};\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tskipSnapOnScroll = false;\n\tshowHeaderInStickArea = false;\n\tisToggled = false;\n\n\t@property({ type: Boolean })\n\t_headerSnapped = false;\n\n\t@query(\".ui5-dynamic-page-scroll-container\")\n\tscrollContainer?: HTMLElement;\n\n\t@query(\"[ui5-dynamic-page-header-actions]\")\n\theaderActions?: DynamicPageHeaderActions;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this.dynamicPageTitle) {\n\t\t\tthis.dynamicPageTitle.snapped = this._headerSnapped;\n\t\t\tthis.dynamicPageTitle.interactive = this.hasHeading;\n\t\t\tthis.dynamicPageTitle.hasSnappedTitleOnMobile = !!this.hasSnappedTitleOnMobile;\n\t\t\tthis.dynamicPageTitle.removeAttribute(\"hovered\");\n\t\t}\n\t\tif (this.dynamicPageHeader) {\n\t\t\tthis.dynamicPageHeader._snapped = this._headerSnapped;\n\t\t}\n\t}\n\n\tget endAreaHeight() {\n\t\treturn this.showFooter ? this.footerWrapper?.getBoundingClientRect().height || 0 : 0;\n\t}\n\n\tget scrollPaddingTop() {\n\t\tconst titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0;\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\n\t\tif (this._headerSnapped) {\n\t\t\treturn titleHeight;\n\t\t}\n\n\t\tconst fullHeight = headerHeight + titleHeight;\n\t\tconst scrollTop = this.scrollContainer?.scrollTop || 0;\n\n\t\treturn Math.max(titleHeight, fullHeight - scrollTop);\n\t}\n\n\tget dynamicPageTitle(): DynamicPageTitle | null {\n\t\treturn this.querySelector<DynamicPageTitle>(\"[ui5-dynamic-page-title]\");\n\t}\n\n\tget dynamicPageHeader(): DynamicPageHeader | null {\n\t\treturn this.querySelector<DynamicPageHeader>(\"[ui5-dynamic-page-header]\");\n\t}\n\n\tget footerWrapper() {\n\t\treturn this.shadowRoot?.querySelector(\".ui5-dynamic-page-footer\");\n\t}\n\n\tget actionsInTitle(): boolean {\n\t\treturn this._headerSnapped || this.showHeaderInStickArea || this.headerPinned;\n\t}\n\n\tget headerInTitle(): boolean {\n\t\treturn !this._headerSnapped && (this.showHeaderInStickArea || this.headerPinned);\n\t}\n\n\tget headerInContent(): boolean {\n\t\treturn !this.showHeaderInStickArea && !this.headerInTitle && !this.hasSnappedTitleOnMobile;\n\t}\n\n\tget _headerLabel() {\n\t\treturn this._headerSnapped\n\t\t\t? DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER)\n\t\t\t: DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER);\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this._headerSnapped;\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea) ? -1 : 0;\n\t}\n\n\tget headerAriaHidden() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea);\n\t}\n\n\tget hasHeading() {\n\t\treturn this.headerArea.length > 0;\n\t}\n\n\tget headerSnapped(): boolean {\n\t\treturn this._headerSnapped;\n\t}\n\n\tget hasSnappedTitleOnMobile() {\n\t\treturn isPhone() && this.headerSnapped && this.dynamicPageTitle?.snappedTitleOnMobile.length;\n\t}\n\n\tget headerAriaLabel() {\n\t\treturn this.accessibilityAttributes.header?.name || (this.hasHeading ? this._headerLabel : undefined);\n\t}\n\n\tget _headerRole() { return this.accessibilityAttributes.header?.role; }\n\tget _rootRole() { return this.accessibilityAttributes.root?.role; }\n\tget _rootAriaLabel() { return this.accessibilityAttributes.root?.name; }\n\tget _contentRole() { return this.accessibilityAttributes.content?.role; }\n\tget _contentAriaLabel() { return this.accessibilityAttributes.content?.name; }\n\tget _footerRole() { return this.accessibilityAttributes.footer?.role; }\n\tget _footerAriaLabel() { return this.accessibilityAttributes.footer?.name; }\n\n\tget _hidePinButton() {\n\t\treturn this.hidePinButton || isPhone();\n\t}\n\n\t/**\n\t * Defines if the header is snapped.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tset headerSnapped(snapped: boolean) {\n\t\tif (snapped === this._headerSnapped) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.scrollContainer) {\n\t\t\tthis._headerSnapped = snapped;\n\t\t\tthis.showHeaderInStickArea = snapped;\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleHeader();\n\t}\n\n\tsnapOnScroll() {\n\t\tdebounce(() => this.snapTitleByScroll(), SCROLL_DEBOUNCE_RATE);\n\t}\n\n\tsnapTitleByScroll() {\n\t\tif (!this.dynamicPageTitle || !this.dynamicPageHeader || this.headerPinned || !this.scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.isToggled) {\n\t\t\tthis.isToggled = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.skipSnapOnScroll) {\n\t\t\tthis.skipSnapOnScroll = false;\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollTop = this.scrollContainer.scrollTop;\n\t\tconst headerHeight = this.dynamicPageHeader.getBoundingClientRect().height;\n\t\tconst lastHeaderSnapped = this._headerSnapped;\n\n\t\tif (this._headerSnapped && scrollTop > headerHeight) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t}\n\n\t\tconst shouldSnap = !this._headerSnapped && scrollTop > headerHeight + SCROLL_THRESHOLD;\n\t\tconst shouldExpand = this._headerSnapped && (scrollTop < headerHeight - SCROLL_THRESHOLD\n\t\t\t|| (!scrollTop && !headerHeight));\n\n\t\tif (shouldSnap) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t\tthis._headerSnapped = true;\n\n\t\t\t//* snappedTitleOnMobile\n\t\t\t// If the header is snapped and the scroll is at the top, scroll down a bit\n\t\t\t// to avoid ending in an endless loop of snapping and unsnapping\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (this.scrollContainer && this.scrollContainer.scrollTop === 0) {\n\t\t\t\t\tthis.scrollContainer.scrollTop = SCROLL_THRESHOLD;\n\t\t\t\t}\n\t\t\t});\n\t\t} else if (shouldExpand) {\n\t\t\tthis._headerSnapped = false;\n\t\t}\n\n\t\t// Fire event if snapped state changed\n\t\tif (lastHeaderSnapped !== this._headerSnapped) {\n\t\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\t}\n\t}\n\n\tasync onExpandClick() {\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusExpandButton();\n\n\t\tif (this.hasSnappedTitleOnMobile) {\n\t\t\tthis.dynamicPageTitle?.focus();\n\t\t}\n\n\t\tannounce(this._headerLabel, InvisibleMessageMode.Polite);\n\t}\n\n\tasync onPinClick() {\n\t\tthis.headerPinned = !this.headerPinned;\n\t\tif (this.headerPinned) {\n\t\t\tthis.showHeaderInStickArea = true;\n\t\t} else if (this.scrollContainer && this.scrollContainer.scrollTop === 0) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t}\n\t\tthis.fireDecoratorEvent(\"pin-button-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusPinButton();\n\t}\n\n\tasync onToggleTitle() {\n\t\tif (!this.hasHeading) {\n\t\t\treturn;\n\t\t}\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.dynamicPageTitle!.focus();\n\t}\n\n\tasync _toggleHeader() {\n\t\tif (!this.scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\t\tconst currentScrollTop = this.scrollContainer.scrollTop;\n\n\t\tif (!this._headerSnapped && this.headerPinned) {\n\t\t\tthis.headerPinned = false;\n\t\t\tthis.fireDecoratorEvent(\"pin-button-toggle\");\n\t\t}\n\n\t\tif (currentScrollTop <= SCROLL_THRESHOLD) {\n\t\t\tthis._headerSnapped = !this._headerSnapped;\n\t\t\tthis.showHeaderInStickArea = this._headerSnapped;\n\t\t\treturn;\n\t\t}\n\n\t\tif (currentScrollTop > SCROLL_THRESHOLD && currentScrollTop < headerHeight) {\n\t\t\tif (!this._headerSnapped) {\n\t\t\t\tthis._headerSnapped = true;\n\t\t\t\tthis.showHeaderInStickArea = true;\n\t\t\t\tthis.scrollContainer.scrollTop = 0;\n\t\t\t} else {\n\t\t\t\tthis.showHeaderInStickArea = false;\n\t\t\t\tthis._headerSnapped = false;\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.scrollContainer.scrollTop === SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer.scrollTop = 0;\n\t\t}\n\n\t\tthis.showHeaderInStickArea = !this.showHeaderInStickArea;\n\t\tthis._headerSnapped = !this._headerSnapped;\n\n\t\tthis.skipSnapOnScroll = true;\n\n\t\tawait renderFinished();\n\t\tif (this._headerSnapped && this.scrollContainer.scrollTop < SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer.scrollTop = SCROLL_THRESHOLD;\n\t\t}\n\t}\n\n\tonExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t}\n\n\tonExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t}\n\n\tonContentFocusIn(e: FocusEvent) {\n\t\t// composedPath()[0] is the actual focused element inside shadow DOM (e.g. a button inside\n\t\t// a web component host). Must be captured synchronously - composedPath() returns [] inside RAF.\n\t\tconst target = e.composedPath()[0] as HTMLElement;\n\t\tthis.setScrollPadding({ start: this.scrollPaddingTop, end: this.endAreaHeight });\n\n\t\t// Elements partially hidden behind sticky header/footer appear \"in view\" to the browser\n\t\t// but are obscured. Scroll only if the target is actually behind the sticky areas.\n\t\t// Note: browsers don't reflect dynamic scroll-padding changes, so we check manually.\n\t\trequestAnimationFrame(() => {\n\t\t\tconst scrollContainer = this.scrollContainer;\n\t\t\tif (!scrollContainer) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst rect = target.getBoundingClientRect();\n\t\t\tconst containerRect = scrollContainer.getBoundingClientRect();\n\t\t\tconst topObscured = rect.top < containerRect.top + this.scrollPaddingTop;\n\t\t\tconst bottomObscured = rect.bottom > containerRect.bottom - this.endAreaHeight;\n\t\t\tif (topObscured || bottomObscured) {\n\t\t\t\ttarget.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\n\t\t\t}\n\t\t});\n\t}\n\n\tonContentFocusOut() {\n\t\t// Reset scroll padding when focus leaves content (e.g., moves to sticky header).\n\t\t// The sticky header is part of the scrollable area, so keeping padding causes unwanted scroll.\n\t\tthis.setScrollPadding({ start: 0, end: 0 });\n\t}\n\n\tsetScrollPadding(padding: { start: number, end: number }) {\n\t\tthis.scrollContainer?.style.setProperty(\"scroll-padding-top\", `${padding.start}px`);\n\t\tthis.scrollContainer?.style.setProperty(\"scroll-padding-bottom\", `${padding.end}px`);\n\t}\n}\n\nDynamicPage.define();\n\nexport default DynamicPage;\n\nexport type { DynamicPageAccessibilityAttributes };\n"]}
+{"version":3,"file":"DynamicPage.js","sourceRoot":"","sources":["../src/DynamicPage.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport announce from \"@ui5/webcomponents-base/dist/util/InvisibleMessage.js\";\nimport InvisibleMessageMode from \"@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { AriaLandmarkRole } from \"@ui5/webcomponents-base\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\n\n// Template\nimport DynamicPageTemplate from \"./DynamicPageTemplate.js\";\n\n// Styles\nimport DynamicPageCss from \"./generated/themes/DynamicPage.css.js\";\n\nimport DynamicPageHeader from \"./DynamicPageHeader.js\";\nimport DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport type DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\ntype DynamicPageHeaderRoles = Extract<AriaLandmarkRole, \"none\" | \"banner\" | \"region\">;\ntype DynamicPageContentRoles = Extract<AriaLandmarkRole, \"none\" | \"main\" | \"region\" | \"form\">;\ntype DynamicPageFooterRoles = Extract<AriaLandmarkRole, \"none\" | \"contentinfo\" | \"region\">;\ntype DynamicPageRootRoles = Extract<AriaLandmarkRole, \"none\" | \"main\" | \"region\">;\ntype DynamicPageAccessibilityAttributes = {\n\troot?: {\n\t\trole?: DynamicPageRootRoles,\n\t\tname?: string,\n\t},\n\theader?: {\n\t\trole?: DynamicPageHeaderRoles,\n\t\tname?: string,\n\t},\n\tcontent?: {\n\t\trole?: DynamicPageContentRoles,\n\t\tname?: string,\n\t},\n\tfooter?: {\n\t\trole?: DynamicPageFooterRoles,\n\t\tname?: string,\n\t},\n};\n\nconst SCROLL_DEBOUNCE_RATE = 5; // ms\nconst SCROLL_THRESHOLD = 10; // px\n/**\n * @class\n *\n * ### Overview\n *\n * A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n *\n * The component consist of several components:\n *\n * - `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n * - `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n * - `Content area` - a generic container, which can have a single UI5 layout.\n * - `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n *\n * ### Usage\n *\n * Use the `DynamicPage` if you need to have a title, that is always visible\n * and a header, that has configurable Expanding/Snapping functionality.\n * If you don't need the Expanding/Snapping functionality it is better to use the\n * `ui5-page` as a lighter component.\n *\n * The app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\n * or content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\n * scroll through the content.\n *\n * ## Notes:\n *\n * - Snapping of the `DynamicPageTitle` is not supported in the following case:\n *  - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n *\n * ### Responsive Behavior\n *\n * Dynamic page web component implements the responsive paddings design.\n *\n * ### Keyboard Handling\n *\n *\n * ### Basic Navigation\n *\n * - [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\n * If focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\n * If focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n *\n * ### Fast Navigation\n * - This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.\n * In order to use this functionality, you need to import the following module:\n *\n * - `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @csspart content - Used to style the content of the component\n * @csspart fit-content - Used to style the fit content container of the component.\n * @csspart footer - Used to style the footer of the component\n */\n@customElement({\n\ttag: \"ui5-dynamic-page\",\n\trenderer: jsxRenderer,\n\tstyles: DynamicPageCss,\n\ttemplate: DynamicPageTemplate,\n})\n\n/**\n * Fired when the pin header button is toggled.\n *\n * @public\n */\n@event(\"pin-button-toggle\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the expand/collapse area of the title is toggled.\n *\n * @public\n */\n@event(\"title-toggle\", {\n\tbubbles: true,\n})\n\nclass DynamicPage extends UI5Element {\n\teventDetails!: {\n\t\t\"pin-button-toggle\": void;\n\t\t\"title-toggle\": void;\n\t}\n\t/**\n\t * Defines if the pin button is hidden.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thidePinButton = false;\n\n\t/**\n\t * Defines if the header is pinned.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\theaderPinned = false;\n\n\t/**\n\t * Defines if the footer is shown.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowFooter = false;\n\n\t/**\n\t * Defines the content of the Dynamic Page.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: DefaultSlot<HTMLElement>;\n\n\t/**\n\t * Defines the title HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageTitle })\n\ttitleArea!: Slot<DynamicPageTitle>;\n\n\t/**\n\t * Defines the header HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageHeader })\n\theaderArea!: Slot<DynamicPageHeader>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tfooterArea!: Slot<HTMLElement>;\n\n\t/**\n\t* Defines additional accessibility attributes on different areas of the component.\n\t*\n\t* The accessibilityAttributes object has the following fields,\n\t* where each field is an object supporting one or more accessibility attributes:\n\t*\n\t*  - **root**: `root.role` and `root.name`.\n\t*  - **header**: `header.role` and `header.name`.\n\t*  - **content**: `content.role` and `content.name`.\n\t*  - **footer**: `footer.role` and `footer.name`.\n\t*\n\t* The accessibility attributes support the following values:\n\t*\n\t* - **role**: Defines the accessible ARIA landmark role of the area.\n\t* Accepts the following values per section:\n\t* `root` — `none`, `main`, `region`;\n\t* `header` — `none`, `banner`, `region`;\n\t* `content` — `none`, `main`, `region`, `form`;\n\t* `footer` — `none`, `contentinfo`, `region`.\n\t*\n\t* - **name**: Defines the accessible ARIA name of the area.\n\t* Accepts any string.\n\t*\n\t* @default {}\n\t* @public\n\t* @since 2.24.0\n\t*/\n\t@property({ type: Object })\n\taccessibilityAttributes: DynamicPageAccessibilityAttributes = {};\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tskipSnapOnScroll = false;\n\tshowHeaderInStickArea = false;\n\tisToggled = false;\n\n\t@property({ type: Boolean })\n\t_headerSnapped = false;\n\n\t@query(\".ui5-dynamic-page-scroll-container\")\n\tscrollContainer?: HTMLElement;\n\n\t@query(\"[ui5-dynamic-page-header-actions]\")\n\theaderActions?: DynamicPageHeaderActions;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this.dynamicPageTitle) {\n\t\t\tthis.dynamicPageTitle.snapped = this._headerSnapped;\n\t\t\tthis.dynamicPageTitle.interactive = this.hasHeading;\n\t\t\tthis.dynamicPageTitle.hasSnappedTitleOnMobile = !!this.hasSnappedTitleOnMobile;\n\t\t\tthis.dynamicPageTitle.removeAttribute(\"hovered\");\n\t\t}\n\t\tif (this.dynamicPageHeader) {\n\t\t\tthis.dynamicPageHeader._snapped = this._headerSnapped;\n\t\t}\n\t}\n\n\tget endAreaHeight() {\n\t\treturn this.showFooter ? this.footerWrapper?.getBoundingClientRect().height || 0 : 0;\n\t}\n\n\tget scrollPaddingTop() {\n\t\tconst titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0;\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\n\t\tif (this._headerSnapped) {\n\t\t\treturn titleHeight;\n\t\t}\n\n\t\tconst fullHeight = headerHeight + titleHeight;\n\t\tconst scrollTop = this.scrollContainer?.scrollTop || 0;\n\n\t\treturn Math.max(titleHeight, fullHeight - scrollTop);\n\t}\n\n\tget dynamicPageTitle(): DynamicPageTitle | null {\n\t\treturn this.querySelector<DynamicPageTitle>(\"[ui5-dynamic-page-title]\");\n\t}\n\n\tget dynamicPageHeader(): DynamicPageHeader | null {\n\t\treturn this.querySelector<DynamicPageHeader>(\"[ui5-dynamic-page-header]\");\n\t}\n\n\tget footerWrapper() {\n\t\treturn this.shadowRoot?.querySelector(\".ui5-dynamic-page-footer\");\n\t}\n\n\tget actionsInTitle(): boolean {\n\t\treturn this._headerSnapped || this.showHeaderInStickArea || this.headerPinned;\n\t}\n\n\tget headerInTitle(): boolean {\n\t\treturn !this._headerSnapped && (this.showHeaderInStickArea || this.headerPinned);\n\t}\n\n\tget headerInContent(): boolean {\n\t\treturn !this.showHeaderInStickArea && !this.headerInTitle && !this.hasSnappedTitleOnMobile;\n\t}\n\n\tget _headerLabel() {\n\t\treturn this._headerSnapped\n\t\t\t? DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER)\n\t\t\t: DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER);\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this._headerSnapped;\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea) ? -1 : 0;\n\t}\n\n\tget headerAriaHidden() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea);\n\t}\n\n\tget hasHeading() {\n\t\treturn this.headerArea.length > 0;\n\t}\n\n\tget headerSnapped(): boolean {\n\t\treturn this._headerSnapped;\n\t}\n\n\tget hasSnappedTitleOnMobile() {\n\t\treturn isPhone() && this.headerSnapped && this.dynamicPageTitle?.snappedTitleOnMobile.length;\n\t}\n\n\tget headerAriaLabel() {\n\t\treturn this.accessibilityAttributes.header?.name || (this.hasHeading ? this._headerLabel : undefined);\n\t}\n\n\tget _headerRole() { return this.accessibilityAttributes.header?.role; }\n\tget _rootRole() { return this.accessibilityAttributes.root?.role; }\n\tget _rootAriaLabel() { return this.accessibilityAttributes.root?.name; }\n\tget _contentRole() { return this.accessibilityAttributes.content?.role; }\n\tget _contentAriaLabel() { return this.accessibilityAttributes.content?.name; }\n\tget _footerRole() { return this.accessibilityAttributes.footer?.role; }\n\tget _footerAriaLabel() { return this.accessibilityAttributes.footer?.name; }\n\n\tget _hidePinButton() {\n\t\treturn this.hidePinButton || isPhone();\n\t}\n\n\tget _actionsBarStickyTop(): number {\n\t\tconst titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0;\n\t\tconst headerHeight = this.headerInTitle ? (this.dynamicPageHeader?.getBoundingClientRect().height || 0) : 0;\n\t\treturn titleHeight + headerHeight;\n\t}\n\n\t/**\n\t * Defines if the header is snapped.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tset headerSnapped(snapped: boolean) {\n\t\tif (snapped === this._headerSnapped) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.scrollContainer) {\n\t\t\tthis._headerSnapped = snapped;\n\t\t\tthis.showHeaderInStickArea = snapped;\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleHeader();\n\t}\n\n\tsnapOnScroll() {\n\t\tdebounce(() => this.snapTitleByScroll(), SCROLL_DEBOUNCE_RATE);\n\t}\n\n\tsnapTitleByScroll() {\n\t\tif (!this.dynamicPageTitle || !this.dynamicPageHeader || this.headerPinned || !this.scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.isToggled) {\n\t\t\tthis.isToggled = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.skipSnapOnScroll) {\n\t\t\tthis.skipSnapOnScroll = false;\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollTop = this.scrollContainer.scrollTop;\n\t\tconst headerHeight = this.dynamicPageHeader.getBoundingClientRect().height;\n\t\tconst lastHeaderSnapped = this._headerSnapped;\n\n\t\tif (this._headerSnapped && scrollTop > headerHeight) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t}\n\n\t\tconst shouldSnap = !this._headerSnapped && scrollTop > headerHeight + SCROLL_THRESHOLD;\n\t\tconst shouldExpand = this._headerSnapped && (scrollTop < headerHeight - SCROLL_THRESHOLD\n\t\t\t|| (!scrollTop && !headerHeight));\n\n\t\tif (shouldSnap) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t\tthis._headerSnapped = true;\n\n\t\t\t//* snappedTitleOnMobile\n\t\t\t// If the header is snapped and the scroll is at the top, scroll down a bit\n\t\t\t// to avoid ending in an endless loop of snapping and unsnapping\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (this.scrollContainer && this.scrollContainer.scrollTop === 0) {\n\t\t\t\t\tthis.scrollContainer.scrollTop = SCROLL_THRESHOLD;\n\t\t\t\t}\n\t\t\t});\n\t\t} else if (shouldExpand) {\n\t\t\tthis._headerSnapped = false;\n\t\t}\n\n\t\t// Fire event if snapped state changed\n\t\tif (lastHeaderSnapped !== this._headerSnapped) {\n\t\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\t}\n\t}\n\n\tasync onExpandClick() {\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusExpandButton();\n\n\t\tif (this.hasSnappedTitleOnMobile) {\n\t\t\tthis.dynamicPageTitle?.focus();\n\t\t}\n\n\t\tannounce(this._headerLabel, InvisibleMessageMode.Polite);\n\t}\n\n\tasync onPinClick() {\n\t\tthis.headerPinned = !this.headerPinned;\n\t\tif (this.headerPinned) {\n\t\t\tthis.showHeaderInStickArea = true;\n\t\t} else if (this.scrollContainer && this.scrollContainer.scrollTop === 0) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t}\n\t\tthis.fireDecoratorEvent(\"pin-button-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusPinButton();\n\t}\n\n\tasync onToggleTitle() {\n\t\tif (!this.hasHeading) {\n\t\t\treturn;\n\t\t}\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.dynamicPageTitle!.focus();\n\t}\n\n\tasync _toggleHeader() {\n\t\tif (!this.scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\t\tconst currentScrollTop = this.scrollContainer.scrollTop;\n\n\t\tif (!this._headerSnapped && this.headerPinned) {\n\t\t\tthis.headerPinned = false;\n\t\t\tthis.fireDecoratorEvent(\"pin-button-toggle\");\n\t\t}\n\n\t\tif (currentScrollTop <= SCROLL_THRESHOLD) {\n\t\t\tthis._headerSnapped = !this._headerSnapped;\n\t\t\tthis.showHeaderInStickArea = this._headerSnapped;\n\t\t\treturn;\n\t\t}\n\n\t\tif (currentScrollTop > SCROLL_THRESHOLD && currentScrollTop < headerHeight) {\n\t\t\tif (!this._headerSnapped) {\n\t\t\t\tthis._headerSnapped = true;\n\t\t\t\tthis.showHeaderInStickArea = true;\n\t\t\t\tthis.scrollContainer.scrollTop = 0;\n\t\t\t} else {\n\t\t\t\tthis.showHeaderInStickArea = false;\n\t\t\t\tthis._headerSnapped = false;\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.scrollContainer.scrollTop === SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer.scrollTop = 0;\n\t\t}\n\n\t\tthis.showHeaderInStickArea = !this.showHeaderInStickArea;\n\t\tthis._headerSnapped = !this._headerSnapped;\n\n\t\tthis.skipSnapOnScroll = true;\n\n\t\tawait renderFinished();\n\t\tif (this._headerSnapped && this.scrollContainer.scrollTop < SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer.scrollTop = SCROLL_THRESHOLD;\n\t\t}\n\t}\n\n\tonExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t}\n\n\tonExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t}\n\n\tonContentFocusIn(e: FocusEvent) {\n\t\t// composedPath()[0] is the actual focused element inside shadow DOM (e.g. a button inside\n\t\t// a web component host). Must be captured synchronously - composedPath() returns [] inside RAF.\n\t\tconst target = e.composedPath()[0] as HTMLElement;\n\t\tthis.setScrollPadding({ start: this.scrollPaddingTop, end: this.endAreaHeight });\n\n\t\t// Elements partially hidden behind sticky header/footer appear \"in view\" to the browser\n\t\t// but are obscured. Scroll only if the target is actually behind the sticky areas.\n\t\t// Note: browsers don't reflect dynamic scroll-padding changes, so we check manually.\n\t\trequestAnimationFrame(() => {\n\t\t\tconst scrollContainer = this.scrollContainer;\n\t\t\tif (!scrollContainer) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst rect = target.getBoundingClientRect();\n\t\t\tconst containerRect = scrollContainer.getBoundingClientRect();\n\t\t\tconst topObscured = rect.top < containerRect.top + this.scrollPaddingTop;\n\t\t\tconst bottomObscured = rect.bottom > containerRect.bottom - this.endAreaHeight;\n\t\t\tif (topObscured || bottomObscured) {\n\t\t\t\ttarget.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\n\t\t\t}\n\t\t});\n\t}\n\n\tonContentFocusOut() {\n\t\t// Reset scroll padding when focus leaves content (e.g., moves to sticky header).\n\t\t// The sticky header is part of the scrollable area, so keeping padding causes unwanted scroll.\n\t\tthis.setScrollPadding({ start: 0, end: 0 });\n\t}\n\n\tsetScrollPadding(padding: { start: number, end: number }) {\n\t\tthis.scrollContainer?.style.setProperty(\"scroll-padding-top\", `${padding.start}px`);\n\t\tthis.scrollContainer?.style.setProperty(\"scroll-padding-bottom\", `${padding.end}px`);\n\t}\n}\n\nDynamicPage.define();\n\nexport default DynamicPage;\n\nexport type { DynamicPageAccessibilityAttributes };\n"]}

package/dist/DynamicPageTemplate.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime"
 import DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
 export default function DynamicPageTemplate() {
     return (_jsxs("div", { class: "ui5-dynamic-page-root", role: this._rootRole, "aria-label": this._rootAriaLabel, children: [_jsxs("div", { class: "ui5-dynamic-page-scroll-container", onScroll: this.snapOnScroll, children: [_jsxs("div", { class: "ui5-dynamic-page-title-header-wrapper", id: `${this._id}-header`, role: this._headerRole || "banner", "aria-label": this.headerAriaLabel, "onui5-toggle-title": this.onToggleTitle, children: [_jsx("slot", { name: "titleArea" }), this.headerInTitle &&
-                                _jsx("slot", { tabIndex: this.headerTabIndex, "aria-hidden": this.headerAriaHidden, name: "headerArea" }), this.actionsInTitle && headerActions.call(this)] }), this.headerInContent &&
-                        _jsx("slot", { tabIndex: this.headerTabIndex, "aria-hidden": this.headerAriaHidden, name: "headerArea" }), !this.actionsInTitle && headerActions.call(this), _jsx("div", { part: "content", class: "ui5-dynamic-page-content", role: this._contentRole, "aria-label": this._contentAriaLabel, onFocusIn: this.onContentFocusIn, onFocusOut: this.onContentFocusOut, children: _jsxs("div", { class: "ui5-dynamic-page-fit-content", part: "fit-content", children: [_jsx("slot", {}), this.showFooter &&
+                                _jsx("slot", { tabIndex: this.headerTabIndex, "aria-hidden": this.headerAriaHidden, name: "headerArea" })] }), this.headerInContent &&
+                        _jsx("slot", { tabIndex: this.headerTabIndex, "aria-hidden": this.headerAriaHidden, name: "headerArea" }), _jsx("div", { class: "ui5-dynamic-page-header-actions-wrapper", style: this.actionsInTitle ? `--_ui5_dp_header_actions_top:${this._actionsBarStickyTop}px` : undefined, children: headerActions.call(this) }), _jsx("div", { part: "content", class: "ui5-dynamic-page-content", role: this._contentRole, "aria-label": this._contentAriaLabel, onFocusIn: this.onContentFocusIn, onFocusOut: this.onContentFocusOut, children: _jsxs("div", { class: "ui5-dynamic-page-fit-content", part: "fit-content", children: [_jsx("slot", {}), this.showFooter &&
                                     _jsx("div", { class: "ui5-dynamic-page-spacer" })] }) })] }), _jsx("div", { class: "ui5-dynamic-page-footer", part: "footer", role: this._footerRole, "aria-label": this._footerAriaLabel, children: _jsx("slot", { name: "footerArea" }) })] }));
 }
 function headerActions() {

package/dist/DynamicPageTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicPageTemplate.js","sourceRoot":"","sources":["../src/DynamicPageTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,eAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,gBAAc,IAAI,CAAC,cAAc,aACvF,eAAK,KAAK,EAAC,mCAAmC,EAC7C,QAAQ,EAAE,IAAI,CAAC,YAAY,aAE3B,eACC,KAAK,EAAC,uCAAuC,EAC7C,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,SAAS,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,IAAI,QAAQ,gBACtB,IAAI,CAAC,eAAe,wBACZ,IAAI,CAAC,aAAa,aAEtC,eAAM,IAAI,EAAC,WAAW,GAAQ,EAC7B,IAAI,CAAC,aAAa;gCAClB,eAAM,QAAQ,EAAE,IAAI,CAAC,cAAc,iBACrB,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,YAAY,GACV,EAER,IAAI,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IAC3C,EAEL,IAAI,CAAC,eAAe;wBACpB,eAAM,QAAQ,EAAE,IAAI,CAAC,cAAc,iBACrB,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,YAAY,GACV,EAGR,CAAC,IAAI,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAEjD,cACC,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAE,IAAI,CAAC,YAAY,gBACX,IAAI,CAAC,iBAAiB,EAClC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,UAAU,EAAE,IAAI,CAAC,iBAAiB,YAElC,eAAK,KAAK,EAAC,8BAA8B,EAAC,IAAI,EAAC,aAAa,aAC3D,gBAAa,EACZ,IAAI,CAAC,UAAU;oCACf,cAAK,KAAK,EAAC,yBAAyB,GAAO,IAEvC,GACD,IACD,EAEN,cAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,WAAW,gBAAc,IAAI,CAAC,gBAAgB,YAC3G,eAAM,IAAI,EAAC,YAAY,GAAQ,GAC1B,IACD,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa;IACrB,IAAI,CAAC,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;QACtD,OAAO,CACN,KAAC,wBAAwB,IACxB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,aAAa,EAAE,IAAI,CAAC,cAAc,+BACP,IAAI,CAAC,aAAa,4BACrB,IAAI,CAAC,UAAU,kCACT,IAAI,CAAC,eAAe,mCACnB,IAAI,CAAC,gBAAgB,GACnD,CACF,CAAC;IACH,CAAC;AACF,CAAC","sourcesContent":["import type DynamicPage from \"./DynamicPage.js\";\nimport DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\nexport default function DynamicPageTemplate(this: DynamicPage) {\n\treturn (\n\t\t<div class=\"ui5-dynamic-page-root\" role={this._rootRole} aria-label={this._rootAriaLabel}>\n\t\t\t<div class=\"ui5-dynamic-page-scroll-container\"\n\t\t\t\tonScroll={this.snapOnScroll}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ui5-dynamic-page-title-header-wrapper\"\n\t\t\t\t\tid={`${this._id}-header`}\n\t\t\t\t\trole={this._headerRole || \"banner\"}\n\t\t\t\t\taria-label={this.headerAriaLabel}\n\t\t\t\t\tonui5-toggle-title={this.onToggleTitle}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"titleArea\"></slot>\n\t\t\t\t\t{this.headerInTitle &&\n\t\t\t\t\t\t<slot tabIndex={this.headerTabIndex}\n\t\t\t\t\t\t\taria-hidden={this.headerAriaHidden}\n\t\t\t\t\t\t\tname=\"headerArea\"\n\t\t\t\t\t\t></slot>\n\t\t\t\t\t}\n\t\t\t\t\t{this.actionsInTitle && headerActions.call(this)}\n\t\t\t\t</div>\n\n\t\t\t\t{this.headerInContent &&\n\t\t\t\t\t<slot tabIndex={this.headerTabIndex}\n\t\t\t\t\t\taria-hidden={this.headerAriaHidden}\n\t\t\t\t\t\tname=\"headerArea\"\n\t\t\t\t\t></slot>\n\t\t\t\t}\n\n\t\t\t\t{!this.actionsInTitle && headerActions.call(this)}\n\n\t\t\t\t<div\n\t\t\t\t\tpart=\"content\"\n\t\t\t\t\tclass=\"ui5-dynamic-page-content\"\n\t\t\t\t\trole={this._contentRole}\n\t\t\t\t\taria-label={this._contentAriaLabel}\n\t\t\t\t\tonFocusIn={this.onContentFocusIn}\n\t\t\t\t\tonFocusOut={this.onContentFocusOut}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"ui5-dynamic-page-fit-content\" part=\"fit-content\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t{this.showFooter &&\n\t\t\t\t\t\t\t<div class=\"ui5-dynamic-page-spacer\"></div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"ui5-dynamic-page-footer\" part=\"footer\" role={this._footerRole} aria-label={this._footerAriaLabel}>\n\t\t\t\t<slot name=\"footerArea\"></slot>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction headerActions(this: DynamicPage) {\n\tif (!this.hasSnappedTitleOnMobile && this.hasHeading) {\n\t\treturn (\n\t\t\t<DynamicPageHeaderActions\n\t\t\t\tsnapped={this.headerSnapped}\n\t\t\t\tpinned={this.headerPinned}\n\t\t\t\thidePinButton={this._hidePinButton}\n\t\t\t\tonui5-expand-button-click={this.onExpandClick}\n\t\t\t\tonui5-pin-button-click={this.onPinClick}\n\t\t\t\tonui5-expand-button-hover-in={this.onExpandHoverIn}\n\t\t\t\tonui5-expand-button-hover-out={this.onExpandHoverOut}\n\t\t\t/>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"DynamicPageTemplate.js","sourceRoot":"","sources":["../src/DynamicPageTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,eAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,gBAAc,IAAI,CAAC,cAAc,aACvF,eAAK,KAAK,EAAC,mCAAmC,EAC7C,QAAQ,EAAE,IAAI,CAAC,YAAY,aAE3B,eACC,KAAK,EAAC,uCAAuC,EAC7C,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,SAAS,EACxB,IAAI,EAAE,IAAI,CAAC,WAAW,IAAI,QAAQ,gBACtB,IAAI,CAAC,eAAe,wBACZ,IAAI,CAAC,aAAa,aAEtC,eAAM,IAAI,EAAC,WAAW,GAAQ,EAC7B,IAAI,CAAC,aAAa;gCAClB,eAAM,QAAQ,EAAE,IAAI,CAAC,cAAc,iBACrB,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,YAAY,GACV,IAEJ,EAEL,IAAI,CAAC,eAAe;wBACpB,eAAM,QAAQ,EAAE,IAAI,CAAC,cAAc,iBACrB,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,YAAY,GACV,EAGT,cACC,KAAK,EAAC,yCAAyC,EAC/C,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,gCAAgC,IAAI,CAAC,oBAAoB,IAAI,CAAC,CAAC,CAAC,SAAS,YAErG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GACpB,EAEN,cACC,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAE,IAAI,CAAC,YAAY,gBACX,IAAI,CAAC,iBAAiB,EAClC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,UAAU,EAAE,IAAI,CAAC,iBAAiB,YAElC,eAAK,KAAK,EAAC,8BAA8B,EAAC,IAAI,EAAC,aAAa,aAC3D,gBAAa,EACZ,IAAI,CAAC,UAAU;oCACf,cAAK,KAAK,EAAC,yBAAyB,GAAO,IAEvC,GACD,IACD,EAEN,cAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,WAAW,gBAAc,IAAI,CAAC,gBAAgB,YAC3G,eAAM,IAAI,EAAC,YAAY,GAAQ,GAC1B,IACD,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa;IACrB,IAAI,CAAC,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;QACtD,OAAO,CACN,KAAC,wBAAwB,IACxB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,aAAa,EAAE,IAAI,CAAC,cAAc,+BACP,IAAI,CAAC,aAAa,4BACrB,IAAI,CAAC,UAAU,kCACT,IAAI,CAAC,eAAe,mCACnB,IAAI,CAAC,gBAAgB,GACnD,CACF,CAAC;IACH,CAAC;AACF,CAAC","sourcesContent":["import type DynamicPage from \"./DynamicPage.js\";\nimport DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\nexport default function DynamicPageTemplate(this: DynamicPage) {\n\treturn (\n\t\t<div class=\"ui5-dynamic-page-root\" role={this._rootRole} aria-label={this._rootAriaLabel}>\n\t\t\t<div class=\"ui5-dynamic-page-scroll-container\"\n\t\t\t\tonScroll={this.snapOnScroll}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ui5-dynamic-page-title-header-wrapper\"\n\t\t\t\t\tid={`${this._id}-header`}\n\t\t\t\t\trole={this._headerRole || \"banner\"}\n\t\t\t\t\taria-label={this.headerAriaLabel}\n\t\t\t\t\tonui5-toggle-title={this.onToggleTitle}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"titleArea\"></slot>\n\t\t\t\t\t{this.headerInTitle &&\n\t\t\t\t\t\t<slot tabIndex={this.headerTabIndex}\n\t\t\t\t\t\t\taria-hidden={this.headerAriaHidden}\n\t\t\t\t\t\t\tname=\"headerArea\"\n\t\t\t\t\t\t></slot>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\n\t\t\t\t{this.headerInContent &&\n\t\t\t\t\t<slot tabIndex={this.headerTabIndex}\n\t\t\t\t\t\taria-hidden={this.headerAriaHidden}\n\t\t\t\t\t\tname=\"headerArea\"\n\t\t\t\t\t></slot>\n\t\t\t\t}\n\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ui5-dynamic-page-header-actions-wrapper\"\n\t\t\t\t\tstyle={this.actionsInTitle ? `--_ui5_dp_header_actions_top:${this._actionsBarStickyTop}px` : undefined}\n\t\t\t\t>\n\t\t\t\t\t{headerActions.call(this)}\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tpart=\"content\"\n\t\t\t\t\tclass=\"ui5-dynamic-page-content\"\n\t\t\t\t\trole={this._contentRole}\n\t\t\t\t\taria-label={this._contentAriaLabel}\n\t\t\t\t\tonFocusIn={this.onContentFocusIn}\n\t\t\t\t\tonFocusOut={this.onContentFocusOut}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"ui5-dynamic-page-fit-content\" part=\"fit-content\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t{this.showFooter &&\n\t\t\t\t\t\t\t<div class=\"ui5-dynamic-page-spacer\"></div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"ui5-dynamic-page-footer\" part=\"footer\" role={this._footerRole} aria-label={this._footerAriaLabel}>\n\t\t\t\t<slot name=\"footerArea\"></slot>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction headerActions(this: DynamicPage) {\n\tif (!this.hasSnappedTitleOnMobile && this.hasHeading) {\n\t\treturn (\n\t\t\t<DynamicPageHeaderActions\n\t\t\t\tsnapped={this.headerSnapped}\n\t\t\t\tpinned={this.headerPinned}\n\t\t\t\thidePinButton={this._hidePinButton}\n\t\t\t\tonui5-expand-button-click={this.onExpandClick}\n\t\t\t\tonui5-pin-button-click={this.onPinClick}\n\t\t\t\tonui5-expand-button-hover-in={this.onExpandHoverIn}\n\t\t\t\tonui5-expand-button-hover-out={this.onExpandHoverOut}\n\t\t\t/>\n\t\t);\n\t}\n}\n"]}

package/dist/css/themes/DynamicPage.css

@@ -1 +1 @@
-.ui5-dynamic-page-title-header-wrapper{position:sticky;top:0;z-index:3}:host{display:block;height:100%;background-color:var(--ui5_dynamic_page_background);isolation:isolate}.ui5-dynamic-page-root{container-type:inline-size;height:inherit;overflow-y:hidden}.ui5-dynamic-page-scroll-container{overflow-y:auto;height:100%;overflow-anchor:none}.ui5-dynamic-page-scroll-container{display:flex;flex-direction:column}.ui5-dynamic-page-content{flex-grow:1;position:relative}.ui5-dynamic-page-fit-content{position:absolute;inset:0}.ui5-dynamic-page-footer{position:sticky;bottom:0;padding:0 .5rem .5rem;box-sizing:border-box;z-index:2;opacity:0;transform:translateY(100%);transition:opacity .35s ease-in-out,transform .35s ease-in-out}.ui5-dynamic-page-spacer{height:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-fit-content{bottom:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-footer{transform:translateY(0);opacity:1}::slotted([slot="footerArea"]){border-radius:.25rem;background-color:var(--_ui5_dynamic_page_header_background_color);box-sizing:content-box;width:auto}::slotted([slot="titleArea"]){width:auto}.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_S)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_S)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_S)}@container (min-width: 600px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_M)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_M)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_M)}}@container (min-width: 1024px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_L)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_L)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_L)}}@container (min-width: 1440px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_XL)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_XL)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_XL)}}
+.ui5-dynamic-page-title-header-wrapper{position:sticky;top:0;z-index:3}.ui5-dynamic-page-header-actions-wrapper{position:sticky;top:var(--_ui5_dp_header_actions_top, auto);z-index:4}:host{display:block;height:100%;background-color:var(--ui5_dynamic_page_background);isolation:isolate}.ui5-dynamic-page-root{container-type:inline-size;height:inherit;overflow-y:hidden}.ui5-dynamic-page-scroll-container{overflow-y:auto;height:100%;overflow-anchor:none}.ui5-dynamic-page-scroll-container{display:flex;flex-direction:column}.ui5-dynamic-page-content{flex-grow:1;position:relative}.ui5-dynamic-page-fit-content{position:absolute;inset:0}.ui5-dynamic-page-footer{position:sticky;bottom:0;padding:0 .5rem .5rem;box-sizing:border-box;z-index:2;opacity:0;transform:translateY(100%);transition:opacity .35s ease-in-out,transform .35s ease-in-out}.ui5-dynamic-page-spacer{height:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-fit-content{bottom:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-footer{transform:translateY(0);opacity:1}::slotted([slot="footerArea"]){border-radius:.25rem;background-color:var(--_ui5_dynamic_page_header_background_color);box-sizing:content-box;width:auto}::slotted([slot="titleArea"]){width:auto}.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_S)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_S)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_S)}@container (min-width: 600px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_M)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_M)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_M)}}@container (min-width: 1024px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_L)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_L)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_L)}}@container (min-width: 1440px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_XL)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_XL)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_XL)}}

package/dist/custom-elements-internal.json

@@ -3067,7 +3067,7 @@
                 ]
               },
               "default": "\"Active\"",
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "privacy": "public"
             }
           ],
@@ -3217,7 +3217,7 @@
               }
             },
             {
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "name": "type",
               "default": "\"Active\"",
               "fieldName": "type",
@@ -11648,7 +11648,7 @@
                 ]
               },
               "default": "\"Active\"",
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "privacy": "public"
             }
           ],
@@ -11875,7 +11875,7 @@
               }
             },
             {
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "name": "type",
               "default": "\"Active\"",
               "fieldName": "type",
@@ -12767,7 +12767,7 @@
                 ]
               },
               "default": "\"Active\"",
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "privacy": "public"
             }
           ],
@@ -12908,7 +12908,7 @@
               }
             },
             {
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "name": "type",
               "default": "\"Active\"",
               "fieldName": "type",
@@ -13888,7 +13888,7 @@
                 ]
               },
               "default": "\"Active\"",
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "privacy": "public"
             }
           ],
@@ -14002,7 +14002,7 @@
               }
             },
             {
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "name": "type",
               "default": "\"Active\"",
               "fieldName": "type",

package/dist/custom-elements.json

@@ -2482,7 +2482,7 @@
                 ]
               },
               "default": "\"Active\"",
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "privacy": "public"
             }
           ],
@@ -2632,7 +2632,7 @@
               }
             },
             {
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "name": "type",
               "default": "\"Active\"",
               "fieldName": "type",
@@ -9341,7 +9341,7 @@
                 ]
               },
               "default": "\"Active\"",
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "privacy": "public"
             }
           ],
@@ -9533,7 +9533,7 @@
               }
             },
             {
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "name": "type",
               "default": "\"Active\"",
               "fieldName": "type",
@@ -10259,7 +10259,7 @@
                 ]
               },
               "default": "\"Active\"",
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "privacy": "public"
             }
           ],
@@ -10400,7 +10400,7 @@
               }
             },
             {
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "name": "type",
               "default": "\"Active\"",
               "fieldName": "type",
@@ -11164,7 +11164,7 @@
                 ]
               },
               "default": "\"Active\"",
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "privacy": "public"
             }
           ],
@@ -11278,7 +11278,7 @@
               }
             },
             {
-              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
+              "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.",
               "name": "type",
               "default": "\"Active\"",
               "fieldName": "type",

package/dist/generated/themes/DynamicPage.css.d.ts

@@ -1,2 +1,2 @@
-declare const _default: ".ui5-dynamic-page-title-header-wrapper{position:sticky;top:0;z-index:3}:host{display:block;height:100%;background-color:var(--ui5_dynamic_page_background);isolation:isolate}.ui5-dynamic-page-root{container-type:inline-size;height:inherit;overflow-y:hidden}.ui5-dynamic-page-scroll-container{overflow-y:auto;height:100%;overflow-anchor:none}.ui5-dynamic-page-scroll-container{display:flex;flex-direction:column}.ui5-dynamic-page-content{flex-grow:1;position:relative}.ui5-dynamic-page-fit-content{position:absolute;inset:0}.ui5-dynamic-page-footer{position:sticky;bottom:0;padding:0 .5rem .5rem;box-sizing:border-box;z-index:2;opacity:0;transform:translateY(100%);transition:opacity .35s ease-in-out,transform .35s ease-in-out}.ui5-dynamic-page-spacer{height:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-fit-content{bottom:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-footer{transform:translateY(0);opacity:1}::slotted([slot=\"footerArea\"]){border-radius:.25rem;background-color:var(--_ui5_dynamic_page_header_background_color);box-sizing:content-box;width:auto}::slotted([slot=\"titleArea\"]){width:auto}.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_S)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_S)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_S)}@container (min-width: 600px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_M)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_M)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_M)}}@container (min-width: 1024px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_L)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_L)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_L)}}@container (min-width: 1440px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_XL)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_XL)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_XL)}}\n";
+declare const _default: ".ui5-dynamic-page-title-header-wrapper{position:sticky;top:0;z-index:3}.ui5-dynamic-page-header-actions-wrapper{position:sticky;top:var(--_ui5_dp_header_actions_top, auto);z-index:4}:host{display:block;height:100%;background-color:var(--ui5_dynamic_page_background);isolation:isolate}.ui5-dynamic-page-root{container-type:inline-size;height:inherit;overflow-y:hidden}.ui5-dynamic-page-scroll-container{overflow-y:auto;height:100%;overflow-anchor:none}.ui5-dynamic-page-scroll-container{display:flex;flex-direction:column}.ui5-dynamic-page-content{flex-grow:1;position:relative}.ui5-dynamic-page-fit-content{position:absolute;inset:0}.ui5-dynamic-page-footer{position:sticky;bottom:0;padding:0 .5rem .5rem;box-sizing:border-box;z-index:2;opacity:0;transform:translateY(100%);transition:opacity .35s ease-in-out,transform .35s ease-in-out}.ui5-dynamic-page-spacer{height:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-fit-content{bottom:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-footer{transform:translateY(0);opacity:1}::slotted([slot=\"footerArea\"]){border-radius:.25rem;background-color:var(--_ui5_dynamic_page_header_background_color);box-sizing:content-box;width:auto}::slotted([slot=\"titleArea\"]){width:auto}.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_S)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_S)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_S)}@container (min-width: 600px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_M)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_M)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_M)}}@container (min-width: 1024px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_L)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_L)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_L)}}@container (min-width: 1440px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_XL)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_XL)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_XL)}}\n";
 export default _default;

package/dist/generated/themes/DynamicPage.css.js

@@ -3,6 +3,6 @@ import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/s
 import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "u" + "i" + "5" + "/" + "w" + "e" + "b" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s" + "-" + "f" + "i" + "o" + "r" + "i", "sap_horizon", async () => defaultTheme, "host");
-export default `.ui5-dynamic-page-title-header-wrapper{position:sticky;top:0;z-index:3}:host{display:block;height:100%;background-color:var(--ui5_dynamic_page_background);isolation:isolate}.ui5-dynamic-page-root{container-type:inline-size;height:inherit;overflow-y:hidden}.ui5-dynamic-page-scroll-container{overflow-y:auto;height:100%;overflow-anchor:none}.ui5-dynamic-page-scroll-container{display:flex;flex-direction:column}.ui5-dynamic-page-content{flex-grow:1;position:relative}.ui5-dynamic-page-fit-content{position:absolute;inset:0}.ui5-dynamic-page-footer{position:sticky;bottom:0;padding:0 .5rem .5rem;box-sizing:border-box;z-index:2;opacity:0;transform:translateY(100%);transition:opacity .35s ease-in-out,transform .35s ease-in-out}.ui5-dynamic-page-spacer{height:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-fit-content{bottom:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-footer{transform:translateY(0);opacity:1}::slotted([slot="footerArea"]){border-radius:.25rem;background-color:var(--_ui5_dynamic_page_header_background_color);box-sizing:content-box;width:auto}::slotted([slot="titleArea"]){width:auto}.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_S)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_S)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_S)}@container (min-width: 600px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_M)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_M)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_M)}}@container (min-width: 1024px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_L)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_L)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_L)}}@container (min-width: 1440px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_XL)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_XL)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_XL)}}
+export default `.ui5-dynamic-page-title-header-wrapper{position:sticky;top:0;z-index:3}.ui5-dynamic-page-header-actions-wrapper{position:sticky;top:var(--_ui5_dp_header_actions_top, auto);z-index:4}:host{display:block;height:100%;background-color:var(--ui5_dynamic_page_background);isolation:isolate}.ui5-dynamic-page-root{container-type:inline-size;height:inherit;overflow-y:hidden}.ui5-dynamic-page-scroll-container{overflow-y:auto;height:100%;overflow-anchor:none}.ui5-dynamic-page-scroll-container{display:flex;flex-direction:column}.ui5-dynamic-page-content{flex-grow:1;position:relative}.ui5-dynamic-page-fit-content{position:absolute;inset:0}.ui5-dynamic-page-footer{position:sticky;bottom:0;padding:0 .5rem .5rem;box-sizing:border-box;z-index:2;opacity:0;transform:translateY(100%);transition:opacity .35s ease-in-out,transform .35s ease-in-out}.ui5-dynamic-page-spacer{height:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-fit-content{bottom:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-footer{transform:translateY(0);opacity:1}::slotted([slot="footerArea"]){border-radius:.25rem;background-color:var(--_ui5_dynamic_page_header_background_color);box-sizing:content-box;width:auto}::slotted([slot="titleArea"]){width:auto}.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_S)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_S)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_S)}@container (min-width: 600px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_M)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_M)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_M)}}@container (min-width: 1024px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_L)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_L)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_L)}}@container (min-width: 1440px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_XL)}::slotted([slot="titleArea"]){padding:var(--_ui5_dynamic_page_title_padding_XL)}::slotted([slot="headerArea"]){padding:var(--_ui5_dynamic_page_header_padding_XL)}}
 `;
 //# sourceMappingURL=DynamicPage.css.js.map

package/dist/generated/themes/DynamicPage.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicPage.css.js","sourceRoot":"","sources":["../../../src/generated/themes/DynamicPage.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC9N,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\" + \"-\" + \"f\" + \"i\" + \"o\" + \"r\" + \"i\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `.ui5-dynamic-page-title-header-wrapper{position:sticky;top:0;z-index:3}:host{display:block;height:100%;background-color:var(--ui5_dynamic_page_background);isolation:isolate}.ui5-dynamic-page-root{container-type:inline-size;height:inherit;overflow-y:hidden}.ui5-dynamic-page-scroll-container{overflow-y:auto;height:100%;overflow-anchor:none}.ui5-dynamic-page-scroll-container{display:flex;flex-direction:column}.ui5-dynamic-page-content{flex-grow:1;position:relative}.ui5-dynamic-page-fit-content{position:absolute;inset:0}.ui5-dynamic-page-footer{position:sticky;bottom:0;padding:0 .5rem .5rem;box-sizing:border-box;z-index:2;opacity:0;transform:translateY(100%);transition:opacity .35s ease-in-out,transform .35s ease-in-out}.ui5-dynamic-page-spacer{height:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-fit-content{bottom:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-footer{transform:translateY(0);opacity:1}::slotted([slot=\"footerArea\"]){border-radius:.25rem;background-color:var(--_ui5_dynamic_page_header_background_color);box-sizing:content-box;width:auto}::slotted([slot=\"titleArea\"]){width:auto}.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_S)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_S)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_S)}@container (min-width: 600px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_M)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_M)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_M)}}@container (min-width: 1024px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_L)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_L)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_L)}}@container (min-width: 1440px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_XL)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_XL)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_XL)}}\n`"]}
+{"version":3,"file":"DynamicPage.css.js","sourceRoot":"","sources":["../../../src/generated/themes/DynamicPage.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC9N,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\" + \"-\" + \"f\" + \"i\" + \"o\" + \"r\" + \"i\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `.ui5-dynamic-page-title-header-wrapper{position:sticky;top:0;z-index:3}.ui5-dynamic-page-header-actions-wrapper{position:sticky;top:var(--_ui5_dp_header_actions_top, auto);z-index:4}:host{display:block;height:100%;background-color:var(--ui5_dynamic_page_background);isolation:isolate}.ui5-dynamic-page-root{container-type:inline-size;height:inherit;overflow-y:hidden}.ui5-dynamic-page-scroll-container{overflow-y:auto;height:100%;overflow-anchor:none}.ui5-dynamic-page-scroll-container{display:flex;flex-direction:column}.ui5-dynamic-page-content{flex-grow:1;position:relative}.ui5-dynamic-page-fit-content{position:absolute;inset:0}.ui5-dynamic-page-footer{position:sticky;bottom:0;padding:0 .5rem .5rem;box-sizing:border-box;z-index:2;opacity:0;transform:translateY(100%);transition:opacity .35s ease-in-out,transform .35s ease-in-out}.ui5-dynamic-page-spacer{height:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-fit-content{bottom:var(--_ui5_dynamic_page_footer_spacer)}:host([show-footer]) .ui5-dynamic-page-footer{transform:translateY(0);opacity:1}::slotted([slot=\"footerArea\"]){border-radius:.25rem;background-color:var(--_ui5_dynamic_page_header_background_color);box-sizing:content-box;width:auto}::slotted([slot=\"titleArea\"]){width:auto}.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_S)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_S)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_S)}@container (min-width: 600px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_M)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_M)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_M)}}@container (min-width: 1024px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_L)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_L)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_L)}}@container (min-width: 1440px){.ui5-dynamic-page-fit-content{padding:var(--_ui5_dynamic_page_content_padding_XL)}::slotted([slot=\"titleArea\"]){padding:var(--_ui5_dynamic_page_title_padding_XL)}::slotted([slot=\"headerArea\"]){padding:var(--_ui5_dynamic_page_header_padding_XL)}}\n`"]}

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.25.3",
+  "version": "2.25.5",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.25.3",
+  "version": "2.25.5",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -56,20 +56,20 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.25.3",
-    "@ui5/webcomponents-base": "2.25.3",
-    "@ui5/webcomponents-icons": "2.25.3",
-    "@ui5/webcomponents-theming": "2.25.3",
+    "@ui5/webcomponents": "2.25.5",
+    "@ui5/webcomponents-base": "2.25.5",
+    "@ui5/webcomponents-icons": "2.25.5",
+    "@ui5/webcomponents-theming": "2.25.5",
     "@zxing/library": "^0.21.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.25.3",
+    "@ui5/webcomponents-tools": "2.25.5",
     "cypress": "15.18.1",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "yarn": "^1.22.22"
   },
-  "gitHead": "a222b8507da83fa31c247694dc41388dcb1b74a1"
+  "gitHead": "ac3131acbafcc9aa0e42e334245afddddef513e6"
 }

package/src/DynamicPageTemplate.tsx

@@ -21,7 +21,6 @@ export default function DynamicPageTemplate(this: DynamicPage) {
 							name="headerArea"
 						></slot>
 					}
-					{this.actionsInTitle && headerActions.call(this)}
 				</div>
 
 				{this.headerInContent &&
@@ -31,7 +30,12 @@ export default function DynamicPageTemplate(this: DynamicPage) {
 					></slot>
 				}
 
-				{!this.actionsInTitle && headerActions.call(this)}
+				<div
+					class="ui5-dynamic-page-header-actions-wrapper"
+					style={this.actionsInTitle ? `--_ui5_dp_header_actions_top:${this._actionsBarStickyTop}px` : undefined}
+				>
+					{headerActions.call(this)}
+				</div>
 
 				<div
 					part="content"

package/src/themes/DynamicPage.css

@@ -5,6 +5,12 @@
     z-index: 3;
 }
 
+.ui5-dynamic-page-header-actions-wrapper {
+    position: sticky;
+    top: var(--_ui5_dp_header_actions_top, auto);
+    z-index: 4;
+}
+
 :host {
     display: block;
     height: 100%;