@eui/components 19.1.1-snapshot-1741071838252 → 19.1.1

package/docs/components/EuiIconToggleComponent.html

@@ -109,6 +109,22 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component that provides a toggleable icon button with accessibility support.
+Functions as a switch control that can be toggled between on/off states,
+displaying different icons based on the current state.</p>
+<p>This component handles keyboard navigation, focus management, and proper
+ARIA attributes for accessibility compliance.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-icon-toggle
+  [isChecked]=&quot;true&quot;
+  iconSvgNameOn=&quot;check&quot;
+  iconSvgNameOff=&quot;close&quot;
+  (toggle)=&quot;handleToggle($event)&quot;&gt;
+&lt;/eui-icon-toggle&gt;</code></pre></div>
+    </p>
 
 
     <p class="comment">
@@ -146,6 +162,12 @@
             </tr>
 
 
+            <tr>
+                <td class="col-md-3">imports</td>
+                <td class="col-md-9">
+                                <code><a href="../modules/EuiIconModule.html" target="_self" >EuiIconModule</a></code>
+                </td>
+            </tr>
 
             <tr>
                 <td class="col-md-3">styleUrls</td>
@@ -330,6 +352,12 @@
                         <i>Default value : </i><code>&#x27;Toggle icon&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Accessible label for screen readers.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -351,6 +379,12 @@
                         <i>Default value : </i><code>&#x27;eui-icon-toggle&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Data attribute for e2e testing.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -372,6 +406,12 @@
                         <i>Default value : </i><code>&#x27;neutral&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Color of the icon when toggle is in the OFF state.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -393,6 +433,12 @@
                         <i>Default value : </i><code>&#x27;accent&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Color of the icon when toggle is in the ON state.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -409,6 +455,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Icon to display when toggle is in the OFF state.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -425,6 +477,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Icon to display when toggle is in the ON state.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -446,6 +504,12 @@
                         <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 icon (s, m, l, xl).</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -467,6 +531,12 @@
                         <i>Default value : </i><code>&#x60;eui-icon-toggle-${uniqueId()}&#x60;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Unique identifier for the component.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -488,6 +558,13 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether the toggle is in the checked/on state.
+Bound to aria-checked attribute for accessibility.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -504,6 +581,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether the toggle is read-only (cannot be interacted with).
+When true, tabindex is set to -1 and clicking will not change state.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -525,6 +609,12 @@
                         <i>Default value : </i><code>&#x27;i&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Keyboard shortcut key.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -546,6 +636,12 @@
                         <i>Default value : </i><code>&#x27;0&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Tab order value for keyboard navigation.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -565,6 +661,13 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the toggle state changes.
+Emits the new state (true = checked, false = unchecked).</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -639,6 +742,14 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Host listener that handles click events on the component.
+Triggers the toggle action if the component is not read-only.</p>
+</div>
+
+                </td>
+            </tr>
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -666,6 +777,44 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Host listener that handles keyboard events.
+Triggers the toggle action on Enter or Space key press.</p>
+</div>
+
+                            <div class="io-description">
+                                <b>Parameters :</b>
+                                
+                                <table class="params">
+                                    <thead>
+                                        <tr>
+                                            <td>Name</td>
+                                            <td>Optional</td>
+                                                <td>Description</td>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                                <td>event</td>
+
+                                            <td>
+                                                    No
+                                            </td>
+
+
+                                            <td>
+                                                    <ul>
+<li>The keyboard event</li>
+</ul>
+
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>

package/docs/components/EuiListComponent.html

@@ -109,6 +109,26 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component that provides a navigable list implementation with keyboard interaction support.
+Works with Angular CDK&#39;s FocusKeyManager to enable keyboard navigation between list items.</p>
+<p>The component automatically manages focus between nested lists and supports rich content
+navigation. It can contain multiple EuiListItemComponents as children.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-list&gt;
+  &lt;eui-list-item&gt;First item&lt;/eui-list-item&gt;
+  &lt;eui-list-item&gt;Second item&lt;/eui-list-item&gt;
+  &lt;eui-list-item&gt;
+    Item with nested list
+    &lt;eui-list&gt;
+      &lt;eui-list-item&gt;Nested item 1&lt;/eui-list-item&gt;
+      &lt;eui-list-item&gt;Nested item 2&lt;/eui-list-item&gt;
+    &lt;/eui-list&gt;
+  &lt;/eui-list-item&gt;
+&lt;/eui-list&gt;</code></pre></div>
+    </p>
 
 
     <p class="comment">
@@ -299,6 +319,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the &#39;list&#39; ARIA role to the host element for accessibility.
+This informs screen readers that this component functions as a list.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -320,6 +347,14 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the tabIndex attribute to the host element.
+Controls whether the list can receive keyboard focus.
+Set to &#39;0&#39; for top-level lists and &#39;-1&#39; for nested lists.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -341,6 +376,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>CSS class binding that applies the &#39;eui-list&#39; class to the host element.
+This class applies the basic styling for the list component.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -372,6 +414,44 @@
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Handles keyboard events for navigating the list.
+Supports Enter key for selection and arrow keys for navigation.</p>
+</div>
+
+                            <div class="io-description">
+                                <b>Parameters :</b>
+                                
+                                <table class="params">
+                                    <thead>
+                                        <tr>
+                                            <td>Name</td>
+                                            <td>Optional</td>
+                                                <td>Description</td>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                                <td>event</td>
+
+                                            <td>
+                                                    No
+                                            </td>
+
+
+                                            <td>
+                                                    <ul>
+<li>The keyboard event to handle</li>
+</ul>
+
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
@@ -402,6 +482,10 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Manages focus state of rich content navigation within list items.
+Handles the focus transition between list item elements and their navigable content.
+Called when right/left arrow keys are pressed on items with navigable content.</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>
@@ -442,6 +526,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Handles keyboard events for navigating the list.
+Supports Enter key for selection and arrow keys for navigation.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -452,6 +539,7 @@
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -466,6 +554,12 @@
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The keyboard event to handle</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -515,6 +609,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Collection of all list item components that are children of this list.
+Includes items from nested lists due to the &#39;descendants: true&#39; option.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -551,6 +652,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the &#39;list&#39; ARIA role to the host element for accessibility.
+This informs screen readers that this component functions as a list.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -582,6 +690,14 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Binds the tabIndex attribute to the host element.
+Controls whether the list can receive keyboard focus.
+Set to &#39;0&#39; for top-level lists and &#39;-1&#39; for nested lists.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -605,6 +721,20 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>CSS class binding that applies the &#39;eui-list&#39; class to the host element.
+This class applies the basic styling for the list component.</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/EuiListItemComponent.html

@@ -109,6 +109,21 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component that represents a single item within an EuiList.
+Implements FocusableOption and Highlightable for keyboard navigation and accessibility.</p>
+<p>This component is designed to work with the EuiListComponent as part of a navigable list.
+It supports various display states through the BaseStatesDirective, and can contain
+nested list components, icons, labels, and custom templates.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-list&gt;
+  &lt;eui-list-item&gt;Simple item&lt;/eui-list-item&gt;
+  &lt;eui-list-item [euiPrimary]=&quot;true&quot;&gt;Primary item&lt;/eui-list-item&gt;
+  &lt;eui-list-item [isActive]=&quot;true&quot;&gt;Active item&lt;/eui-list-item&gt;
+&lt;/eui-list&gt;</code></pre></div>
+    </p>
 
 
     <p class="comment">
@@ -517,6 +532,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Programmatically triggers a click event on the list item element.
+Typically, invoked when the user presses Enter while the item is focused.</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>
@@ -550,6 +568,9 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Sets focus on the list item element.
+Used by the FocusKeyManager to handle keyboard navigation within the list.</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>
@@ -583,6 +604,10 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Applies active styling to the list item.
+Called by the FocusKeyManager when this item becomes the active item in the list.
+Sets the isActive flag to true, which adds the &#39;eui-list-item--active&#39; CSS class.</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 +641,10 @@
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Removes active styling from the list item.
+Called by the FocusKeyManager when another item becomes the active item.
+Sets the isActive flag to false, removing the &#39;eui-list-item--active&#39; CSS class.</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>