@eui/ecl 19.3.0-snapshot-1749041696283 → 19.3.0-snapshot-1749064223062

package/docs/components/EclCarouselItemComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Represents a single item (slide) within the ECL Carousel.
+Each slide can optionally include an EclBannerComponent and supports click events.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -408,6 +416,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The unique identifier of the slide.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -429,6 +443,13 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Indicates whether this slide is currently active/visible.
+Automatically coerced to a boolean value.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -496,6 +517,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emits an event when the slide is clicked.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -518,6 +545,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the <code>aria-label</code> attribute on the host element for accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -544,6 +577,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets a more descriptive ARIA role, identifying this element as a slide.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -565,6 +604,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Adds the <code>inert</code> attribute if the slide is not active.
+This disables interaction and focus on inactive slides.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -591,6 +637,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the ARIA <code>role</code> attribute to indicate this is a tab panel.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -612,6 +664,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Computes and binds the slide&#39;s CSS class.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -633,6 +691,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Controls the width of the slide as a percentage.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -659,6 +723,13 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Handles click events on the slide and emits a slideClick event.</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -698,6 +769,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles click events on the slide and emits a slideClick event.</p>
+</div>
 
                         <div class="io-description">
                             <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
@@ -802,6 +875,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the <code>aria-label</code> attribute on the host element for accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -833,6 +912,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Optionally captures a banner component projected into the slide.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -877,6 +962,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Internal slide index, assigned dynamically by the carousel.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -913,6 +1004,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the ARIA <code>role</code> attribute to indicate this is a tab panel.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -949,6 +1046,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets a more descriptive ARIA role, identifying this element as a slide.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -980,6 +1083,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Controls the width of the slide as a percentage.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -1003,6 +1112,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Computes and binds the slide&#39;s CSS class.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -1020,6 +1140,18 @@
                         <span class="accessor"><b>get</b><code>isInert()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Adds the <code>inert</code> attribute if the slide is not active.
+This disables interaction and focus on inactive slides.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>

package/docs/components/EclCategoryFilterComponent.html

@@ -339,6 +339,12 @@
                         <i>Default value : </i><code>&#x27;Category filter&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Aria-label for the navigation role. Defaults to &quot;Category filter&quot;.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -355,6 +361,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>ID of the currently selected item. When provided, the item with the matching ID
+will be marked as current and automatically expanded on initialization.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -431,6 +444,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Defines the ARIA role for the host element. Always set to &quot;navigation&quot;.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -457,6 +476,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Static class applied to the host element for styling.
+Always returns true to include the <code>ecl-category-filter</code> class.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -562,6 +588,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Static class applied to the host element for styling.
+Always returns true to include the <code>ecl-category-filter</code> class.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -660,6 +693,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Defines the ARIA role for the host element. Always set to &quot;navigation&quot;.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/components/EclCategoryFilterItemComponent.html

@@ -339,6 +339,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Link URL associated with this category filter item.
+If not provided, the item acts as a toggle only.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -355,6 +362,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Unique identifier for the item. Used to manage selection state.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -422,6 +435,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Emits when the item is selected by the user (clicked).</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -449,6 +468,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Defines the ARIA role for the list item. Always set to &quot;listitem&quot;.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -475,6 +500,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Static class binding for base list item styling.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -496,6 +527,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Indicates whether the item is expanded. Applied only if the item has children.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -529,6 +566,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles user click interaction, updates state and emits selection event.
+Prevents navigation if no <code>href</code> is defined.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -662,6 +702,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Static class binding for base list item styling.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -693,6 +739,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Child list component if the item has nested children.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -713,6 +765,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Indicates whether the item is currently selected.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -733,6 +791,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Indicates whether the item is currently expanded (open).</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -769,6 +833,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Defines the ARIA role for the list item. Always set to &quot;listitem&quot;.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -792,6 +862,17 @@
                         <span class="accessor"><b>get</b><code>isAriaExpanded()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Indicates whether the item is expanded. Applied only if the item has children.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -809,6 +890,17 @@
                         <span class="accessor"><b>get</b><code>level()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns the hierarchical level of the item within the tree.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
                 <tr>
                     <td class="col-md-4">
@@ -817,6 +909,8 @@
                 </tr>
                     <tr>
                         <td class="col-md-4">
+                                <div class="io-description"><p>Sets the level and updates the level of the child list accordingly.</p>
+</div>
 
                                 <div class="io-description">
                                         <b>Parameters :</b>
@@ -868,6 +962,17 @@
                         <span class="accessor"><b>get</b><code>levelClass()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns the CSS class for the current level of the item.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -885,6 +990,17 @@
                         <span class="accessor"><b>get</b><code>hasChildren()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Indicates whether the item has child elements.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -902,6 +1018,17 @@
                         <span class="accessor"><b>get</b><code>children()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns the child components of this item, if any.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="../interfaces/EclCategoryFilterItem.html" target="_self" >EclCategoryFilterItemComponent[]</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -919,6 +1046,17 @@
                         <span class="accessor"><b>get</b><code>isRootItemWithChildren()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns true if this is a root-level item and has children.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -936,6 +1074,17 @@
                         <span class="accessor"><b>get</b><code>isChildItemWithChildren()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns true if this is a child item and has its own children.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>
@@ -953,6 +1102,17 @@
                         <span class="accessor"><b>get</b><code>isRootItem()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns true if this is a root-level item (level === 1).</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>