@eui/components 19.1.1-snapshot-1741071838252 → 19.1.1

package/docs/components/EuiAvatarListComponent.html

@@ -109,6 +109,30 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component for displaying a list of avatars.
+This component serves as a container that arranges multiple avatars in a visually
+coherent group, typically with slight overlapping to save space.</p>
+<p>The component uses content projection to allow placing multiple avatar components
+within it and applies appropriate styling via the &#39;eui-avatar-list&#39; CSS class.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">// Basic usage with multiple avatars:
+&lt;eui-avatar-list&gt;
+  &lt;eui-avatar&gt;
+    &lt;eui-avatar-image imageUrl=&quot;path/to/image1.jpg&quot;&gt;&lt;/eui-avatar-image&gt;
+  &lt;/eui-avatar&gt;
+  &lt;eui-avatar&gt;
+    &lt;eui-avatar-image imageUrl=&quot;path/to/image2.jpg&quot;&gt;&lt;/eui-avatar-image&gt;
+  &lt;/eui-avatar&gt;
+  &lt;eui-avatar&gt;
+    &lt;eui-avatar-icon&gt;
+      &lt;eui-icon name=&quot;user&quot;&gt;&lt;/eui-icon&gt;
+    &lt;/eui-avatar-icon&gt;
+  &lt;/eui-avatar&gt;
+&lt;/eui-avatar-list&gt;</code></pre></div>
+    </p>
 
 
 
@@ -223,6 +247,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the CSS class &#39;eui-avatar-list&#39; to the host element.
+This class provides the styling necessary for arranging avatars in a list.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -249,6 +280,20 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Binds the CSS class &#39;eui-avatar-list&#39; to the host element.
+This class provides the styling necessary for arranging avatars in a list.</p>
+</div>
+
+                                <div>
+                                </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/EuiAvatarTextComponent.html

@@ -109,6 +109,30 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component for displaying text content within an avatar.
+This component serves as a container for text that appears inside an avatar,
+such as initials or short text identifiers.</p>
+<p>The component applies the &#39;eui-avatar-text&#39; class to provide appropriate styling
+for text displayed within an avatar context. It uses content projection to allow
+any text content to be displayed inside.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">// Basic usage with initials:
+&lt;eui-avatar&gt;
+  &lt;eui-avatar-text&gt;JD&lt;/eui-avatar-text&gt;
+&lt;/eui-avatar&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">// With a single character:
+&lt;eui-avatar&gt;
+  &lt;eui-avatar-text&gt;A&lt;/eui-avatar-text&gt;
+&lt;/eui-avatar&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">// Used with other avatar components:
+&lt;eui-avatar&gt;
+  &lt;eui-avatar-text&gt;BN&lt;/eui-avatar-text&gt;
+  &lt;eui-avatar-badge position=&quot;bottom&quot;&gt;
+    &lt;span class=&quot;status-indicator&quot;&gt;&lt;/span&gt;
+  &lt;/eui-avatar-badge&gt;
+&lt;/eui-avatar&gt;</code></pre></div>
+    </p>
 
 
 
@@ -229,6 +253,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the CSS class &#39;eui-avatar-text&#39; to the host element.
+This class provides the styling necessary for text content within an avatar.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -274,6 +305,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the CSS class &#39;eui-avatar-text&#39; to the host element.
+This class provides the styling necessary for text content within an avatar.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/components/EuiDiscussionThreadComponent.html

@@ -109,6 +109,27 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component for displaying a discussion thread or conversation timeline.
+This component renders a list of discussion thread items in a structured format,
+with support for titles, subtitles, and tooltips for additional context.</p>
+<p>The component applies the ARIA role &#39;list&#39; to the host element to maintain proper
+accessibility for screen readers.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">// Basic usage with thread items:
+&lt;eui-discussion-thread
+  [items]=&quot;discussionItems&quot;
+  titleLabel=&quot;Discussion&quot;
+  subTitleLabel=&quot;Recent activity&quot;&gt;
+&lt;/eui-discussion-thread&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">// With tooltip:
+&lt;eui-discussion-thread
+  [items]=&quot;discussionItems&quot;
+  titleLabel=&quot;Comments&quot;
+  tooltip=&quot;Click on a comment to view details&quot;&gt;
+&lt;/eui-discussion-thread&gt;</code></pre></div>
+    </p>
 
 
 
@@ -261,6 +282,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Array of discussion thread items to be displayed.
+Each item should conform to the EuiDiscussionThreadItem interface.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -277,6 +305,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The subtitle label for the discussion thread, typically used to provide
+additional context or categorization.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -293,6 +328,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>The main title label for the discussion thread.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -309,6 +350,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Tooltip text to display when hovering over the discussion thread.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -337,6 +384,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>ARIA role for the host element to ensure proper accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -372,6 +425,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Track by function for ngFor directive to improve rendering performance.
+Uses the id property of each discussion thread item.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -382,6 +438,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -396,6 +453,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The index of the current item in the array</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                         <tr>
                                                 <td>item</td>
@@ -408,6 +471,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The current discussion thread item</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -417,7 +486,8 @@
 
                         </div>
                             <div class="io-description">
-                                
+                                <p>The unique identifier for the item</p>
+
                             </div>
                 </td>
             </tr>
@@ -462,6 +532,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>ARIA role for the host element to ensure proper accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>

package/docs/components/EuiDiscussionThreadItemComponent.html

@@ -109,6 +109,35 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component for displaying individual items within a discussion thread.
+This component represents a single entry in a conversation or thread timeline,
+displaying information such as the author, date, content body, and optional tooltip.</p>
+<p>The component applies the ARIA role &#39;listitem&#39; to maintain proper accessibility
+and includes support for styling variants through the typeClass property.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">// Basic usage within a discussion thread:
+&lt;eui-discussion-thread&gt;
+  &lt;eui-discussion-thread-item
+    id=&quot;msg-123&quot;
+    typeClass=&quot;info&quot;
+    date=&quot;2023-10-15T14:30:00&quot;
+    author=&quot;John Doe&quot;
+    body=&quot;This is a comment in the discussion.&quot;
+    tooltip=&quot;Posted yesterday&quot;&gt;
+  &lt;/eui-discussion-thread-item&gt;
+&lt;/eui-discussion-thread&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">// With different type classes for styling:
+&lt;eui-discussion-thread-item
+  id=&quot;msg-456&quot;
+  typeClass=&quot;warning&quot;
+  date=&quot;2023-10-16T09:15:00&quot;
+  author=&quot;Jane Smith&quot;
+  body=&quot;Important note about this topic.&quot;
+  [isOdd]=&quot;true&quot;&gt;
+&lt;/eui-discussion-thread-item&gt;</code></pre></div>
+    </p>
 
 
 
@@ -267,6 +296,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Name or identifier of the author who created the item.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -283,6 +318,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Content body of the discussion thread item.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -299,6 +340,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Date when the thread item was created or modified.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -315,6 +362,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Unique identifier for the discussion thread item.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -331,6 +384,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Indicates if this item is in an odd position in the list.
+Used for alternating styling patterns within the thread.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -347,6 +407,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Tooltip text to display additional information when hovering over the item.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -363,6 +429,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Type class defining the visual style of the item (e.g., &#39;info&#39;, &#39;warning&#39;, &#39;error&#39;).
+This affects the color scheme applied to the item.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -391,6 +464,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>ARIA role for the host element to ensure proper accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -412,6 +491,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Sets CSS classes on the host element based on the typeClass property.
+This helps maintain consistent styling with the parent theme variant.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -457,6 +543,12 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>ARIA role for the host element to ensure proper accessibility.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -480,6 +572,20 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Sets CSS classes on the host element based on the typeClass property.
+This helps maintain consistent styling with the parent theme variant.</p>
+</div>
+
+                                <div>
+                                </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>
@@ -497,6 +603,18 @@
                         <span class="accessor"><b>get</b><code>isOdd()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Indicates if this item is in an odd position in the list.
+Used for alternating styling patterns within the thread.</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>
 
                 <tr>
                     <td class="col-md-4">