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

package/docs/components/EclIconComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>ECL icon component – renders SVG icons from various sets depending on current theme.
+Integrates with ECL theming and supports accessibility options.</p>
+
+    </p>
 
 
     <p class="comment">
@@ -391,6 +399,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Determines whether the icon should be hidden from assistive technologies.
+Defaults to <code>true</code> unless a title is provided.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -407,6 +422,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>ID reference for an external element that labels this icon for screen readers.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -428,6 +449,13 @@
                         <i>Default value : </i><code>null</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Applies color styling to the icon.
+Use <code>&#39;inverted&#39;</code> for icons on dark backgrounds, or <code>&#39;primary&#39;</code> for emphasis.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -449,6 +477,13 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Controls whether the icon is focusable via keyboard.
+Defaults to <code>false</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -465,6 +500,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Name of the icon to render from the selected set.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -486,6 +527,14 @@
                         <i>Default value : </i><code>&#x27;default&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Defines the icon set to use.
+Available sets: <code>default</code>, <code>social</code>, <code>social-media</code>, <code>flag</code>, or a custom URL prefix.
+Defaults to <code>&#39;default&#39;</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -507,6 +556,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Flips the icon horizontally if set to <code>true</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -523,6 +578,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>ARIA role of the icon. If a <code>title</code> is provided and no role is defined, defaults to <code>&#39;img&#39;</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -544,6 +605,14 @@
                         <i>Default value : </i><code>&#x27;xs&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Size of the icon.
+Supported values: <code>&#39;2xs&#39;</code>, <code>&#39;xs&#39;</code>, <code>&#39;s&#39;</code>, <code>&#39;m&#39;</code>, <code>&#39;l&#39;</code>, <code>&#39;xl&#39;</code>, <code>&#39;2xl&#39;</code>, <code>&#39;fluid&#39;</code>.
+Defaults to <code>&#39;xs&#39;</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -560,6 +629,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Title used for accessibility. Also affects <code>aria-hidden</code> and <code>role</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -576,6 +651,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Adds a transformation modifier to the icon (e.g., rotation).</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -599,6 +680,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Adds a dark background utility class if the color is set to <code>&#39;inverted&#39;</code>.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -632,6 +719,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Returns a map of CSS classes applied to the icon.
+Includes classes for size, color, transform, and base ECL styles.</p>
+</div>
 
                         <div class="io-description">
                             <b>Returns : </b>    <code>literal type</code>
@@ -762,6 +852,17 @@
                         <span class="accessor"><b>get</b><code>isColorInverted()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Adds a dark background utility class if the color is set to <code>&#39;inverted&#39;</code>.</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/EclListIllustrationComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component representing a list using ECL illustration styles.</p>
+<p>Supports zebra styling, responsive horizontal layout, and font size options.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -335,6 +343,17 @@
                         <i>Default value : </i><code>&#x27;l&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Font size for list content.
+Possible values:</p>
+<ul>
+<li><code>&#39;m&#39;</code> – medium</li>
+<li><code>&#39;l&#39;</code> – large (default)</li>
+</ul>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -356,6 +375,12 @@
                         <i>Default value : </i><code>0</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Number of horizontal columns. If greater than <code>0</code>, items are displayed in a grid layout.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -377,6 +402,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Enables zebra style (alternating background colors for list items).</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -453,6 +484,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies ARIA role for list elements.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -474,6 +511,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the appropriate ECL CSS classes to the host element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -495,6 +538,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Controls <code>display</code> style of the host element based on breakpoint and column count.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -606,6 +655,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies ARIA role for list elements.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -629,6 +684,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Applies the appropriate ECL CSS classes to the host element.</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>
@@ -646,6 +712,17 @@
                         <span class="accessor"><b>get</b><code>elementDisplayStyle()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Controls <code>display</code> style of the host element based on breakpoint and column count.</p>
+</div>
+
+                                <div class="io-description">
+                                    <b>Returns : </b>    <code>string | null</code>
+
+                                </div>
+                        </td>
+                    </tr>
 
             </tbody>
         </table>

package/docs/components/EclListIllustrationItemComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component representing a single item in an ECL illustration list.</p>
+<p>Displays optional title, value, and one or more illustration icons.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -294,6 +302,12 @@
                         <i>Default value : </i><code>&#x27;&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Text displayed as the item title.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -315,6 +329,12 @@
                         <i>Default value : </i><code>&#x27;&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Text displayed as the item value.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -391,6 +411,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies ARIA role for list items.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -417,6 +443,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies ECL class for illustration list item.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -522,6 +554,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies ECL class for illustration list item.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -589,6 +627,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies ARIA role for list items.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -612,6 +656,17 @@
                         <span class="accessor"><b>get</b><code>hasTitle()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns <code>true</code> if the item has a title or any projected icons.</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>
@@ -629,6 +684,17 @@
                         <span class="accessor"><b>get</b><code>hasValue()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Returns <code>true</code> if the item has a value.</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/EclLoadingIndicatorComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component representing a loading indicator (spinner) using ECL styles.</p>
+<p>Supports different sizes, color variants, centering and visibility options.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -289,6 +297,13 @@
                         <i>Default value : </i><code>true</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Controls whether the spinner should be centered.</p>
+<p>Defaults to <code>true</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -310,6 +325,14 @@
                         <i>Default value : </i><code>true</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Controls visibility of the spinner.</p>
+<p>When set to <code>false</code>, the spinner will be hidden via CSS.</p>
+<p>Defaults to <code>true</code>.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -331,6 +354,18 @@
                         <i>Default value : </i><code>&#x27;m&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Size of the spinner.</p>
+<p>Possible values:</p>
+<ul>
+<li><code>&#39;s&#39;</code> – small</li>
+<li><code>&#39;m&#39;</code> – medium (default)</li>
+<li><code>&#39;l&#39;</code> – large</li>
+</ul>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -352,6 +387,17 @@
                         <i>Default value : </i><code>&#x27;primary&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Variant of the spinner color.</p>
+<p>Possible values:</p>
+<ul>
+<li><code>&#39;primary&#39;</code> – default appearance</li>
+<li><code>&#39;inverted&#39;</code> – used on dark backgrounds</li>
+</ul>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -428,6 +474,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies ARIA role for accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -449,6 +501,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies CSS classes based on size, variant and visibility settings.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -560,6 +618,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies ARIA role for accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -583,6 +647,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Applies CSS classes based on size, variant and visibility settings.</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>

package/docs/components/EclModalBodyComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Body component used inside the ECL Modal.</p>
+<p>Optionally allows scrollable content inside the modal body.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -262,6 +270,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>When true, adds a modifier class to allow scrollable content inside the modal body.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -333,6 +347,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies CSS classes for the modal body and scrollable modifier if enabled.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -425,6 +445,17 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Applies CSS classes for the modal body and scrollable modifier if enabled.</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>