@eui/components 19.0.3 → 19.0.4-snapshot-1738753092246

package/directives/eui-has-permission.directive.d.ts

@@ -2,22 +2,90 @@ import { TemplateRef, ViewContainerRef } from '@angular/core';
 import { EuiPermissionService } from '@eui/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
+/**
+ * @description
+ * A structural directive that conditionally renders content based on user permissions.
+ * Similar to *ngIf, but checks against a permission service to determine visibility.
+ *
+ * @example
+ * ```html
+ * <!-- Single permission check -->
+ * <div *euiHasPermission="['READ_USERS']">
+ *   Content only visible to users with READ_USERS permission
+ * </div>
+ *
+ * <!-- Multiple permission check (AND operation) -->
+ * <div *euiHasPermission="['READ_USERS', 'WRITE_USERS']">
+ *   Content only visible to users with both permissions
+ * </div>
+ * ```
+ *
+ * @usageNotes
+ * The directive performs an AND operation when multiple permissions are provided,
+ * meaning all permissions must be granted for the content to be displayed.
+ */
 export declare class EuiHasPermissionDirective {
     private templateRef;
     private viewContainer;
     private permissionService;
+    /**
+     * @internal
+     * Array storing the current permission requirements
+     */
     private permissions;
+    /**
+     * @internal
+     * Flag tracking whether the content is currently hidden
+     */
     private isHidden;
     constructor(templateRef: TemplateRef<never>, viewContainer: ViewContainerRef, permissionService: EuiPermissionService);
+    /**
+     * @input
+     * @description
+     * Sets the permissions required to display the content. Can be a single permission
+     * string or an array of permission strings.
+     *
+     * @param val - Permission or array of permissions to check
+     */
     set euiHasPermission(val: any);
+    /**
+     * @internal
+     * @description
+     * Updates the view based on the current permission check results.
+     * If permissions are granted, displays the content.
+     * If permissions are not granted, hides the content.
+     */
     private updateView;
+    /**
+     * @internal
+     * @description
+     * Checks if all required permissions are granted.
+     * Uses AND logic - all permissions must be granted for the method to return true.
+     *
+     * @returns {boolean} True if all permissions are granted, false otherwise
+     */
     private checkPermission;
     static ɵfac: i0.ɵɵFactoryDeclaration<EuiHasPermissionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<EuiHasPermissionDirective, "[euiHasPermission]", never, { "euiHasPermission": { "alias": "euiHasPermission"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EuiHasPermissionDirective, "[euiHasPermission]", never, { "euiHasPermission": { "alias": "euiHasPermission"; "required": false; }; }, {}, never, never, true, never>;
 }
+/**
+ * @description
+ * Angular module that declares and exports the EuiHasPermissionDirective.
+ * Import this module to use the euiHasPermission directive in your components.
+ *
+ * @example
+ * ```typescript
+ * import { EuiHasPermissionDirectiveModule } from '@eui/components';
+ *
+ * @NgModule({
+ *    imports: [EuiHasPermissionDirectiveModule],
+ * })
+ * export class MyModule {}
+ * ```
+ */
 export declare class EuiHasPermissionDirectiveModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EuiHasPermissionDirectiveModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EuiHasPermissionDirectiveModule, [typeof EuiHasPermissionDirective], [typeof i1.CommonModule], [typeof EuiHasPermissionDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EuiHasPermissionDirectiveModule, never, [typeof i1.CommonModule, typeof EuiHasPermissionDirective], [typeof EuiHasPermissionDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EuiHasPermissionDirectiveModule>;
 }
 //# sourceMappingURL=eui-has-permission.directive.d.ts.map

package/directives/eui-has-permission.directive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eui-has-permission.directive.d.ts","sourceRoot":"","sources":["../../directives/eui-has-permission.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,WAAW,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;;;AAGjD,qBAKa,yBAAyB;IAK9B,OAAO,CAAC,WAAW;IACnB,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,iBAAiB;IAN7B,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,QAAQ,CAAQ;gBAGZ,WAAW,EAAE,WAAW,CAAC,KAAK,CAAC,EAC/B,aAAa,EAAE,gBAAgB,EAC/B,iBAAiB,EAAE,oBAAoB;IAGnD,IACI,gBAAgB,CAAC,GAAG,KAAA,EAGvB;IAED,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,eAAe;yCA5Bd,yBAAyB;2CAAzB,yBAAyB;CAoCrC;AAED,qBAKa,+BAA+B;yCAA/B,+BAA+B;0CAA/B,+BAA+B,UA3C/B,yBAAyB,qCAAzB,yBAAyB;0CA2CzB,+BAA+B;CAAG"}
+{"version":3,"file":"eui-has-permission.directive.d.ts","sourceRoot":"","sources":["../../directives/eui-has-permission.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,WAAW,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;;;AAEjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAIa,yBAAyB;IAa9B,OAAO,CAAC,WAAW;IACnB,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,iBAAiB;IAd7B;;;OAGG;IACH,OAAO,CAAC,WAAW,CAAM;IACzB;;;OAGG;IACH,OAAO,CAAC,QAAQ,CAAQ;gBAGZ,WAAW,EAAE,WAAW,CAAC,KAAK,CAAC,EAC/B,aAAa,EAAE,gBAAgB,EAC/B,iBAAiB,EAAE,oBAAoB;IAGnD;;;;;;;OAOG;IACH,IACI,gBAAgB,CAAC,GAAG,KAAA,EAGvB;IAED;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IAYlB;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;yCA3Dd,yBAAyB;2CAAzB,yBAAyB;CAmErC;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAIa,+BAA+B;yCAA/B,+BAA+B;0CAA/B,+BAA+B,yCAxF/B,yBAAyB,WAAzB,yBAAyB;0CAwFzB,+BAA+B;CAAG"}

package/directives/eui-maxlength.directive.d.ts

@@ -3,16 +3,53 @@ import { NgControl } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
+/**
+ * @description
+ * A directive that adds maxLength functionality to input and textarea elements with visual feedback.
+ * It shows the remaining characters count and provides visual indication when the limit is reached.
+ *
+ * @selector input[euiMaxlength], textarea[euiMaxlength], [ngModel][euiMaxlength], [formControlName][euiMaxlength]
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <input [euiMaxlength]="50">
+ *
+ * <!-- With form control -->
+ * <input [formControlName]="'name'" [euiMaxlength]="100">
+ *
+ * <!-- Hide maxlength indicator -->
+ * <textarea [euiMaxlength]="200" [isShowMaxlength]="false"></textarea>
+ * ```
+ *
+ * @publicApi
+ */
 export declare class EuiMaxLengthDirective implements AfterContentInit, OnDestroy, OnChanges {
     private el;
     private renderer;
     private control;
     /**
+     * @description
      * It accepts number values to indicate the maxLength of an input. To reset or disable it set the value to null.
      * NULL value will remove any MaxLength indicator even if another input like isShowMaxlength equals true.
      */
     maxLength: number;
+    /**
+     * @description
+     * Controls the visibility of the maxLength indicator.
+     * When true, shows a counter with remaining characters.
+     * When false, hides the counter but maintains the maxLength restriction.
+     *
+     * @default true
+     */
     isShowMaxlength: boolean;
+    /**
+     * @description
+     * Emits when the input value length reaches or exceeds the maxLength limit.
+     * Emits true when limit is reached, false when below limit.
+     *
+     * @emits {boolean} True when max length is reached, false otherwise
+     */
     maxLengthReached: EventEmitter<boolean>;
     valueChangesSubscription: Subscription;
     private maxLengthSpan;
@@ -25,40 +62,87 @@ export declare class EuiMaxLengthDirective implements AfterContentInit, OnDestro
     onChange(event: Event): void;
     onInput(event: KeyboardEvent): void;
     onPaste(event: ClipboardEvent): void;
+    /**
+     * Sets a custom function to calculate the length of the input value.
+     * Useful for implementing custom length calculation logic (e.g., counting characters differently).
+     *
+     * @param fn Function that takes a string input and returns its calculated length
+     *
+     * @example
+     * ```typescript
+     * // Custom length calculation excluding spaces
+     * directive.setLengthCalcFactory((value: string) => value.replace(/\s/g, '').length);
+     * ```
+     */
     setLengthCalcFactory(fn: (input: string) => number): void;
     /**
-     * calculates the maxLength of an input element. Calculation is made
-     * against the value of the Model or Input Element.
-     * @param value Optional the value to calculate max length against (override the Model one)
+     * Calculates the maximum length for the input element based on current value or provided value.
+     *
+     * @param value Optional value to calculate max length against (overrides the current input value)
+     * @returns {number} Calculated maximum length
      * @private
      */
     private calculateMaxLength;
+    /**
+     * @description
+     * Refreshes the visual state of the maxLength indicator and updates input restrictions.
+     * - Updates the remaining characters count
+     * - Applies/removes error styling
+     * - Emits maxLengthReached event
+     * - Truncates value if it exceeds maxLength
+     *
+     * @private
+     */
     private _refreshValue;
     /**
-     * creates the maxLength box by adding it to DOM and attaching correct Classes
-     * for Wrapper and Span (actual box holding max length)
+     * @description
+     * Creates the maxLength indicator box in the DOM.
+     * Wraps the input element and adds the counter span with appropriate styling.
+     *
      * @private
      */
     private createMaxLengthBox;
     /**
-     * destroys the maxLength box from DOM
+     * @description
+     * Removes the maxLength indicator box from the DOM.
+     * Restores the original DOM structure by unwrapping the input element.
+     *
      * @private
      */
     private destroyMaxLengthBox;
     /**
-     * returns the value based on whether control is present and control's
-     * updateOn strategy.
+     * @description
+     * Returns the current value of the input element.
+     * Handles different update strategies when used with forms.
+     *
+     * @returns {string} Current input value
      * @private
      */
     private getValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<EuiMaxLengthDirective, [null, null, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<EuiMaxLengthDirective, "    input[euiMaxlength],    textarea[euiMaxlength],    [ngModel][euiMaxlength],    [formControlName][euiMaxlength]", never, { "maxLength": { "alias": "euiMaxlength"; "required": false; }; "isShowMaxlength": { "alias": "isShowMaxlength"; "required": false; }; }, { "maxLengthReached": "maxLengthReached"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EuiMaxLengthDirective, "    input[euiMaxlength],    textarea[euiMaxlength],    [ngModel][euiMaxlength],    [formControlName][euiMaxlength]", never, { "maxLength": { "alias": "euiMaxlength"; "required": false; }; "isShowMaxlength": { "alias": "isShowMaxlength"; "required": false; }; }, { "maxLengthReached": "maxLengthReached"; }, never, never, true, never>;
     static ngAcceptInputType_maxLength: unknown;
     static ngAcceptInputType_isShowMaxlength: unknown;
 }
+/**
+ * @description
+ * Module that provides the EuiMaxLengthDirective.
+ * Import this module to use the directive in your application.
+ *
+ * @example
+ * ```typescript
+ * @NgModule({
+ *   imports: [EuiMaxLengthDirectiveModule]
+ * })
+ * export class MyModule { }
+ * ```
+ *
+ * @deprecated Use {@link `EuiMaxLengthDirective`} instead.
+ * @publicApi
+ */
 export declare class EuiMaxLengthDirectiveModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EuiMaxLengthDirectiveModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EuiMaxLengthDirectiveModule, [typeof EuiMaxLengthDirective], [typeof i1.CommonModule], [typeof EuiMaxLengthDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EuiMaxLengthDirectiveModule, never, [typeof i1.CommonModule, typeof EuiMaxLengthDirective], [typeof EuiMaxLengthDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EuiMaxLengthDirectiveModule>;
 }
 //# sourceMappingURL=eui-maxlength.directive.d.ts.map

package/directives/eui-maxlength.directive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eui-maxlength.directive.d.ts","sourceRoot":"","sources":["../../directives/eui-maxlength.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,UAAU,EAGV,gBAAgB,EAEhB,YAAY,EACZ,SAAS,EAIT,SAAS,EACT,aAAa,EACb,SAAS,EAGZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;;;AAGpC,qBAQa,qBAAsB,YAAW,gBAAgB,EAAE,SAAS,EAAE,SAAS;IAepE,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,QAAQ;IACI,OAAO,CAAC,OAAO;IAhB/C;;;OAGG;IAC0D,SAAS,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAQ;IACvF,gBAAgB,EAAE,YAAY,CAAC,OAAO,CAAC,CAA+B;IAEhF,wBAAwB,EAAE,YAAY,CAAC;IAEvC,OAAO,CAAC,aAAa,CAAkB;IACvC,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,YAAY,CAAe;gBAEf,EAAE,EAAE,UAAU,EACd,QAAQ,EAAE,SAAS,EACC,OAAO,EAAE,SAAS;IAK1D,WAAW;IAUX,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IA0BzC,kBAAkB;IAgBlB,QAAQ,CAAC,KAAK,EAAE,KAAK;IAOrB,OAAO,CAAC,KAAK,EAAE,aAAa;IAO5B,OAAO,CAAC,KAAK,EAAE,cAAc;IAUtB,oBAAoB,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI;IAOhE;;;;;OAKG;IACH,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,aAAa;IAkCrB;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IA2B1B;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAoB3B;;;;OAIG;IACH,OAAO,CAAC,QAAQ;yCAnNP,qBAAqB;2CAArB,qBAAqB;wCAiOq5uQ,OAAQ;8CAAtqrO,OAAQ;CAVhyjC;AAED,qBAKa,2BAA2B;yCAA3B,2BAA2B;0CAA3B,2BAA2B,UA9N3B,qBAAqB,qCAArB,qBAAqB;0CA8NrB,2BAA2B;CACvC"}
+{"version":3,"file":"eui-maxlength.directive.d.ts","sourceRoot":"","sources":["../../directives/eui-maxlength.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,UAAU,EAGV,gBAAgB,EAEhB,YAAY,EACZ,SAAS,EAIT,SAAS,EACT,aAAa,EACb,SAAS,EAGZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;;;AAEpC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAQa,qBAAsB,YAAW,gBAAgB,EAAE,SAAS,EAAE,SAAS;IA+BpE,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,QAAQ;IACI,OAAO,CAAC,OAAO;IAhC/C;;;;OAIG;IAC0D,SAAS,EAAE,MAAM,CAAC;IAC/E;;;;;;;OAOG;IACqC,eAAe,UAAQ;IAC/D;;;;;;OAMG;IACO,gBAAgB,EAAE,YAAY,CAAC,OAAO,CAAC,CAA+B;IAEhF,wBAAwB,EAAE,YAAY,CAAC;IAEvC,OAAO,CAAC,aAAa,CAAkB;IACvC,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,YAAY,CAAe;gBAEf,EAAE,EAAE,UAAU,EACd,QAAQ,EAAE,SAAS,EACC,OAAO,EAAE,SAAS;IAK1D,WAAW,IAAI,IAAI;IAUnB,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IA0BzC,kBAAkB,IAAI,IAAI;IAgB1B,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAO5B,OAAO,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAOnC,OAAO,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAUpC;;;;;;;;;;;OAWG;IACI,oBAAoB,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI;IAOhE;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB;IAK1B;;;;;;;;;OASG;IACH,OAAO,CAAC,aAAa;IAkCrB;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB;IA2B1B;;;;;;OAMG;IACH,OAAO,CAAC,mBAAmB;IAoB3B;;;;;;;OAOG;IACH,OAAO,CAAC,QAAQ;yCAlQP,qBAAqB;2CAArB,qBAAqB;wCA8R42pQ,OAAQ;8CAAtqrO,OAAQ;CAxBvv+B;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBAIa,2BAA2B;yCAA3B,2BAA2B;0CAA3B,2BAA2B,yCA5R3B,qBAAqB,WAArB,qBAAqB;0CA4RrB,2BAA2B;CACvC"}

package/docs/components/EuiInputCheckboxComponent.html

@@ -109,6 +109,17 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Angular component that provides a custom checkbox input implementation.
+Extends <a href="../directives/InputDirective.html">InputDirective</a> and implements form control functionality.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;input euiInputCheckBox
+       [(ngModel)]=&quot;isChecked&quot;
+       [indeterminate]=&quot;isIndeterminate&quot;
+       [isInvalid]=&quot;hasError&quot;&gt;</code></pre></div>
+    </p>
 
     <p class="comment">
         <h3>Extends</h3>
@@ -149,6 +160,10 @@
                 <td class="col-md-9"><code>input[euiInputCheckBox]</code></td>
             </tr>
 
+            <tr>
+                <td class="col-md-3">standalone</td>
+                <td class="col-md-9"><code>true</code></td>
+            </tr>
 
 
             <tr>
@@ -413,6 +428,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Controls the checked state of the checkbox.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -431,10 +452,9 @@
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>Whether the checkbox is indeterminate. This is also known as &quot;mixed&quot; mode and can be used to
-represent a checkbox with three states, e.g. a checkbox that represents a nested list of
-checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately
-set to false.</p>
+                        <div class="io-description"><p>Controls the indeterminate (mixed) state of the checkbox.
+When true, the checkbox appears in an indeterminate state.
+This state is automatically cleared when the checkbox is clicked.</p>
 </div>
                     </td>
                 </tr>
@@ -454,6 +474,12 @@ set to false.</p>
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Controls the invalid state of the checkbox. Used for displaying validation errors.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -565,7 +591,7 @@ set to false.</p>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>Event emitted when the checkbox <code>indeterminate</code> value changes.</p>
+                        <div class="io-description"><p>Event emitter that fires when the indeterminate state changes.</p>
 </div>
                     </td>
                 </tr>
@@ -617,6 +643,13 @@ set to false.</p>
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Gets the CSS classes for the checkbox component.
+Combines base classes with validation state classes.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -641,13 +674,50 @@ set to false.</p>
             </tr>
             <tr>
                 <td class="col-md-4">
-<code>change(checked)</code>
+<code>change(checked: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>)</code>
                 </td>
             </tr>
 
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Event handler for checkbox change events.</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>checked</td>
+
+                                            <td>
+                                                    No
+                                            </td>
+
+
+                                            <td>
+                                                    <ul>
+<li>The new checked state</li>
+</ul>
+
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                </td>
+            </tr>
         </tbody>
     </table>
     <table class="table table-sm table-bordered">
@@ -675,6 +745,44 @@ set to false.</p>
 
 
 
+            <tr>
+                <td class="col-md-4">
+                        <div class="io-description"><p>Event handler for space key press.
+Prevents space key action when checkbox is readonly.</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>
@@ -889,6 +997,9 @@ set to false.</p>
 
             <tr>
                 <td class="col-md-4">
+                        <div class="io-description"><p>Implements ControlValueAccessor writeValue method.
+Updates the checked state of the checkbox.</p>
+</div>
 
                             <div class="io-description">
                                 <b>Parameters :</b>
@@ -899,6 +1010,7 @@ set to false.</p>
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Description</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -913,6 +1025,12 @@ set to false.</p>
                                             </td>
 
 
+                                            <td>
+                                                    <ul>
+<li>The value to write</li>
+</ul>
+
+                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -1009,6 +1127,20 @@ set to false.</p>
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Gets the CSS classes for the checkbox component.
+Combines base classes with validation state classes.</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>
@@ -1028,12 +1160,13 @@ set to false.</p>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-description"><p>Whether the checkbox is indeterminate. This is also known as &quot;mixed&quot; mode and can be used to
-represent a checkbox with three states, e.g. a checkbox that represents a nested list of
-checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately
-set to false.</p>
+                                <div class="io-description"><p>Controls the indeterminate (mixed) state of the checkbox.
+When true, the checkbox appears in an indeterminate state.
+This state is automatically cleared when the checkbox is clicked.</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/boolean" target="_blank" >boolean</a></code>
 
@@ -1099,6 +1232,19 @@ set to false.</p>
                         <span class="accessor"><b>get</b><code>isInvalid()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Controls the invalid state of the checkbox. Used for displaying validation errors.</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/boolean" target="_blank" >boolean</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
                 <tr>
                     <td class="col-md-4">
@@ -1158,6 +1304,19 @@ set to false.</p>
                         <span class="accessor"><b>get</b><code>checked()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Controls the checked state of the checkbox.</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/boolean" target="_blank" >boolean</a></code>
+
+                                </div>
+                        </td>
+                    </tr>
 
                 <tr>
                     <td class="col-md-4">

package/docs/components/EuiInputGroupAddOnComponent.html

@@ -109,6 +109,24 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>A component that serves as a container for input group add-on items.
+Can be used either as an attribute selector on a div or as a custom element.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">As an attribute
+```html
+&lt;div euiInputGroupAddOn&gt;
+  &lt;div euiInputGroupAddOnItem&gt;Item 1&lt;/div&gt;
+  &lt;div euiInputGroupAddOnItem&gt;Item 2&lt;/div&gt;
+&lt;/div&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-none">As an element
+```html
+&lt;eui-input-group-addon&gt;
+  &lt;eui-input-group-addon-item&gt;Item 1&lt;/eui-input-group-addon-item&gt;
+  &lt;eui-input-group-addon-item&gt;Item 2&lt;/eui-input-group-addon-item&gt;
+&lt;/eui-input-group-addon&gt;</code></pre></div>
+    </p>
 
 
 
@@ -134,6 +152,10 @@
                 <td class="col-md-9"><code>div[euiInputGroupAddOn], eui-input-group-addon</code></td>
             </tr>
 
+            <tr>
+                <td class="col-md-3">standalone</td>
+                <td class="col-md-9"><code>true</code></td>
+            </tr>
 
 
             <tr>

package/docs/components/EuiInputGroupAddOnItemComponent.html

@@ -109,6 +109,18 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>A component that represents an individual item within an input group add-on.
+Can be used either as an attribute selector on a div or as a custom element.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">As an attribute
+```html
+&lt;div euiInputGroupAddOnItem&gt;Content&lt;/div&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-none">As an element
+```html
+&lt;eui-input-group-addon-item&gt;Content&lt;/eui-input-group-addon-item&gt;</code></pre></div>
+    </p>
 
 
 
@@ -134,6 +146,10 @@
                 <td class="col-md-9"><code>div[euiInputGroupAddOnItem], eui-input-group-addon-item</code></td>
             </tr>
 
+            <tr>
+                <td class="col-md-3">standalone</td>
+                <td class="col-md-9"><code>true</code></td>
+            </tr>
 
 
             <tr>
@@ -286,6 +302,20 @@
                         <span class="accessor"><b>get</b><code>cssClasses()</code></span>
                     </td>
                 </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-description"><p>Getter that returns the CSS class for the component.
+Bound to the host element&#39;s class attribute.</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>