wcs-core 4.2.0 → 5.0.0

package/dist/types/components.d.ts

@@ -5,51 +5,53 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { BadgeColor, BadgeShape } from "./components/badge/badge-interface";
+import { BadgeColor, BadgeShape, BadgeSize } from "./components/badge/badge-interface";
 import { WcsButtonMode, WcsButtonShape, WcsButtonSize, WcsButtonType } from "./components/button/button-interface";
 import { CardMode } from "./components/card/card-interface";
 import { CheckboxChangeEventDetail, CheckboxLabelAlignment } from "./components/checkbox/checkbox-interface";
+import { AriaAttributeName } from "./utils/mutable-aria-attribute";
 import { CategoryOpenedEventDetail, MenuOpenedEventDetail } from "./components/com-nav/com-nav-interface";
 import { CounterChangeEventDetail, WcsCounterSize } from "./components/counter/counter-interface";
 import { WcsDropdownPlacement } from "./components/dropdown/dropdown-interface";
 import { EditableComponentUpdateEvent, EditableFieldType, FormatFn, ValidateFn, WcsEditableFieldSize } from "./components/editable-field/editable-field-interface";
-import { WcsCellFormatter, WcsGridAllRowSelectedEventDetails, WcsGridColumnSortChangeEventDetails, WcsGridPaginationChangeEventDetails, WcsGridRowSelectedEventDetails, WcsGridSelectionConfig, WcsSortFn, WcsSortOrder } from "./components/grid/grid-interface";
+import { WcsCellFormatter, WcsGridAllRowSelectedEventDetails, WcsGridColumnSortChangeEventDetails, WcsGridPaginationChangeEventDetails, WcsGridSelectionConfig, WcsGridSelectionEventDetails, WcsSortFn, WcsSortOrder } from "./components/grid/grid-interface";
 import { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode } from "./components/horizontal-stepper/horizontal-stepper-interface";
 import { AutocompleteTypes, InputChangeEventDetail, TextFieldTypes, WcsInputSize } from "./components/input/input-interface";
 import { MaterialIconFamily, MaterialIconSize } from "./components/mat-icon/mat-icon-interface";
 import { ModalSize } from "./components/modal/modal-interface";
 import { WcsNativeSelectSize } from "./components/native-select/native-select";
+import { CssTypes, WcsSize } from "./shared-types";
 import { RadioGroupChangeEventDetail, RadioGroupMode } from "./components/radio-group/radio-group-interface";
 import { RadioChosedEvent } from "./components/radio/radio-interface";
-import { SelectChangeEventDetail, WcsSelectSize } from "./components/select/select-interface";
+import { SelectChangeEventDetail, SelectFilerChangeEventDetail, WcsSelectFilterFn, WcsSelectSize } from "./components/select/select-interface";
 import { SelectOptionChosedEvent } from "./components/select-option/select-option-interface";
 import { WcsSkeletonAnimation } from "./components/skeleton/skeleton-interface";
-import { CssTypes } from "./shared-types";
 import { WcsSpinnerMode } from "./components/spinner/spinner-interface";
 import { SwitchChangeEventDetail, SwitchLabelAlignment } from "./components/switch/switch-interface";
 import { WcsTabChangeEvent, WcsTabsAlignment } from "./components/tabs/tabs-interface";
 import { TextareaChangeEventDetail } from "./components/textarea/textarea-interface";
 import { WcsTooltipAppendTo, WcsTooltipPosition } from "./components/tooltip/tooltip-interface";
-export { BadgeColor, BadgeShape } from "./components/badge/badge-interface";
+export { BadgeColor, BadgeShape, BadgeSize } from "./components/badge/badge-interface";
 export { WcsButtonMode, WcsButtonShape, WcsButtonSize, WcsButtonType } from "./components/button/button-interface";
 export { CardMode } from "./components/card/card-interface";
 export { CheckboxChangeEventDetail, CheckboxLabelAlignment } from "./components/checkbox/checkbox-interface";
+export { AriaAttributeName } from "./utils/mutable-aria-attribute";
 export { CategoryOpenedEventDetail, MenuOpenedEventDetail } from "./components/com-nav/com-nav-interface";
 export { CounterChangeEventDetail, WcsCounterSize } from "./components/counter/counter-interface";
 export { WcsDropdownPlacement } from "./components/dropdown/dropdown-interface";
 export { EditableComponentUpdateEvent, EditableFieldType, FormatFn, ValidateFn, WcsEditableFieldSize } from "./components/editable-field/editable-field-interface";
-export { WcsCellFormatter, WcsGridAllRowSelectedEventDetails, WcsGridColumnSortChangeEventDetails, WcsGridPaginationChangeEventDetails, WcsGridRowSelectedEventDetails, WcsGridSelectionConfig, WcsSortFn, WcsSortOrder } from "./components/grid/grid-interface";
+export { WcsCellFormatter, WcsGridAllRowSelectedEventDetails, WcsGridColumnSortChangeEventDetails, WcsGridPaginationChangeEventDetails, WcsGridSelectionConfig, WcsGridSelectionEventDetails, WcsSortFn, WcsSortOrder } from "./components/grid/grid-interface";
 export { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode } from "./components/horizontal-stepper/horizontal-stepper-interface";
 export { AutocompleteTypes, InputChangeEventDetail, TextFieldTypes, WcsInputSize } from "./components/input/input-interface";
 export { MaterialIconFamily, MaterialIconSize } from "./components/mat-icon/mat-icon-interface";
 export { ModalSize } from "./components/modal/modal-interface";
 export { WcsNativeSelectSize } from "./components/native-select/native-select";
+export { CssTypes, WcsSize } from "./shared-types";
 export { RadioGroupChangeEventDetail, RadioGroupMode } from "./components/radio-group/radio-group-interface";
 export { RadioChosedEvent } from "./components/radio/radio-interface";
-export { SelectChangeEventDetail, WcsSelectSize } from "./components/select/select-interface";
+export { SelectChangeEventDetail, SelectFilerChangeEventDetail, WcsSelectFilterFn, WcsSelectSize } from "./components/select/select-interface";
 export { SelectOptionChosedEvent } from "./components/select-option/select-option-interface";
 export { WcsSkeletonAnimation } from "./components/skeleton/skeleton-interface";
-export { CssTypes } from "./shared-types";
 export { WcsSpinnerMode } from "./components/spinner/spinner-interface";
 export { SwitchChangeEventDetail, SwitchLabelAlignment } from "./components/switch/switch-interface";
 export { WcsTabChangeEvent, WcsTabsAlignment } from "./components/tabs/tabs-interface";
@@ -107,6 +109,10 @@ export namespace Components {
           * Define the shape of the badge
          */
         "shape": BadgeShape;
+        /**
+          * Specify the size of the badge.
+         */
+        "size": BadgeSize;
     }
     /**
      * Button component, can also be a link when specifying href.
@@ -178,6 +184,7 @@ export namespace Components {
          */
         "labelAlignment": CheckboxLabelAlignment;
         "name": string;
+        "setAriaAttribute": (attr: AriaAttributeName, value: string) => Promise<void>;
     }
     interface WcsComNav {
         /**
@@ -214,6 +221,10 @@ export namespace Components {
      * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)
      */
     interface WcsCounter {
+        /**
+          * Specify whether the counter is disabled or not.
+         */
+        "disabled": boolean;
         /**
           * The label of the counter.<br/> e.g. Number of passengers, train carriages, railroad tracks...
          */
@@ -226,6 +237,7 @@ export namespace Components {
           * The minimum value of the counter. If the value of the min attribute isn't set, then the element has no minimum value.
          */
         "min"?: number;
+        "setAriaAttribute": (attr: AriaAttributeName, value: string) => Promise<void>;
         /**
           * Specify the size (height) of the counter.
          */
@@ -241,6 +253,10 @@ export namespace Components {
     }
     interface WcsDivider {
     }
+    /**
+     * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the
+     * dropdown.
+     */
     interface WcsDropdown {
         /**
           * Specifies whether the dropdown button is clickable or not
@@ -262,11 +278,24 @@ export namespace Components {
           * Dropdown's button shape
          */
         "shape": WcsButtonShape;
+        /**
+          * Dropdown's button size
+         */
+        "size": WcsButtonSize;
     }
+    /**
+     * You can add a divider between groups of items
+     */
     interface WcsDropdownDivider {
     }
+    /**
+     * You can add `wcs-dropdown-header` before a group of items to describe it
+     */
     interface WcsDropdownHeader {
     }
+    /**
+     * You must add `wcs-dropdown-item` to `wcs-dropdown`
+     */
     interface WcsDropdownItem {
     }
     interface WcsEditableField {
@@ -376,6 +405,14 @@ export namespace Components {
      * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column
      */
     interface WcsGridColumn {
+        /**
+          * This property mustn't be set by hand, it is set by the wcs-grid component to register the column index in a grid in order to move the focus between the grid columns.
+         */
+        "columnPosition": number;
+        /**
+          * This property mustn't be set by hand, it is set by the wcs-grid component to move the focus between grid columns using keyboard.
+         */
+        "cursorPosition": {col: number, row: number};
         /**
           * Set to true if using a `wcs-custom-cell` linked to it.
          */
@@ -484,7 +521,17 @@ export namespace Components {
         "size": 'x5' | 'x75' | '1x' | '1x2' | '1x5' | '1x7' | '2x' | '3x' | '30px' | '50px' | '66px' | '90px' | '96px' | '140px';
     }
     /**
-     * Mainly inspired from Ionic Input Component
+     * The input component is a form control that accepts a single line of text.
+     * Implementation mainly inspired from Ionic Input Component.
+     * <details>
+     *     <summary>Accessibility guidelines 💡</summary>
+     *     > - Provide a `<wcs-label>` next to the input
+     *     > - Use the `disabled` prop to add the HTML `disabled` attribute to the `input`
+     *     > - Use the `readonly` prop to add the HTML `readonly` attribute to the `input`
+     *     > - Use the `autofocus` prop to add the HTML `autofocus` attribute to the `input`. Use it if you want your input focus
+     *     automatically when the page load
+     *     > - Adapt the `type` to lets user enter information more easily (_ex: `type="number"` for an input which only accept numbers entry_)
+     * </details>
      */
     interface WcsInput {
         /**
@@ -587,12 +634,13 @@ export namespace Components {
           * If `true`, the user must fill in a value before submitting a form.
          */
         "required": boolean;
+        "setAriaAttribute": (attr: AriaAttributeName, value: string) => Promise<void>;
         /**
           * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global `input.blur()`.
          */
         "setBlur": () => Promise<void>;
         /**
-          * @deprecated use the native focus method instead   Sets focus on the native `input` in `wcs-input`.
+          * @deprecated use the native focus method instead Sets focus on the native `input` in `wcs-input`.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -651,11 +699,32 @@ export namespace Components {
          */
         "size": MaterialIconSize;
     }
+    /**
+     * The modal component (also named dialog or popup) is an interface element that appears on top of the page content.
+     * Use it to show a message, a confirmation dialog, or any other content like forms.
+     * <details>
+     *     <summary>Accessibility guidelines 💡</summary>
+     *     > - Modal element has `role="dialog"` and `aria-modal="true"`
+     *     > - Keyboard navigation is trapped inside the modal
+     *     > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order
+     *     > to focus it upon dialog dismissal.
+     *     > - The modal can be closed at any time by pressing the Escape key.
+     *     >
+     *     > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+     * </details>
+     * @cssprop --wcs-modal-max-height - Max height of the main container
+     * @cssprop --wcs-modal-overflow-y - Overflow-y of the content
+     */
     interface WcsModal {
         /**
           * Specifies whether the component should hide the actions slot or not
          */
         "hideActions": boolean;
+        /**
+          * Specifies which element id controls the modal
+          * @private
+         */
+        "modalTriggerControlsId": string;
         /**
           * Displays the modal
          */
@@ -698,6 +767,7 @@ export namespace Components {
      * - It is strongly recommended to use select-native when you don't have to support the multi-selection feature
      */
     interface WcsNativeSelect {
+        "setAriaAttribute": (attr: AriaAttributeName, value: string) => Promise<void>;
         /**
           * The `size` property controls the size of the slotted `select` element by adjusting its padding. There are two possible size options: - 'm': medium size - 'l': large size  The default value is 'm'.
          */
@@ -720,7 +790,10 @@ export namespace Components {
         "text": string;
     }
     /**
-     * Component displaying progress as a bar.
+     * Component displaying progress as a horizontal bar.
+     * @cssprop --wcs-progress-bar-border-radius - Border radius
+     * @cssprop --wcs-progress-bar-border-radius-small - Border radius for size small
+     * @cssprop --wcs-progress-bar-animation-duration - Animation duration
      */
     interface WcsProgressBar {
         /**
@@ -728,17 +801,29 @@ export namespace Components {
          */
         "showLabel": boolean;
         /**
-          * Whether the component display the small version
+          * Specify the size of the progress bar.   m = default, s = smaller
          */
-        "small": boolean;
+        "size": Extract<WcsSize, 'm' | 's'>;
         /**
           * The actual value of the progress. Ranging from 0 to 100.
          */
         "value": number;
     }
+    /**
+     * The progress-radial component is a circular progress bar that indicates the current completion of a task.
+     */
     interface WcsProgressRadial {
+        /**
+          * Whether the component should display the % label inside
+         */
         "showLabel": boolean;
+        /**
+          * The size of the progress radial (in px)
+         */
         "size": number;
+        /**
+          * The value of the progress radial. Prefer values between 0 and 100.
+         */
         "value": number;
     }
     interface WcsRadio {
@@ -752,22 +837,28 @@ export namespace Components {
         "disabled": boolean;
         "label": string;
         "mode": RadioGroupMode;
+        /**
+          * Giving every radio button the same name is mandatory to group them
+         */
         "name": string;
         "value": any | any[] | undefined | null;
     }
     interface WcsRadioGroup {
         "mode": RadioGroupMode;
         "name": any;
+        "setAriaAttribute": (attr: AriaAttributeName, value: string) => Promise<void>;
         "value": any | any[] | undefined | null;
     }
     /**
-     * Select component, use in conjuction with wcs-select-option.
-     * @example ```hmtl
-     * <wcs-select>
-     * <wcs-select-option value="1">One</wcs-select-option>
-     * </wcs-select>```
+     * The select component (also named combobox) is a form component that allows users to select one or more options
+     * from a list.
+     * Use it with several slotted `wcs-select-option` inside.
      */
     interface WcsSelect {
+        /**
+          * If `true`, the select acts as an autocomplete field to filter your results.
+         */
+        "autocomplete": boolean;
         /**
           * If `true`, selected items are shown in chips mode.
          */
@@ -784,6 +875,10 @@ export namespace Components {
           * If `true`, the user cannot interact with the select.
          */
         "disabled": boolean;
+        /**
+          * Customizable sort function to change the comparison of values. If not provided, uses the default behavior : `option.textContent.toLowerCase().startsWith(filter.toLowerCase())`
+         */
+        "filterFn": WcsSelectFilterFn;
         /**
           * If `true`, the user can select multiple values at once.
          */
@@ -800,6 +895,7 @@ export namespace Components {
           * The text to display when the select is empty.
          */
         "placeholder"?: string | null;
+        "setAriaAttribute": (attr: AriaAttributeName, value: string) => Promise<void>;
         /**
           * Specify the size (height) of the select.
          */
@@ -810,7 +906,7 @@ export namespace Components {
         "value"?: any | null;
     }
     /**
-     * Select option component, use in conjunction with wcs-select.
+     * The select option is a subcomponent of `wcs-select` that represents a single option in a select list.
      */
     interface WcsSelectOption {
         /**
@@ -822,16 +918,21 @@ export namespace Components {
          */
         "chipColor"?: string;
         /**
-          * Wether this option can be selected.
+          * Whether this option can be selected.
          */
         "disabled": boolean;
         /**
-          * This property musn't be set by hand, it is used by the `wcs-select` component. If you want a multiple select, set `multiple` attribute on the parent select instead.
+          * This property mustn't be set by hand, it is used by the `wcs-select` component. Applies a highlight design on the option for autocomplete mode.
+          * @ignore
+         */
+        "highlighted": boolean;
+        /**
+          * This property mustn't be set by hand, it is used by the `wcs-select` component. If you want a multiple select, set `multiple` attribute on the parent select instead.
           * @ignore
          */
         "multiple": boolean;
         /**
-          * Wether this option is selected.
+          * Whether this option is selected.
          */
         "selected": boolean;
         /**
@@ -907,6 +1008,7 @@ export namespace Components {
          */
         "labelAlignment": SwitchLabelAlignment;
         "name": string;
+        "setAriaAttribute": (attr: AriaAttributeName, value: string) => Promise<void>;
     }
     /**
      * Tab content component.
@@ -917,6 +1019,9 @@ export namespace Components {
           * The header you want to be displayed for this tab.
          */
         "header": string;
+        /**
+          * The id of the tab. It should be unique.
+         */
         "itemKey": any;
     }
     /**
@@ -928,6 +1033,9 @@ export namespace Components {
      *    <wcs-tab header="Two">More content !</wcs-tab>
      * </wcs-tabs>
      * ```
+     * @cssprop --wcs-tabs-width - Width of each tab
+     * @cssprop --wcs-tabs-padding-horizontal - Width of each tab
+     * @cssprop --wcs-tabs-padding-vertical - Vertical padding
      */
     interface WcsTabs {
         /**
@@ -955,6 +1063,8 @@ export namespace Components {
     /**
      * Mainly inspired from Ionic Textarea Component
      * @cssprop --wcs-textarea-max-height - Max height of the text area component
+     * @cssprop --wcs-textarea-padding-left - Padding left of the text area. Take in consideration the transparent border of 2px around the textarea.
+     * @cssprop --wcs-textarea-padding-right - Padding right of the text area. Take in consideration the transparent border of 2px around the textarea.
      */
     interface WcsTextarea {
         /**
@@ -1041,6 +1151,7 @@ export namespace Components {
           * The number of visible text lines for the control.
          */
         "rows"?: number;
+        "setAriaAttribute": (attr: AriaAttributeName, value: string) => Promise<void>;
         /**
           * Sets blur on the native `textarea` in `wcs-textarea`. Use this method instead of the global `textarea.blur()`.
          */
@@ -1326,24 +1437,37 @@ declare global {
         prototype: HTMLWcsDividerElement;
         new (): HTMLWcsDividerElement;
     };
+    /**
+     * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the
+     * dropdown.
+     */
     interface HTMLWcsDropdownElement extends Components.WcsDropdown, HTMLStencilElement {
     }
     var HTMLWcsDropdownElement: {
         prototype: HTMLWcsDropdownElement;
         new (): HTMLWcsDropdownElement;
     };
+    /**
+     * You can add a divider between groups of items
+     */
     interface HTMLWcsDropdownDividerElement extends Components.WcsDropdownDivider, HTMLStencilElement {
     }
     var HTMLWcsDropdownDividerElement: {
         prototype: HTMLWcsDropdownDividerElement;
         new (): HTMLWcsDropdownDividerElement;
     };
+    /**
+     * You can add `wcs-dropdown-header` before a group of items to describe it
+     */
     interface HTMLWcsDropdownHeaderElement extends Components.WcsDropdownHeader, HTMLStencilElement {
     }
     var HTMLWcsDropdownHeaderElement: {
         prototype: HTMLWcsDropdownHeaderElement;
         new (): HTMLWcsDropdownHeaderElement;
     };
+    /**
+     * You must add `wcs-dropdown-item` to `wcs-dropdown`
+     */
     interface HTMLWcsDropdownItemElement extends Components.WcsDropdownItem, HTMLStencilElement {
     }
     var HTMLWcsDropdownItemElement: {
@@ -1473,7 +1597,17 @@ declare global {
         new (): HTMLWcsIconElement;
     };
     /**
-     * Mainly inspired from Ionic Input Component
+     * The input component is a form control that accepts a single line of text.
+     * Implementation mainly inspired from Ionic Input Component.
+     * <details>
+     *     <summary>Accessibility guidelines 💡</summary>
+     *     > - Provide a `<wcs-label>` next to the input
+     *     > - Use the `disabled` prop to add the HTML `disabled` attribute to the `input`
+     *     > - Use the `readonly` prop to add the HTML `readonly` attribute to the `input`
+     *     > - Use the `autofocus` prop to add the HTML `autofocus` attribute to the `input`. Use it if you want your input focus
+     *     automatically when the page load
+     *     > - Adapt the `type` to lets user enter information more easily (_ex: `type="number"` for an input which only accept numbers entry_)
+     * </details>
      */
     interface HTMLWcsInputElement extends Components.WcsInput, HTMLStencilElement {
     }
@@ -1511,6 +1645,22 @@ declare global {
         prototype: HTMLWcsMatIconElement;
         new (): HTMLWcsMatIconElement;
     };
+    /**
+     * The modal component (also named dialog or popup) is an interface element that appears on top of the page content.
+     * Use it to show a message, a confirmation dialog, or any other content like forms.
+     * <details>
+     *     <summary>Accessibility guidelines 💡</summary>
+     *     > - Modal element has `role="dialog"` and `aria-modal="true"`
+     *     > - Keyboard navigation is trapped inside the modal
+     *     > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order
+     *     > to focus it upon dialog dismissal.
+     *     > - The modal can be closed at any time by pressing the Escape key.
+     *     >
+     *     > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+     * </details>
+     * @cssprop --wcs-modal-max-height - Max height of the main container
+     * @cssprop --wcs-modal-overflow-y - Overflow-y of the content
+     */
     interface HTMLWcsModalElement extends Components.WcsModal, HTMLStencilElement {
     }
     var HTMLWcsModalElement: {
@@ -1560,7 +1710,10 @@ declare global {
         new (): HTMLWcsNavItemElement;
     };
     /**
-     * Component displaying progress as a bar.
+     * Component displaying progress as a horizontal bar.
+     * @cssprop --wcs-progress-bar-border-radius - Border radius
+     * @cssprop --wcs-progress-bar-border-radius-small - Border radius for size small
+     * @cssprop --wcs-progress-bar-animation-duration - Animation duration
      */
     interface HTMLWcsProgressBarElement extends Components.WcsProgressBar, HTMLStencilElement {
     }
@@ -1568,6 +1721,9 @@ declare global {
         prototype: HTMLWcsProgressBarElement;
         new (): HTMLWcsProgressBarElement;
     };
+    /**
+     * The progress-radial component is a circular progress bar that indicates the current completion of a task.
+     */
     interface HTMLWcsProgressRadialElement extends Components.WcsProgressRadial, HTMLStencilElement {
     }
     var HTMLWcsProgressRadialElement: {
@@ -1587,11 +1743,9 @@ declare global {
         new (): HTMLWcsRadioGroupElement;
     };
     /**
-     * Select component, use in conjuction with wcs-select-option.
-     * @example ```hmtl
-     * <wcs-select>
-     * <wcs-select-option value="1">One</wcs-select-option>
-     * </wcs-select>```
+     * The select component (also named combobox) is a form component that allows users to select one or more options
+     * from a list.
+     * Use it with several slotted `wcs-select-option` inside.
      */
     interface HTMLWcsSelectElement extends Components.WcsSelect, HTMLStencilElement {
     }
@@ -1600,7 +1754,7 @@ declare global {
         new (): HTMLWcsSelectElement;
     };
     /**
-     * Select option component, use in conjunction with wcs-select.
+     * The select option is a subcomponent of `wcs-select` that represents a single option in a select list.
      */
     interface HTMLWcsSelectOptionElement extends Components.WcsSelectOption, HTMLStencilElement {
     }
@@ -1667,6 +1821,9 @@ declare global {
      *    <wcs-tab header="Two">More content !</wcs-tab>
      * </wcs-tabs>
      * ```
+     * @cssprop --wcs-tabs-width - Width of each tab
+     * @cssprop --wcs-tabs-padding-horizontal - Width of each tab
+     * @cssprop --wcs-tabs-padding-vertical - Vertical padding
      */
     interface HTMLWcsTabsElement extends Components.WcsTabs, HTMLStencilElement {
     }
@@ -1677,6 +1834,8 @@ declare global {
     /**
      * Mainly inspired from Ionic Textarea Component
      * @cssprop --wcs-textarea-max-height - Max height of the text area component
+     * @cssprop --wcs-textarea-padding-left - Padding left of the text area. Take in consideration the transparent border of 2px around the textarea.
+     * @cssprop --wcs-textarea-padding-right - Padding right of the text area. Take in consideration the transparent border of 2px around the textarea.
      */
     interface HTMLWcsTextareaElement extends Components.WcsTextarea, HTMLStencilElement {
     }
@@ -1813,6 +1972,10 @@ declare namespace LocalJSX {
           * Define the shape of the badge
          */
         "shape"?: BadgeShape;
+        /**
+          * Specify the size of the badge.
+         */
+        "size"?: BadgeSize;
     }
     /**
      * Button component, can also be a link when specifying href.
@@ -1915,6 +2078,10 @@ declare namespace LocalJSX {
      * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)
      */
     interface WcsCounter {
+        /**
+          * Specify whether the counter is disabled or not.
+         */
+        "disabled"?: boolean;
         /**
           * The label of the counter.<br/> e.g. Number of passengers, train carriages, railroad tracks...
          */
@@ -1950,6 +2117,10 @@ declare namespace LocalJSX {
     }
     interface WcsDivider {
     }
+    /**
+     * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the
+     * dropdown.
+     */
     interface WcsDropdown {
         /**
           * Specifies whether the dropdown button is clickable or not
@@ -1971,12 +2142,28 @@ declare namespace LocalJSX {
           * Dropdown's button shape
          */
         "shape"?: WcsButtonShape;
+        /**
+          * Dropdown's button size
+         */
+        "size"?: WcsButtonSize;
     }
+    /**
+     * You can add a divider between groups of items
+     */
     interface WcsDropdownDivider {
     }
+    /**
+     * You can add `wcs-dropdown-header` before a group of items to describe it
+     */
     interface WcsDropdownHeader {
     }
+    /**
+     * You must add `wcs-dropdown-item` to `wcs-dropdown`
+     */
     interface WcsDropdownItem {
+        /**
+          * Event emitted when the dropdown item is clicked
+         */
         "onWcsDropdownItemClick"?: (event: WcsDropdownItemCustomEvent<void>) => void;
     }
     interface WcsEditableField {
@@ -2070,7 +2257,7 @@ declare namespace LocalJSX {
         /**
           * Event emitted when a row is selected or unselected
          */
-        "onWcsGridSelectionChange"?: (event: WcsGridCustomEvent<WcsGridRowSelectedEventDetails>) => void;
+        "onWcsGridSelectionChange"?: (event: WcsGridCustomEvent<WcsGridSelectionEventDetails>) => void;
         /**
           * Name of the object's key that will be used to display the cells whose `keyValue` attribute matches to the object's value for this key.
          */
@@ -2220,7 +2407,17 @@ declare namespace LocalJSX {
         "size"?: 'x5' | 'x75' | '1x' | '1x2' | '1x5' | '1x7' | '2x' | '3x' | '30px' | '50px' | '66px' | '90px' | '96px' | '140px';
     }
     /**
-     * Mainly inspired from Ionic Input Component
+     * The input component is a form control that accepts a single line of text.
+     * Implementation mainly inspired from Ionic Input Component.
+     * <details>
+     *     <summary>Accessibility guidelines 💡</summary>
+     *     > - Provide a `<wcs-label>` next to the input
+     *     > - Use the `disabled` prop to add the HTML `disabled` attribute to the `input`
+     *     > - Use the `readonly` prop to add the HTML `readonly` attribute to the `input`
+     *     > - Use the `autofocus` prop to add the HTML `autofocus` attribute to the `input`. Use it if you want your input focus
+     *     automatically when the page load
+     *     > - Adapt the `type` to lets user enter information more easily (_ex: `type="number"` for an input which only accept numbers entry_)
+     * </details>
      */
     interface WcsInput {
         /**
@@ -2300,7 +2497,7 @@ declare namespace LocalJSX {
          */
         "onWcsBlur"?: (event: WcsInputCustomEvent<FocusEvent>) => void;
         /**
-          * Emitted when the value has changed.
+          * Emitted when the value has changed. See https://developer.mozilla.org/en-US/docs/Web/Events/change
          */
         "onWcsChange"?: (event: WcsInputCustomEvent<InputChangeEventDetail>) => void;
         /**
@@ -2308,7 +2505,7 @@ declare namespace LocalJSX {
          */
         "onWcsFocus"?: (event: WcsInputCustomEvent<FocusEvent>) => void;
         /**
-          * Emitted when a keyboard input occurred.
+          * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input
          */
         "onWcsInput"?: (event: WcsInputCustomEvent<KeyboardEvent>) => void;
         /**
@@ -2387,11 +2584,32 @@ declare namespace LocalJSX {
          */
         "size"?: MaterialIconSize;
     }
+    /**
+     * The modal component (also named dialog or popup) is an interface element that appears on top of the page content.
+     * Use it to show a message, a confirmation dialog, or any other content like forms.
+     * <details>
+     *     <summary>Accessibility guidelines 💡</summary>
+     *     > - Modal element has `role="dialog"` and `aria-modal="true"`
+     *     > - Keyboard navigation is trapped inside the modal
+     *     > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order
+     *     > to focus it upon dialog dismissal.
+     *     > - The modal can be closed at any time by pressing the Escape key.
+     *     >
+     *     > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+     * </details>
+     * @cssprop --wcs-modal-max-height - Max height of the main container
+     * @cssprop --wcs-modal-overflow-y - Overflow-y of the content
+     */
     interface WcsModal {
         /**
           * Specifies whether the component should hide the actions slot or not
          */
         "hideActions"?: boolean;
+        /**
+          * Specifies which element id controls the modal
+          * @private
+         */
+        "modalTriggerControlsId"?: string;
         /**
           * Triggered when the user leaves the dialog with the closing button.
          */
@@ -2456,7 +2674,10 @@ declare namespace LocalJSX {
         "text"?: string;
     }
     /**
-     * Component displaying progress as a bar.
+     * Component displaying progress as a horizontal bar.
+     * @cssprop --wcs-progress-bar-border-radius - Border radius
+     * @cssprop --wcs-progress-bar-border-radius-small - Border radius for size small
+     * @cssprop --wcs-progress-bar-animation-duration - Animation duration
      */
     interface WcsProgressBar {
         /**
@@ -2464,17 +2685,29 @@ declare namespace LocalJSX {
          */
         "showLabel"?: boolean;
         /**
-          * Whether the component display the small version
+          * Specify the size of the progress bar.   m = default, s = smaller
          */
-        "small"?: boolean;
+        "size"?: Extract<WcsSize, 'm' | 's'>;
         /**
           * The actual value of the progress. Ranging from 0 to 100.
          */
         "value"?: number;
     }
+    /**
+     * The progress-radial component is a circular progress bar that indicates the current completion of a task.
+     */
     interface WcsProgressRadial {
+        /**
+          * Whether the component should display the % label inside
+         */
         "showLabel"?: boolean;
+        /**
+          * The size of the progress radial (in px)
+         */
         "size"?: number;
+        /**
+          * The value of the progress radial. Prefer values between 0 and 100.
+         */
         "value"?: number;
     }
     interface WcsRadio {
@@ -2488,6 +2721,9 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
         "label"?: string;
         "mode"?: RadioGroupMode;
+        /**
+          * Giving every radio button the same name is mandatory to group them
+         */
         "name"?: string;
         "onWcsRadioClick"?: (event: WcsRadioCustomEvent<RadioChosedEvent>) => void;
         "value"?: any | any[] | undefined | null;
@@ -2502,13 +2738,15 @@ declare namespace LocalJSX {
         "value"?: any | any[] | undefined | null;
     }
     /**
-     * Select component, use in conjuction with wcs-select-option.
-     * @example ```hmtl
-     * <wcs-select>
-     * <wcs-select-option value="1">One</wcs-select-option>
-     * </wcs-select>```
+     * The select component (also named combobox) is a form component that allows users to select one or more options
+     * from a list.
+     * Use it with several slotted `wcs-select-option` inside.
      */
     interface WcsSelect {
+        /**
+          * If `true`, the select acts as an autocomplete field to filter your results.
+         */
+        "autocomplete"?: boolean;
         /**
           * If `true`, selected items are shown in chips mode.
          */
@@ -2521,6 +2759,10 @@ declare namespace LocalJSX {
           * If `true`, the user cannot interact with the select.
          */
         "disabled"?: boolean;
+        /**
+          * Customizable sort function to change the comparison of values. If not provided, uses the default behavior : `option.textContent.toLowerCase().startsWith(filter.toLowerCase())`
+         */
+        "filterFn"?: WcsSelectFilterFn;
         /**
           * If `true`, the user can select multiple values at once.
          */
@@ -2537,6 +2779,10 @@ declare namespace LocalJSX {
           * Emitted when the value has changed.
          */
         "onWcsChange"?: (event: WcsSelectCustomEvent<SelectChangeEventDetail>) => void;
+        /**
+          * Emitted when the autocomplete filter has changed.
+         */
+        "onWcsFilterChange"?: (event: WcsSelectCustomEvent<SelectFilerChangeEventDetail>) => void;
         /**
           * Emitted when the select has focus.
          */
@@ -2555,7 +2801,7 @@ declare namespace LocalJSX {
         "value"?: any | null;
     }
     /**
-     * Select option component, use in conjunction with wcs-select.
+     * The select option is a subcomponent of `wcs-select` that represents a single option in a select list.
      */
     interface WcsSelectOption {
         /**
@@ -2567,12 +2813,12 @@ declare namespace LocalJSX {
          */
         "chipColor"?: string;
         /**
-          * Wether this option can be selected.
+          * Whether this option can be selected.
          */
         "disabled"?: boolean;
         "onWcsSelectOptionClick"?: (event: WcsSelectOptionCustomEvent<SelectOptionChosedEvent>) => void;
         /**
-          * Wether this option is selected.
+          * Whether this option is selected.
          */
         "selected"?: boolean;
         /**
@@ -2662,6 +2908,9 @@ declare namespace LocalJSX {
           * The header you want to be displayed for this tab.
          */
         "header"?: string;
+        /**
+          * The id of the tab. It should be unique.
+         */
         "itemKey"?: any;
         /**
           * Do not use, meant for internal use only.
@@ -2679,6 +2928,9 @@ declare namespace LocalJSX {
      *    <wcs-tab header="Two">More content !</wcs-tab>
      * </wcs-tabs>
      * ```
+     * @cssprop --wcs-tabs-width - Width of each tab
+     * @cssprop --wcs-tabs-padding-horizontal - Width of each tab
+     * @cssprop --wcs-tabs-padding-vertical - Vertical padding
      */
     interface WcsTabs {
         /**
@@ -2710,6 +2962,8 @@ declare namespace LocalJSX {
     /**
      * Mainly inspired from Ionic Textarea Component
      * @cssprop --wcs-textarea-max-height - Max height of the text area component
+     * @cssprop --wcs-textarea-padding-left - Padding left of the text area. Take in consideration the transparent border of 2px around the textarea.
+     * @cssprop --wcs-textarea-padding-right - Padding right of the text area. Take in consideration the transparent border of 2px around the textarea.
      */
     interface WcsTextarea {
         /**
@@ -2769,7 +3023,7 @@ declare namespace LocalJSX {
          */
         "onWcsBlur"?: (event: WcsTextareaCustomEvent<FocusEvent>) => void;
         /**
-          * Emitted when the input value has changed.
+          * Emitted when the input value has changed.- See https://developer.mozilla.org/en-US/docs/Web/Events/change
          */
         "onWcsChange"?: (event: WcsTextareaCustomEvent<TextareaChangeEventDetail>) => void;
         /**
@@ -2777,7 +3031,7 @@ declare namespace LocalJSX {
          */
         "onWcsFocus"?: (event: WcsTextareaCustomEvent<FocusEvent>) => void;
         /**
-          * Emitted when a keyboard input occurred.
+          * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input
          */
         "onWcsInput"?: (event: WcsTextareaCustomEvent<KeyboardEvent>) => void;
         /**
@@ -2964,9 +3218,22 @@ declare module "@stencil/core" {
              */
             "wcs-counter": LocalJSX.WcsCounter & JSXBase.HTMLAttributes<HTMLWcsCounterElement>;
             "wcs-divider": LocalJSX.WcsDivider & JSXBase.HTMLAttributes<HTMLWcsDividerElement>;
+            /**
+             * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the
+             * dropdown.
+             */
             "wcs-dropdown": LocalJSX.WcsDropdown & JSXBase.HTMLAttributes<HTMLWcsDropdownElement>;
+            /**
+             * You can add a divider between groups of items
+             */
             "wcs-dropdown-divider": LocalJSX.WcsDropdownDivider & JSXBase.HTMLAttributes<HTMLWcsDropdownDividerElement>;
+            /**
+             * You can add `wcs-dropdown-header` before a group of items to describe it
+             */
             "wcs-dropdown-header": LocalJSX.WcsDropdownHeader & JSXBase.HTMLAttributes<HTMLWcsDropdownHeaderElement>;
+            /**
+             * You must add `wcs-dropdown-item` to `wcs-dropdown`
+             */
             "wcs-dropdown-item": LocalJSX.WcsDropdownItem & JSXBase.HTMLAttributes<HTMLWcsDropdownItemElement>;
             "wcs-editable-field": LocalJSX.WcsEditableField & JSXBase.HTMLAttributes<HTMLWcsEditableFieldElement>;
             "wcs-error": LocalJSX.WcsError & JSXBase.HTMLAttributes<HTMLWcsErrorElement>;
@@ -3006,7 +3273,17 @@ declare module "@stencil/core" {
             "wcs-horizontal-stepper": LocalJSX.WcsHorizontalStepper & JSXBase.HTMLAttributes<HTMLWcsHorizontalStepperElement>;
             "wcs-icon": LocalJSX.WcsIcon & JSXBase.HTMLAttributes<HTMLWcsIconElement>;
             /**
-             * Mainly inspired from Ionic Input Component
+             * The input component is a form control that accepts a single line of text.
+             * Implementation mainly inspired from Ionic Input Component.
+             * <details>
+             *     <summary>Accessibility guidelines 💡</summary>
+             *     > - Provide a `<wcs-label>` next to the input
+             *     > - Use the `disabled` prop to add the HTML `disabled` attribute to the `input`
+             *     > - Use the `readonly` prop to add the HTML `readonly` attribute to the `input`
+             *     > - Use the `autofocus` prop to add the HTML `autofocus` attribute to the `input`. Use it if you want your input focus
+             *     automatically when the page load
+             *     > - Adapt the `type` to lets user enter information more easily (_ex: `type="number"` for an input which only accept numbers entry_)
+             * </details>
              */
             "wcs-input": LocalJSX.WcsInput & JSXBase.HTMLAttributes<HTMLWcsInputElement>;
             "wcs-label": LocalJSX.WcsLabel & JSXBase.HTMLAttributes<HTMLWcsLabelElement>;
@@ -3014,6 +3291,22 @@ declare module "@stencil/core" {
             "wcs-list-item-properties": LocalJSX.WcsListItemProperties & JSXBase.HTMLAttributes<HTMLWcsListItemPropertiesElement>;
             "wcs-list-item-property": LocalJSX.WcsListItemProperty & JSXBase.HTMLAttributes<HTMLWcsListItemPropertyElement>;
             "wcs-mat-icon": LocalJSX.WcsMatIcon & JSXBase.HTMLAttributes<HTMLWcsMatIconElement>;
+            /**
+             * The modal component (also named dialog or popup) is an interface element that appears on top of the page content.
+             * Use it to show a message, a confirmation dialog, or any other content like forms.
+             * <details>
+             *     <summary>Accessibility guidelines 💡</summary>
+             *     > - Modal element has `role="dialog"` and `aria-modal="true"`
+             *     > - Keyboard navigation is trapped inside the modal
+             *     > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order
+             *     > to focus it upon dialog dismissal.
+             *     > - The modal can be closed at any time by pressing the Escape key.
+             *     >
+             *     > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+             * </details>
+             * @cssprop --wcs-modal-max-height - Max height of the main container
+             * @cssprop --wcs-modal-overflow-y - Overflow-y of the content
+             */
             "wcs-modal": LocalJSX.WcsModal & JSXBase.HTMLAttributes<HTMLWcsModalElement>;
             /**
              * The `wcs-native-select` component is designed to accept a native `<select>` element as a slotted child. This choice
@@ -3043,22 +3336,26 @@ declare module "@stencil/core" {
             "wcs-nav": LocalJSX.WcsNav & JSXBase.HTMLAttributes<HTMLWcsNavElement>;
             "wcs-nav-item": LocalJSX.WcsNavItem & JSXBase.HTMLAttributes<HTMLWcsNavItemElement>;
             /**
-             * Component displaying progress as a bar.
+             * Component displaying progress as a horizontal bar.
+             * @cssprop --wcs-progress-bar-border-radius - Border radius
+             * @cssprop --wcs-progress-bar-border-radius-small - Border radius for size small
+             * @cssprop --wcs-progress-bar-animation-duration - Animation duration
              */
             "wcs-progress-bar": LocalJSX.WcsProgressBar & JSXBase.HTMLAttributes<HTMLWcsProgressBarElement>;
+            /**
+             * The progress-radial component is a circular progress bar that indicates the current completion of a task.
+             */
             "wcs-progress-radial": LocalJSX.WcsProgressRadial & JSXBase.HTMLAttributes<HTMLWcsProgressRadialElement>;
             "wcs-radio": LocalJSX.WcsRadio & JSXBase.HTMLAttributes<HTMLWcsRadioElement>;
             "wcs-radio-group": LocalJSX.WcsRadioGroup & JSXBase.HTMLAttributes<HTMLWcsRadioGroupElement>;
             /**
-             * Select component, use in conjuction with wcs-select-option.
-             * @example ```hmtl
-             * <wcs-select>
-             * <wcs-select-option value="1">One</wcs-select-option>
-             * </wcs-select>```
+             * The select component (also named combobox) is a form component that allows users to select one or more options
+             * from a list.
+             * Use it with several slotted `wcs-select-option` inside.
              */
             "wcs-select": LocalJSX.WcsSelect & JSXBase.HTMLAttributes<HTMLWcsSelectElement>;
             /**
-             * Select option component, use in conjunction with wcs-select.
+             * The select option is a subcomponent of `wcs-select` that represents a single option in a select list.
              */
             "wcs-select-option": LocalJSX.WcsSelectOption & JSXBase.HTMLAttributes<HTMLWcsSelectOptionElement>;
             /**
@@ -3090,11 +3387,16 @@ declare module "@stencil/core" {
              *    <wcs-tab header="Two">More content !</wcs-tab>
              * </wcs-tabs>
              * ```
+             * @cssprop --wcs-tabs-width - Width of each tab
+             * @cssprop --wcs-tabs-padding-horizontal - Width of each tab
+             * @cssprop --wcs-tabs-padding-vertical - Vertical padding
              */
             "wcs-tabs": LocalJSX.WcsTabs & JSXBase.HTMLAttributes<HTMLWcsTabsElement>;
             /**
              * Mainly inspired from Ionic Textarea Component
              * @cssprop --wcs-textarea-max-height - Max height of the text area component
+             * @cssprop --wcs-textarea-padding-left - Padding left of the text area. Take in consideration the transparent border of 2px around the textarea.
+             * @cssprop --wcs-textarea-padding-right - Padding right of the text area. Take in consideration the transparent border of 2px around the textarea.
              */
             "wcs-textarea": LocalJSX.WcsTextarea & JSXBase.HTMLAttributes<HTMLWcsTextareaElement>;
             /**