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

package/docs/components/EclBannerComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component representing a banner, which can contain image, video and call-to-action (CTA) links.
+Allows customization of layout, alignment, and appearance through inputs.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -431,6 +439,14 @@
                         <i>Default value : </i><code>&#x27;light&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Defines the background color of the banner content box.
+Allowed values: &#39;none&#39; | &#39;light&#39; | &#39;dark&#39;.
+Default: &#39;light&#39;.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -452,6 +468,12 @@
                         <i>Default value : </i><code>&#x27;&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the copyright text displayed in the banner.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -473,6 +495,14 @@
                         <i>Default value : </i><code>&#x27;m&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Defines the size of the banner. Affects its height-to-width aspect ratio.
+Allowed values: &#39;xs&#39; | &#39;s&#39; | &#39;m&#39; | &#39;l&#39;.
+Default: &#39;m&#39;.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -494,6 +524,14 @@
                         <i>Default value : </i><code>&#x27;dark&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Defines the color of the font inside the banner content box.
+Allowed values: &#39;light&#39; | &#39;dark&#39;.
+Default: &#39;dark&#39;.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -515,6 +553,14 @@
                         <i>Default value : </i><code>&#x27;m&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Defines the font size inside the banner content box.
+Allowed values: &#39;m&#39; | &#39;l&#39;.
+Default: &#39;m&#39;.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -536,6 +582,14 @@
                         <i>Default value : </i><code>&#x27;left&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the horizontal alignment of the content inside the banner.
+Allowed values: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;.
+Default: &#39;left&#39;.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -557,6 +611,13 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>When true, the banner stretches to full width of its container.
+Default: false.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -578,6 +639,14 @@
                         <i>Default value : </i><code>&#x27;center&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Sets the vertical alignment of the content inside the banner.
+Allowed values: &#39;top&#39; | &#39;center&#39; | &#39;bottom&#39;.
+Default: &#39;center&#39;.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -708,6 +777,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles keyboard activation (Enter key) to pause video.
+Moves focus to play button after pausing.</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>
@@ -739,6 +811,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles keyboard activation (Enter key) to play video.
+Moves focus to pause button after playing starts.</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>
@@ -770,6 +845,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Pauses the embedded banner video.
+Triggered via interaction (e.g., button).</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>
@@ -801,6 +879,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Plays the embedded banner video.
+Triggered via interaction (e.g., button).</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>
@@ -1209,6 +1290,17 @@
                         <span class="accessor"><b>get</b><code>hasCtaLink()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Indicates whether the banner contains at least one call-to-action link.</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>
@@ -1226,6 +1318,17 @@
                         <span class="accessor"><b>get</b><code>hasImage()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Indicates whether the banner contains an image.</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>
@@ -1243,6 +1346,17 @@
                         <span class="accessor"><b>get</b><code>hasVideo()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Indicates whether the banner contains a video.</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/EclBlockquoteComponent.html

@@ -109,6 +109,15 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Blockquote component based on the ECL design system.
+Displays quoted text with an optional author.
+Supports language awareness through the I18n service.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -344,6 +353,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Author name associated with the quoted content.
+If provided, it will be displayed below the blockquote.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -415,6 +431,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Applies the CSS classes for the blockquote element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -516,6 +538,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Current active language code, retrieved from the I18n service.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -539,6 +567,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 CSS classes for the blockquote 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>
@@ -556,6 +595,17 @@
                         <span class="accessor"><b>get</b><code>hasAuthor()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Checks if an author is provided.</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/EclButtonComponent.html

@@ -109,6 +109,15 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Button component based on ECL design system.
+Can render as a <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> element depending on usage.
+Supports multiple visual variants and optional icon/indicator content.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -344,6 +353,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Optional additional class to apply to the button container.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -365,6 +380,13 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether the button should be styled as icon-only.
+When true, the <code>ecl-button--icon-only</code> class is applied.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -386,6 +408,14 @@
                         <i>Default value : </i><code>&#x27;primary&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Visual variant of the button.
+Can be &#39;primary&#39;, &#39;secondary&#39;, &#39;tertiary&#39;, &#39;cta&#39;, &#39;ghost&#39;, or &#39;ghost-inverted&#39;.
+Defaults to &#39;primary&#39;.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -457,6 +487,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Computes the full set of CSS classes to apply to the button element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -490,6 +526,8 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Manually focuses the button element.</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>
@@ -616,6 +654,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>List of projected icon components inside the button.
+Used internally to detect presence of icons.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -647,6 +692,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Projected indicator element inside the button (e.g., for loading or notification).
+Used internally to detect its presence.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -670,6 +722,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 the full set of CSS classes to apply to the button 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>
@@ -687,6 +750,18 @@
                         <span class="accessor"><b>get</b><code>hasIcon()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Indicates whether the button contains an icon.
+Used internally for styling logic.</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>
@@ -704,6 +779,18 @@
                         <span class="accessor"><b>get</b><code>hasIndicator()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Indicates whether the button contains an indicator element.
+Used internally for styling logic.</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/EclCardBodyComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Card body component based on the ECL design system.
+Provides a wrapper for the main content area of the card.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -317,6 +325,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Computes and returns the CSS class string for the card body element.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -409,6 +423,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 returns the CSS class string for the card body 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>

package/docs/components/EclCardComponent.html

@@ -109,6 +109,14 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Card component based on the ECL design system.
+Combines image, title, and content block areas into a unified card layout.</p>
+
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -401,6 +409,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the ARIA role for the card.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -422,6 +436,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Computes and returns the CSS class string for the card container.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -528,6 +548,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Projected image directive inside the card.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -559,6 +585,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Projected ECL content block inside the card.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -590,6 +622,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Projected content block title directive inside the card.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -626,6 +664,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets the ARIA role for the card.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -649,6 +693,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 returns the CSS class string for the card container.</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>