@eui/ecl 22.0.0-alpha.35 → 22.0.0-alpha.36

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-09-30T17:55:26.914Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-10-01T11:50:52.094Z, llm-md export.
 
 ## Modules
 
@@ -1970,8 +1970,7 @@ Methods:
 ### EclPageHeaderComponent
 
 File: `packages/ecl/components/ecl-page-header/ecl-page-header.component.ts`
-Selector: `ecl-page-header`
-Deprecated: (deprecated: Use `div[eclPageHeader]` instead. To be removed in v23.)
+Selector: `div[eclPageHeader]`
 
 Description: ECL Page Header component, wraps header content and handles background images and breadcrumb styling.
 
@@ -1984,7 +1983,6 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `eclBackgroundPicture: unknown = contentChild(EclPageHeaderBackgroundPictureDirective)` — Reference to the background picture directive, if present.
 - `eclBreadcrumbComponent: unknown = contentChild(EclBreadcrumbComponent)` — Reference to the ECL breadcrumb inside the header.
 
 Methods:
@@ -2025,27 +2023,6 @@ Methods:
 - `onExpandButtonClick(): void`
 - `getCssClasses(rootClass: string): string`
 
-### EclPageHeaderNextComponent
-
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-next/ecl-page-header-next.component.ts`
-Selector: `div[eclPageHeader]`
-
-Description: ECL Page Header component, wraps header content and handles background images and breadcrumb styling.
-
-Inputs:
-- `descriptionPosition: "top" | "bottom" = 'top'`
-- `hasBackground: boolean = false`
-- `picturePosition: "top" | "beside" | "bottom" = 'top'`
-- `class: string`
-- `e2eAttr: any`
-- `tabindex: number`
-
-Properties:
-- `eclBreadcrumbComponent: unknown = contentChild(EclBreadcrumbComponent)` — Reference to the ECL breadcrumb inside the header.
-
-Methods:
-- `getCssClasses(rootClass: string): string`
-
 ### EclPageHeaderSectionComponent
 
 File: `packages/ecl/components/ecl-page-header/ecl-page-header-section/ecl-page-header-section.component.ts`
@@ -3682,7 +3659,7 @@ Methods:
 
 ### EclContainerDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-info.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-info.directive.ts`
 Selector: `[eclContainer]`
 
 Inputs:
@@ -5173,7 +5150,7 @@ Methods:
 
 ### EclPageHeaderBackgroundImageDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-background.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-background.directive.ts`
 Selector: `[eclPageHeaderBackgroundImage]`
 
 Description: Styles the background image inside the page header.
@@ -5188,7 +5165,7 @@ Methods:
 
 ### EclPageHeaderBackgroundPictureDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-background.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-background.directive.ts`
 Selector: `[eclPageHeaderBackgroundPicture]`
 
 Description: Styles the background picture inside the page header.
@@ -5203,7 +5180,7 @@ Methods:
 
 ### EclPageHeaderContainerDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-info.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-info.directive.ts`
 Selector: `[eclPageHeaderContainer]`
 
 Inputs:
@@ -5216,7 +5193,7 @@ Methods:
 
 ### EclPageHeaderDescriptionDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-description.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-description.directive.ts`
 Selector: `p[eclPageHeaderDescription]`
 
 Description: Styles the text description in the page header.
@@ -5231,7 +5208,7 @@ Methods:
 
 ### EclPageHeaderDescriptionPictureDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-description.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-description.directive.ts`
 Selector: `[eclPageHeaderDescriptionPicture]`
 
 Description: Styles a picture used in the page header description.
@@ -5246,7 +5223,7 @@ Methods:
 
 ### EclPageHeaderDescriptionThumbnailDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-description.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-description.directive.ts`
 Selector: `[eclPageHeaderDescriptionThumbnail], img[eclPageHeaderDescriptionImage]`
 
 Description: Styles a thumbnail or image in the page header description.
@@ -5261,7 +5238,7 @@ Methods:
 
 ### EclPageHeaderExpandableHeaderDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-title.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-title.directive.ts`
 Selector: `[eclPageHeaderExpandableHeader]`
 
 Description: Styles the header section for the page header expandable component.
@@ -5276,7 +5253,7 @@ Methods:
 
 ### EclPageHeaderInfoDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-info.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-info.directive.ts`
 Selector: `[eclPageHeaderInfo]`
 
 Description: Styles the info section in the page header.
@@ -5291,7 +5268,7 @@ Methods:
 
 ### EclPageHeaderMetaDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-meta.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-meta.directive.ts`
 Selector: `[eclPageHeaderMeta]`
 
 Description: Styles the meta section in the page header.
@@ -5306,7 +5283,7 @@ Methods:
 
 ### EclPageHeaderMetaItemDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-meta.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-meta.directive.ts`
 Selector: `[eclPageHeaderMetaItem]`
 
 Description: Styles individual meta items in the page header.
@@ -5324,7 +5301,7 @@ Methods:
 
 ### EclPageHeaderTitleDirective
 
-File: `packages/ecl/components/ecl-page-header/ecl-page-header-title.directive.ts`
+File: `packages/ecl/components/ecl-page-header/ecl-page-header-directives/ecl-page-header-title.directive.ts`
 Selector: `[eclPageHeaderTitle]`
 
 Description: Styles the title section in the page header.
@@ -7396,12 +7373,12 @@ Properties:
 
 ## Public variables
 
-- `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
-  Defined in `packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts`
 - `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
   Defined in `packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts`
 - `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
   Defined in `packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts`
+- `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
+  Defined in `packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts`
 - `AVAILABLE_NON_EU_LOGO_COUNTRY_CODES: string[] = ['ar', 'ca', 'is', 'jp', 'lb', 'no', 'ru', 'sw', 'tr', 'uk', 'zh'] as const`
   Defined in `packages/ecl/core/utils/constants/constants.ts`
 - `DEFAULT_LOGO_COUNTRY_CODE: string = 'en'`
@@ -7504,7 +7481,7 @@ Properties:
   Defined in `packages/ecl/components/ecl-news-ticker/index.ts`
 - `EUI_ECL_NOTIFICATION: unknown = [ EclNotificationComponent, EclNotificationTitleDirective, EclNotificationIconDirective, EclNotificationLinkDirective, ] as const`
   Defined in `packages/ecl/components/ecl-notification/index.ts`
-- `EUI_ECL_PAGE_HEADER: unknown = [ EclPageHeaderComponent, EclPageHeaderNextComponent, EclPageHeaderContainerDirective, EclPageHeaderExpandableComponent, EclPageHeaderExpandableHeaderDirective,…`
+- `EUI_ECL_PAGE_HEADER: unknown = [ EclPageHeaderComponent, EclPageHeaderContainerDirective, EclPageHeaderExpandableComponent, EclPageHeaderExpandableHeaderDirective, EclPageHeaderInfoDirective,…`
   Defined in `packages/ecl/components/ecl-page-header/index.ts`
 - `EUI_ECL_PAGE_INFORMATION: unknown = [ EclPageInformationDirective, ] as const`
   Defined in `packages/ecl/components/ecl-page-information/index.ts`
@@ -7568,9 +7545,9 @@ Properties:
   Defined in `packages/ecl/components/ecl-search-form/ecl-search-form.component.ts`
 - `noop: unknown = (): void => { /** empty*/ }`
   Defined in `packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts`
-- `RESIZE_DEBOUNCE: number = 200` — Debounce for the resize recomputation, matching ECL's handleResize .
-  Defined in `packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts`
 - `RESIZE_DEBOUNCE: number = 200` — Debounce for the resize recomputation, matching ECL's handleResize .
   Defined in `packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts`
+- `RESIZE_DEBOUNCE: number = 200` — Debounce for the resize recomputation, matching ECL's handleResize .
+  Defined in `packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts`
 - `testBed: unknown = getTestBed()`
   Defined in `packages/ecl/test-setup.ts`

package/docs/miscellaneous/variables.html

@@ -137,15 +137,15 @@
             <tr>
                 <td class="col-md-4">
                     <ul class="index-list">
-                        <li>
-                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-login.component.ts)</span></a>
-                        </li>
                         <li>
                             <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-language.component.ts)</span></a>
                         </li>
                         <li>
                             <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-search.component.ts)</span></a>
                         </li>
+                        <li>
+                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-login.component.ts)</span></a>
+                        </li>
                         <li>
                             <a href="#AVAILABLE_NON_EU_LOGO_COUNTRY_CODES" title="packages/ecl/core/utils/constants/constants.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>AVAILABLE_NON_EU_LOGO_COUNTRY_CODES</b>&nbsp;&nbsp;&nbsp;(packages/.../constants.ts)</span></a>
                         </li>
@@ -396,10 +396,10 @@
                             <a href="#noop" title="packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>noop</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-search.component.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#RESIZE_DEBOUNCE" title="packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>RESIZE_DEBOUNCE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-login.component.ts)</span></a>
+                            <a href="#RESIZE_DEBOUNCE" title="packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>RESIZE_DEBOUNCE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-search.component.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#RESIZE_DEBOUNCE" title="packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>RESIZE_DEBOUNCE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-search.component.ts)</span></a>
+                            <a href="#RESIZE_DEBOUNCE" title="packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>RESIZE_DEBOUNCE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-login.component.ts)</span></a>
                         </li>
                         <li>
                             <a href="#testBed" title="packages/ecl/test-setup.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>testBed</b>&nbsp;&nbsp;&nbsp;(packages/.../test-setup.ts)</span></a>
@@ -411,7 +411,7 @@
     </table>
 </section>
 
-    <h3>packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts</h3>
+    <h3>packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts</h3>
     <section data-compodoc="block-properties">
     <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
@@ -445,105 +445,96 @@
 
         </tbody>
     </table>
-    <table class="table table-sm table-bordered">
+</section>
+    <h3>packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="RESIZE_DEBOUNCE"></a>
+                    <a name="ARROW_SIZE"></a>
                     <span class="name">
-                        <span ><b>RESIZE_DEBOUNCE</b></span>
-                        <a href="#RESIZE_DEBOUNCE"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>ARROW_SIZE</b></span>
+                        <a href="#ARROW_SIZE"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>200</code>
+                        <i>Default value : </i><code>&#x27;0.5rem&#x27;</code>
                     </td>
                 </tr>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-description"><p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>
+                    <div class="io-description"><p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>
 </div>
                 </td>
             </tr>
 
         </tbody>
     </table>
-</section>
-    <h3>packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts</h3>
-    <section data-compodoc="block-properties">
-    <h3></h3>    <table class="table table-sm table-bordered">
+    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="ARROW_SIZE"></a>
+                    <a name="ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR"></a>
                     <span class="name">
-                        <span ><b>ARROW_SIZE</b></span>
-                        <a href="#ARROW_SIZE"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR</b></span>
+                        <a href="#ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                        <i>Type : </i>        <code><a href="https://angular.dev/api/core/Provider" target="_blank" >Provider</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>&#x27;0.5rem&#x27;</code>
+                        <i>Default value : </i><code>{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() &#x3D;&gt; EclSiteHeaderSearchComponent),
+    multi: true,
+}</code>
                     </td>
                 </tr>
 
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>
-</div>
-                </td>
-            </tr>
 
         </tbody>
     </table>
-</section>
-    <h3>packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts</h3>
-    <section data-compodoc="block-properties">
-    <h3></h3>    <table class="table table-sm table-bordered">
+    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="ARROW_SIZE"></a>
+                    <a name="noop"></a>
                     <span class="name">
-                        <span ><b>ARROW_SIZE</b></span>
-                        <a href="#ARROW_SIZE"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>noop</b></span>
+                        <a href="#noop"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                        <i>Type : </i>    <code>unknown</code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>&#x27;0.5rem&#x27;</code>
+                        <i>Default value : </i><code>(): void &#x3D;&gt; {
+    /** empty*/
+}</code>
                     </td>
                 </tr>
 
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-description"><p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>
-</div>
-                </td>
-            </tr>
 
         </tbody>
     </table>
@@ -551,57 +542,66 @@
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR"></a>
+                    <a name="RESIZE_DEBOUNCE"></a>
                     <span class="name">
-                        <span ><b>ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR</b></span>
-                        <a href="#ECL_SITE_HEADER_SEARCH_VALUE_ACCESSOR"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>RESIZE_DEBOUNCE</b></span>
+                        <a href="#RESIZE_DEBOUNCE"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://angular.dev/api/core/Provider" target="_blank" >Provider</a></code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() &#x3D;&gt; EclSiteHeaderSearchComponent),
-    multi: true,
-}</code>
+                        <i>Default value : </i><code>200</code>
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
-    <table class="table table-sm table-bordered">
+</section>
+    <h3>packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="noop"></a>
+                    <a name="ARROW_SIZE"></a>
                     <span class="name">
-                        <span ><b>noop</b></span>
-                        <a href="#noop"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>ARROW_SIZE</b></span>
+                        <a href="#ARROW_SIZE"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>    <code>unknown</code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>(): void &#x3D;&gt; {
-    /** empty*/
-}</code>
+                        <i>Default value : </i><code>&#x27;0.5rem&#x27;</code>
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -2406,7 +2406,6 @@
                     <td class="col-md-4">
                         <i>Default value : </i><code>[
     EclPageHeaderComponent,
-    EclPageHeaderNextComponent,
     EclPageHeaderContainerDirective,
     EclPageHeaderExpandableComponent,
     EclPageHeaderExpandableHeaderDirective,

package/docs/overview.html

@@ -129,7 +129,7 @@
             <div class="card text-center">
                 <div class="card-block">
                     <h4 class="card-title"><span class="icon ion-md-cog"></span></h4>
-                    <p class="card-text">131 Components</p>
+                    <p class="card-text">130 Components</p>
                 </div>
             </div>
         </div>

package/docs/properties.html

@@ -128,7 +128,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 22.0.0-alpha.35</li>
+            <b>Version</b> : 22.0.0-alpha.36</li>
     </ul>
 
 

package/fesm2022/eui-ecl-components-ecl-page-header.mjs

@@ -272,7 +272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 /**
  * ECL Page Header component, wraps header content and handles background images and breadcrumb styling.
  */
-class EclPageHeaderNextComponent extends ECLBaseDirective {
+class EclPageHeaderComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
         /**
@@ -314,10 +314,10 @@ class EclPageHeaderNextComponent extends ECLBaseDirective {
             breadcrumb.class = this.BREADCRUMB_CLASS;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderNextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclPageHeaderNextComponent, isStandalone: true, selector: "div[eclPageHeader]", inputs: { hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, descriptionPosition: { classPropertyName: "descriptionPosition", publicName: "descriptionPosition", isSignal: true, isRequired: false, transformFunction: null }, picturePosition: { classPropertyName: "picturePosition", publicName: "picturePosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses" } }, queries: [{ propertyName: "eclBreadcrumbComponent", first: true, predicate: EclBreadcrumbComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclPageHeaderComponent, isStandalone: true, selector: "div[eclPageHeader]", inputs: { hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, descriptionPosition: { classPropertyName: "descriptionPosition", publicName: "descriptionPosition", isSignal: true, isRequired: false, transformFunction: null }, picturePosition: { classPropertyName: "picturePosition", publicName: "picturePosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses" } }, queries: [{ propertyName: "eclBreadcrumbComponent", first: true, predicate: EclBreadcrumbComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderNextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclPageHeader]', imports: [], host: {
                         '[class]': 'cssClasses',
@@ -408,78 +408,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                 }]
         }] });
 
-/**
- * ECL Page Header component, wraps header content and handles background images and breadcrumb styling.
- * @deprecated Use `div[eclPageHeader]` instead. To be removed in v23.
- */
-class EclPageHeaderComponent extends ECLBaseDirective {
-    /**
-     * CSS classes applied to the host.
-     *
-     * @default 'ecl-page-header'
-     * Adds 'ecl-page-header--image' if a background picture exists
-     */
-    get cssClasses() {
-        return [
-            super.getCssClasses('ecl-page-header'),
-            this.hasBackground() ? 'ecl-page-header--background' : '',
-            this.descriptionPosition() ? `ecl-page-header--description-${this.descriptionPosition()}` : '',
-            this.picturePosition() ? `ecl-page-header--picture-${this.picturePosition()}` : '',
-            this.hasPicture ? 'ecl-page-header--image' : '',
-            // this.colorMode() ? `ecl-color-mode--${this.colorMode()}` : '',
-        ]
-            .join(' ')
-            .trim();
-    }
-    constructor() {
-        super();
-        /**
-         * Reference to the ECL breadcrumb inside the header.
-         */
-        this.eclBreadcrumbComponent = contentChild(EclBreadcrumbComponent, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "eclBreadcrumbComponent" }] : /* istanbul ignore next */ []));
-        /**
-         * Reference to the background picture directive, if present.
-         */
-        this.eclBackgroundPicture = contentChild(EclPageHeaderBackgroundPictureDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "eclBackgroundPicture" }] : /* istanbul ignore next */ []));
-        // colorMode = input<string | null>(null);
-        this.hasBackground = input(false, { ...(ngDevMode ? { debugName: "hasBackground" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.descriptionPosition = input('top', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "descriptionPosition" }] : /* istanbul ignore next */ []));
-        this.picturePosition = input('top', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "picturePosition" }] : /* istanbul ignore next */ []));
-        this.BREADCRUMB_CLASS = 'ecl-page-header__breadcrumb';
-        console.warn('"ecl-page-header" selector is deprecated; use "div[eclPageHeader]" instead.');
-    }
-    /**
-     * Adds CSS class to the breadcrumb after content initialization.
-     */
-    ngAfterContentInit() {
-        const eclBreadcrumbComponent = this.eclBreadcrumbComponent();
-        if (eclBreadcrumbComponent) {
-            eclBreadcrumbComponent.class = this.BREADCRUMB_CLASS;
-        }
-    }
-    /**
-     * True if a background picture exists.
-     */
-    get hasPicture() {
-        return !!this.eclBackgroundPicture();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclPageHeaderComponent, isStandalone: true, selector: "ecl-page-header", inputs: { hasBackground: { classPropertyName: "hasBackground", publicName: "hasBackground", isSignal: true, isRequired: false, transformFunction: null }, descriptionPosition: { classPropertyName: "descriptionPosition", publicName: "descriptionPosition", isSignal: true, isRequired: false, transformFunction: null }, picturePosition: { classPropertyName: "picturePosition", publicName: "picturePosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses" } }, queries: [{ propertyName: "eclBreadcrumbComponent", first: true, predicate: EclBreadcrumbComponent, descendants: true, isSignal: true }, { propertyName: "eclBackgroundPicture", first: true, predicate: EclPageHeaderBackgroundPictureDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[eclPageHeaderExpandable]\"></ng-content>\n@if(hasPicture){\n<div class=\"ecl-page-header__background-container\">\n    <ng-content select=\"[eclPageHeaderBackgroundPicture]\"></ng-content>\n</div>\n}\n\n<div class=\"ecl-container\">\n    <ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclPageHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ecl-page-header', imports: [NgTemplateOutlet], host: {
-                        '[class]': 'cssClasses',
-                    }, template: "<ng-content select=\"[eclPageHeaderExpandable]\"></ng-content>\n@if(hasPicture){\n<div class=\"ecl-page-header__background-container\">\n    <ng-content select=\"[eclPageHeaderBackgroundPicture]\"></ng-content>\n</div>\n}\n\n<div class=\"ecl-container\">\n    <ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n</div>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { eclBreadcrumbComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclBreadcrumbComponent), { isSignal: true }] }], eclBackgroundPicture: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclPageHeaderBackgroundPictureDirective), { isSignal: true }] }], hasBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackground", required: false }] }], descriptionPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionPosition", required: false }] }], picturePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "picturePosition", required: false }] }] } });
-
 const EUI_ECL_PAGE_HEADER = [
     EclPageHeaderComponent,
-    EclPageHeaderNextComponent,
     EclPageHeaderContainerDirective,
     EclPageHeaderExpandableComponent,
     EclPageHeaderExpandableHeaderDirective,
@@ -502,5 +432,5 @@ const EUI_ECL_PAGE_HEADER = [
  * Generated bundle index. Do not edit.
  */
 
-export { EUI_ECL_PAGE_HEADER, EclContainerDirective, EclPageHeaderBackgroundImageDirective, EclPageHeaderBackgroundPictureDirective, EclPageHeaderComponent, EclPageHeaderContainerDirective, EclPageHeaderDescriptionContainerComponent, EclPageHeaderDescriptionDirective, EclPageHeaderDescriptionPictureDirective, EclPageHeaderDescriptionThumbnailDirective, EclPageHeaderExpandableComponent, EclPageHeaderExpandableHeaderDirective, EclPageHeaderInfoDirective, EclPageHeaderMetaDirective, EclPageHeaderMetaItemDirective, EclPageHeaderNextComponent, EclPageHeaderSectionComponent, EclPageHeaderSectionInfoComponent, EclPageHeaderTitleDirective };
+export { EUI_ECL_PAGE_HEADER, EclContainerDirective, EclPageHeaderBackgroundImageDirective, EclPageHeaderBackgroundPictureDirective, EclPageHeaderComponent, EclPageHeaderContainerDirective, EclPageHeaderDescriptionContainerComponent, EclPageHeaderDescriptionDirective, EclPageHeaderDescriptionPictureDirective, EclPageHeaderDescriptionThumbnailDirective, EclPageHeaderExpandableComponent, EclPageHeaderExpandableHeaderDirective, EclPageHeaderInfoDirective, EclPageHeaderMetaDirective, EclPageHeaderMetaItemDirective, EclPageHeaderSectionComponent, EclPageHeaderSectionInfoComponent, EclPageHeaderTitleDirective };
 //# sourceMappingURL=eui-ecl-components-ecl-page-header.mjs.map