wcs-core 7.0.0 → 7.2.0

package/dist/types/components.d.ts

@@ -6,9 +6,11 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AriaAttributeName } from "./utils/mutable-aria-attribute";
+import { WcsAlertConfig, WcsAlertIntent } from "./components/alert/alert-interface";
+import { WcsAlertDrawerPosition } from "./components/alert-drawer/alert-drawer-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 { CardMode, CardOrientation } from "./components/card/card-interface";
 import { CheckboxChangeEventDetail, CheckboxLabelAlignment } from "./components/checkbox/checkbox-interface";
 import { CategoryOpenedEventDetail, MenuOpenedEventDetail } from "./components/com-nav/com-nav-interface";
 import { CounterChangeEventDetail, WcsCounterSize } from "./components/counter/counter-interface";
@@ -32,9 +34,11 @@ import { WcsTabChangeEvent, WcsTabsAlignment } from "./components/tabs/tabs-inte
 import { TextareaChangeEventDetail, WcsTextareaEnterKeyHint, WcsTextareaInputMode, WcsTextareaInputState, WcsTextareaResize, WcsTextareaWrap } from "./components/textarea/textarea-interface";
 import { WcsTooltipAppendTo, WcsTooltipPosition } from "./components/tooltip/tooltip-interface";
 export { AriaAttributeName } from "./utils/mutable-aria-attribute";
+export { WcsAlertConfig, WcsAlertIntent } from "./components/alert/alert-interface";
+export { WcsAlertDrawerPosition } from "./components/alert-drawer/alert-drawer-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 { CardMode, CardOrientation } from "./components/card/card-interface";
 export { CheckboxChangeEventDetail, CheckboxLabelAlignment } from "./components/checkbox/checkbox-interface";
 export { CategoryOpenedEventDetail, MenuOpenedEventDetail } from "./components/com-nav/com-nav-interface";
 export { CounterChangeEventDetail, WcsCounterSize } from "./components/counter/counter-interface";
@@ -154,6 +158,87 @@ export namespace Components {
          */
         "gutter": boolean;
     }
+    /**
+     * Alerts are used to communicate a state or an action that has been performed.
+     * It has to be used conjunction with the `wcs-alert-drawer` component, or you can use it independently by taking care of 
+     * the alert visibility
+     * @cssprop --wcs-alert-background-color - Background color of the alert
+     * @cssprop --wcs-alert-icon-background-color - Background color of the icon
+     * @cssprop --wcs-alert-title-color - Color of the title
+     * @cssprop --wcs-alert-subtitle-color - Color of the subtitle
+     * @cssprop --wcs-alert-dismiss-button-color - Color of the dismiss button
+     * @cssprop --wcs-alert-title-font-weight - Font weight of the title
+     * @cssprop --wcs-alert-subtitle-font-weight - Font weight of the subtitle
+     * @cssprop --wcs-alert-title-font-size - Font size of the title
+     * @cssprop --wcs-alert-subtitle-font-size - Font size of the subtitle
+     * @cssprop --wcs-alert-border-width - Border width of the alert
+     * @cssprop --wcs-alert-border-color - Border color of the alert
+     * @cssprop --wcs-alert-border-radius - Border radius of the alert
+     * @cssprop --wcs-alert-padding - Padding of the alert
+     * @cssprop --wcs-alert-gap - Gap between each element of the alert, icon content and close button
+     * @cssprop --wcs-alert-min-width - Minimum width of the alert, default to 100% and it is set by alert-drawer component
+     * @cssprop --wcs-alert-progress-bar-height - Height of the progress bar if `showProgressBar` is set to true
+     * @cssprop --wcs-alert-progress-bar-background-color - Background color of the progress bar
+     */
+    interface WcsAlert {
+        "intent": WcsAlertIntent;
+        /**
+          * Controls the visibility state of the alert. This property is exposed to allow control of the alert's display state and animation timing: - Used by wcs-alert-drawer to coordinate exit animations when the alert is dismissed - Can be used directly for custom implementations (though using wcs-alert-drawer is recommended) - When set to false, it triggers the exit animation if implemented  Note: While direct usage is possible for custom implementations, it's recommended to use wcs-alert-drawer for consistent alert management and animations.
+         */
+        "show": boolean;
+        "showProgressBar": boolean;
+        /**
+          * Time duration of the alert visibility  5000ms by default If 0, the alert will not emit `wcsAlertDismiss` event automatically
+         */
+        "timeout": number;
+    }
+    /**
+     * Serve as a container for displaying `wcs-alert` components. Directly use this component to display alerts in your applications.
+     * ## Usage
+     * You can place the `wcs-alert-drawer` component anywhere in your application. It will be used to display alerts.
+     * You need to set `position` property to define where the alert drawer will be displayed on the screen.
+     * About alerts order:
+     * - alerts are ordered up-bottom if the position is `top` and bottom-up if the position is `bottom`
+     * ## Accessibility guidelines 💡
+     * - The component has `aria-live="polite"` and `aria-atomic="true"` attributes to announce the new alerts to screen readers
+     * ## Configuration (on the web component)
+     * Per default, the `wcs-alert-drawer` is configured with:
+     * - `position: 'top-right'`
+     * - `showProgressBar: false`
+     * - `timeout: 5000`
+     * When using the `WcsAlertDrawer::show(alert: WcsAlertConfig)` method, you can override the default configuration by 
+     * overriding it through the argument.
+     * You can also set them in the `wcs-alert-drawer` component directly as attributes
+     * ```html
+     * <wcs-alert-drawer position="top-right" show-progress-bar timeout="10000">
+     * ```
+     * With this configuration, all alerts will be displayed with a progress bar and a timeout of 10 seconds.
+     * @cssprop --wcs-alert-drawer-gap - Gap between alerts
+     * @cssprop --wcs-alert-drawer-margin-horizontal - Margin horizontal of the alert drawer
+     * @cssprop --wcs-alert-drawer-margin-vertical - Margin vertical of the alert drawer
+     * @cssprop --wcs-alert-drawer-hide-alert-animation-duration - Duration of the hide alert animation
+     * @cssprop --wcs-alert-drawer-min-width - Minimum width of the alert drawer => define the width of the alerts
+     */
+    interface WcsAlertDrawer {
+        /**
+          * Position of the alert drawer on the screen
+         */
+        "position": WcsAlertDrawerPosition;
+        /**
+          * Method exposed on `wcs-alert-drawer` to show an alert programmatically via the JS API
+          * @example Plain javascript (example inside a script tag): ```javascript  document.querySelector('wcs-alert-drawer').show({      title: 'Alert title',      subtitle: 'Alert subtitle',      intent: 'info',      showProgressBar: true,      timeout: 5000  });
+          * @param alert The alert to show
+         */
+        "show": (alert: WcsAlertConfig) => Promise<void>;
+        /**
+          * Whether to show the progress bar or not
+         */
+        "showProgressBar": boolean;
+        /**
+          * Timeout for the alert to be dismissed automatically
+         */
+        "timeout": number;
+    }
     interface WcsApp {
     }
     /**
@@ -334,20 +419,64 @@ export namespace Components {
     /**
      * The card component is a container that display content such as text, images, buttons, and lists.  
      * A card can be a single component, but is often made up of a header, title, subtitle, and content.
+     * While they're very flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body`
+     * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to make sure the card is well-designed.
      * @cssprop --wcs-card-border-color - Border color of the card
      * @cssprop --wcs-card-border-radius - Border radius of the card
      * @cssprop --wcs-card-border-width - Border width of the card
      * @cssprop --wcs-card-background-color - Background color of the card
      * @cssprop --wcs-card-text-color - Text color of the card
+     * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal
      */
     interface WcsCard {
         "mode": CardMode;
+        /**
+          * The orientation of the card, can be horizontal or vertical
+         */
+        "orientation": CardOrientation;
     }
     /**
      * The card-body is a subcomponent of `wcs-card`. It represents content of the card with an extra padding around.
      * @cssprop --wcs-card-body-padding - Padding of the card body
+     * @cssprop --wcs-card-body-gap - Gap between each element in the card body
      */
     interface WcsCardBody {
+        "setOrientation": (orientation: CardOrientation) => Promise<void>;
+    }
+    /**
+     * A content for a card inside card-body. Commonly used to provide more details about the card content. 
+     * The information provided should be concise and easy to read.
+     * By default, the margin is removed from the top and bottom of the card description.
+     * @cssprop --wcs-card-content-color - The color of the card description.
+     * @cssprop --wcs-card-content-font-size - The font size of the card description.
+     */
+    interface WcsCardContent {
+    }
+    /**
+     * The card footer component is a container that display content at the bottom of the card.
+     * It uses a flex layout to organize actions the user can take with a card
+     * @cssprop --wcs-card-footer-gap - Gap of the card footer
+     */
+    interface WcsCardFooter {
+    }
+    /**
+     * The card header component is a container that display a title and an action, it can also display a label as a `<wcs-badge>` component.
+     * The default slotted element is displayed as a `<h3>` element
+     * @cssprop --wcs-card-header-title-color - Color of the title
+     * @cssprop --wcs-card-header-title-font-size - Font size of the title
+     * @cssprop --wcs-card-header-title-font-weight - Font weight of the title
+     * @cssprop --wcs-card-header-gap - Gap between the title and the badge
+     */
+    interface WcsCardHeader {
+    }
+    /**
+     * The card media component is a container that display an image/icon inside a card. 
+     * On horizontal orientation, the image/icon has an aspect ratio of 1/1
+     * On vertical orientation, the image/icon has an aspect ratio of 16/9.
+     * @cssprop --wcs-card-media-max-width-horizontal - Max width of the image when the card is horizontal
+     */
+    interface WcsCardMedia {
+        "setOrientation": (orientation: CardOrientation) => Promise<void>;
     }
     /**
      * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.
@@ -392,6 +521,10 @@ export namespace Components {
           * Specify whether the checkbox is disabled or not.
          */
         "disabled": boolean;
+        /**
+          * Get the label text
+         */
+        "getLabel": () => Promise<string>;
         /**
           * If `true` the checkbox is in indeterminate state.
          */
@@ -691,6 +824,7 @@ export namespace Components {
      * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover
      * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field
      * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover
+     * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus
      * @cssprop --wcs-editable-field-border-style - Border style of the editable field
      * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size
      * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size
@@ -708,7 +842,7 @@ export namespace Components {
          */
         "formatFn": FormatFn<any>;
         /**
-          * Label of the field
+          * Label of the field.   Will also be part of the edit button `aria-label`.
          */
         "label": string;
         /**
@@ -915,6 +1049,10 @@ export namespace Components {
           * Contains the data to display in the table from a js object
          */
         "data": any[];
+        /**
+          * Set focus on the first cell of the grid
+         */
+        "focusFirstCell": () => Promise<void>;
         /**
           * Flag to display a spinner during data loading
          */
@@ -1138,6 +1276,7 @@ export namespace Components {
      * @cssprop --wcs-input-border-color-default - default border color of the input when not focused
      * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled
      * @cssprop --wcs-input-border-color-focus - border color of the input when focused
+     * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused
      * @cssprop --wcs-input-border-color-error - border color of the input when in error state
      * @cssprop --wcs-input-value-color - color of the input value
      * @cssprop --wcs-input-value-font-weight - font weight of the input value
@@ -1191,6 +1330,7 @@ export namespace Components {
           * Returns the native `<input>` element used under the hood.
          */
         "getInputElement": () => Promise<HTMLInputElement>;
+        "hidePasswordButtonAriaLabel": string;
         /**
           * Name of the material icon to add to the input
          */
@@ -1248,6 +1388,7 @@ export namespace Components {
           * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global `input.blur()`.
          */
         "setBlur": () => Promise<void>;
+        "showPasswordButtonAriaLabel": string;
         /**
           * Specify the size (height) of the input.
          */
@@ -1298,6 +1439,10 @@ export namespace Components {
     /**
      * Lists are used for grouping a collection of related items.
      * Standard lists can be used either with or without icons. Depending on the context, the list can have one or more
+     * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action. 
+     * ## Accessibility guidelines 💡
+     * > - You should wrap your list-items inside a container with a `role` attribute set to `list`. On each `wcs-list-item`, 
+     *   you should set a `role` attribute to `listitem`. See the code below.
      * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action.
      * @cssprop --wcs-list-item-padding - Padding of the list item
      * @cssprop --wcs-list-item-border-width - Border width of the list item
@@ -1338,7 +1483,7 @@ export namespace Components {
     interface WcsListItemProperty {
     }
     /**
-     * A component used to display a [Material Icon](https://fonts.google.com/icons). Can be useful when used in wcs-grid or in a wcs-button.
+     * A component used to display a [Material Icon](https://fonts.google.com/icons?icon.set=Material+Icons). Can be useful when used in wcs-grid or in a wcs-button.
      */
     interface WcsMatIcon {
         /**
@@ -1363,6 +1508,9 @@ export namespace Components {
      * > - 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.
+     * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial 
+     * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you 
+     * > want to focus. You will see a story as example below
      * > - 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/
@@ -1390,10 +1538,19 @@ export namespace Components {
           * Specifies the aria-label present on the close button when the modal is opened.   Only use when `showCloseButton` is `true`.
          */
         "closeButtonAriaLabel": string;
+        /**
+          * Disables automatic focus behavior when the modal opens.  When set to true, the modal will not automatically focus any element upon opening. Use this property with caution, as managing focus is important for accessibility. Consider providing an alternative focus management strategy if disabling the default behavior.
+         */
+        "disableAutoFocus": boolean;
         /**
           * Specifies whether the component should hide the actions slot or not
          */
         "hideActions": boolean;
+        /**
+          * The ID of the element to automatically focus when the modal opens.  If this property is not set and `disableAutoFocus` is false, the modal will automatically focus the first focusable element within its content. This follows accessibility best practices by ensuring keyboard navigation starts from a logical point when the modal opens.
+          * @example <wcs-modal initial-focus-element="cancel-button"></wcs-modal>
+         */
+        "initialFocusElementId"?: string;
         /**
           * Specifies which element id controls the modal
           * @private
@@ -1707,6 +1864,7 @@ export namespace Components {
           * The name of the control to be set on all radio button children
          */
         "name": any;
+        "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise<void>;
         /**
           * The value of the radio-group. Automatically reflects which radio button is selected.
          */
@@ -1801,6 +1959,10 @@ export namespace Components {
           * The text to display when the select is empty.
          */
         "placeholder"?: string | null;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
         /**
           * **Only works with `autocomplete` mode.**   If `true`, the server mode disables the client-side filtering on your select and allows you to handle which options should be present in your DOM.
          */
@@ -1992,6 +2154,10 @@ export namespace Components {
           * Specify whether the switch is disabled or not.
          */
         "disabled": boolean;
+        /**
+          * Get the label text
+         */
+        "getLabel": () => Promise<string>;
         /**
           * Specifie the alignment of the switch with the label content
          */
@@ -2015,6 +2181,9 @@ export namespace Components {
     }
     /**
      * Tabs component to switch between tab content. Use in conjunction with `wcs-tab`.
+     * ## Accessibility guidelines 💡
+     * > - Mobile display should be used for narrower screens (automatically set by default).
+     * > - The component respects the W3C [tab pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
      * @cssprop --wcs-tabs-indicator-height - Height of the tabs indicator
      * @cssprop --wcs-tabs-indicator-background-color - Background color of the tabs indicator
      * @cssprop --wcs-tabs-indicator-border-radius - Border radius of the tabs indicator
@@ -2036,6 +2205,24 @@ export namespace Components {
      * @cssprop --wcs-tabs-padding-left - Padding left of the tabs
      * @cssprop --wcs-tabs-headers-border-bottom - Border bottom (gutter) below the tabs
      * @cssprop --wcs-tabs-transition-duration - Transition duration of the tabs
+     * @cssprop --wcs-tabs-mobile-breakpoint - Breakpoint for mobile display (default: 575px)
+     * @cssprop --wcs-tabs-mobile-overlay-border-width - Border width of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-overlay-border-color - Border color of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-overlay-background-color - Background color of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-overlay-padding - Padding of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-overlay-border-radius - Border radius of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-gap - Gap between the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-padding - Padding of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-height - Height of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-font-weight-default - Default weight of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-font-weight-active - Active font weight of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-font-size - Font size of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-color - Text color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-background-color-default - Default background color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-background-color-focus - Focused background color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-background-color-hover - Hovered background color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-background-color-press - Pressed background color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-border-radius - Border radius of the mobile tabs in the overlay
      */
     interface WcsTabs {
         /**
@@ -2204,14 +2391,13 @@ export namespace Components {
      * (for longer content).
      * Note that this component is based on the Tippy.js library : https://atomiks.github.io/tippyjs/
      * ## Accessibility guidelines 💡
-     * The component places necessary aria attribute on your target element (like the `wcs-button`) :
-     * - `aria-expanded`: set to true when popover is open, false when it is closed
      * The problem is that impaired users may not be able to see what is the information provided by the tooltip. To solve
      * this problem, the tooltip should be served with some aria attributes to make it accessible.
      * Aria-features `wcs-tooltip` respect:
      * - dismiss when the user presses the `Escape` key
      * - has a `role=tooltip`
-     * - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
+     * - when set to `interactive` mode
+     *  - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
      * Aria-features `wcs-tooltip` **does not respect with `wcs-button`**:
      * - aria-controls => we cannot do it yet, we need to wait for Cross root ARIA - export ID (https://github.com/WICG/aom/blob/gh-pages/exportid-explainer.md)
      * But you have to provide the "link" between the element you want to describe and the tooltip. To do this, you have to
@@ -2277,7 +2463,7 @@ export namespace Components {
          */
         "show": () => Promise<void>;
         /**
-          * Allows you to change the theme used by tippy.  The WCS theme is used by default and uses the WCS CSS variables.  You can create a theme by following this documentation and choosing a custom name : https://atomiks.github.io/tippyjs/v6/themes/
+          * Allows you to change the theme used by tippy.  The WCS theme 'dark' is used by default and uses the WCS CSS variables.  You can create a theme by following this documentation and choosing a custom name : https://atomiks.github.io/tippyjs/v6/themes/
          */
         "theme": 'dark' | 'light';
         /**
@@ -2290,6 +2476,10 @@ export interface WcsAccordionPanelCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLWcsAccordionPanelElement;
 }
+export interface WcsAlertCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLWcsAlertElement;
+}
 export interface WcsCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLWcsCheckboxElement;
@@ -2471,6 +2661,78 @@ declare global {
         prototype: HTMLWcsActionBarElement;
         new (): HTMLWcsActionBarElement;
     };
+    interface HTMLWcsAlertElementEventMap {
+        "wcsAlertDismiss": void;
+    }
+    /**
+     * Alerts are used to communicate a state or an action that has been performed.
+     * It has to be used conjunction with the `wcs-alert-drawer` component, or you can use it independently by taking care of 
+     * the alert visibility
+     * @cssprop --wcs-alert-background-color - Background color of the alert
+     * @cssprop --wcs-alert-icon-background-color - Background color of the icon
+     * @cssprop --wcs-alert-title-color - Color of the title
+     * @cssprop --wcs-alert-subtitle-color - Color of the subtitle
+     * @cssprop --wcs-alert-dismiss-button-color - Color of the dismiss button
+     * @cssprop --wcs-alert-title-font-weight - Font weight of the title
+     * @cssprop --wcs-alert-subtitle-font-weight - Font weight of the subtitle
+     * @cssprop --wcs-alert-title-font-size - Font size of the title
+     * @cssprop --wcs-alert-subtitle-font-size - Font size of the subtitle
+     * @cssprop --wcs-alert-border-width - Border width of the alert
+     * @cssprop --wcs-alert-border-color - Border color of the alert
+     * @cssprop --wcs-alert-border-radius - Border radius of the alert
+     * @cssprop --wcs-alert-padding - Padding of the alert
+     * @cssprop --wcs-alert-gap - Gap between each element of the alert, icon content and close button
+     * @cssprop --wcs-alert-min-width - Minimum width of the alert, default to 100% and it is set by alert-drawer component
+     * @cssprop --wcs-alert-progress-bar-height - Height of the progress bar if `showProgressBar` is set to true
+     * @cssprop --wcs-alert-progress-bar-background-color - Background color of the progress bar
+     */
+    interface HTMLWcsAlertElement extends Components.WcsAlert, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLWcsAlertElementEventMap>(type: K, listener: (this: HTMLWcsAlertElement, ev: WcsAlertCustomEvent<HTMLWcsAlertElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLWcsAlertElementEventMap>(type: K, listener: (this: HTMLWcsAlertElement, ev: WcsAlertCustomEvent<HTMLWcsAlertElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLWcsAlertElement: {
+        prototype: HTMLWcsAlertElement;
+        new (): HTMLWcsAlertElement;
+    };
+    /**
+     * Serve as a container for displaying `wcs-alert` components. Directly use this component to display alerts in your applications.
+     * ## Usage
+     * You can place the `wcs-alert-drawer` component anywhere in your application. It will be used to display alerts.
+     * You need to set `position` property to define where the alert drawer will be displayed on the screen.
+     * About alerts order:
+     * - alerts are ordered up-bottom if the position is `top` and bottom-up if the position is `bottom`
+     * ## Accessibility guidelines 💡
+     * - The component has `aria-live="polite"` and `aria-atomic="true"` attributes to announce the new alerts to screen readers
+     * ## Configuration (on the web component)
+     * Per default, the `wcs-alert-drawer` is configured with:
+     * - `position: 'top-right'`
+     * - `showProgressBar: false`
+     * - `timeout: 5000`
+     * When using the `WcsAlertDrawer::show(alert: WcsAlertConfig)` method, you can override the default configuration by 
+     * overriding it through the argument.
+     * You can also set them in the `wcs-alert-drawer` component directly as attributes
+     * ```html
+     * <wcs-alert-drawer position="top-right" show-progress-bar timeout="10000">
+     * ```
+     * With this configuration, all alerts will be displayed with a progress bar and a timeout of 10 seconds.
+     * @cssprop --wcs-alert-drawer-gap - Gap between alerts
+     * @cssprop --wcs-alert-drawer-margin-horizontal - Margin horizontal of the alert drawer
+     * @cssprop --wcs-alert-drawer-margin-vertical - Margin vertical of the alert drawer
+     * @cssprop --wcs-alert-drawer-hide-alert-animation-duration - Duration of the hide alert animation
+     * @cssprop --wcs-alert-drawer-min-width - Minimum width of the alert drawer => define the width of the alerts
+     */
+    interface HTMLWcsAlertDrawerElement extends Components.WcsAlertDrawer, HTMLStencilElement {
+    }
+    var HTMLWcsAlertDrawerElement: {
+        prototype: HTMLWcsAlertDrawerElement;
+        new (): HTMLWcsAlertDrawerElement;
+    };
     interface HTMLWcsAppElement extends Components.WcsApp, HTMLStencilElement {
     }
     var HTMLWcsAppElement: {
@@ -2600,11 +2862,14 @@ declare global {
     /**
      * The card component is a container that display content such as text, images, buttons, and lists.  
      * A card can be a single component, but is often made up of a header, title, subtitle, and content.
+     * While they're very flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body`
+     * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to make sure the card is well-designed.
      * @cssprop --wcs-card-border-color - Border color of the card
      * @cssprop --wcs-card-border-radius - Border radius of the card
      * @cssprop --wcs-card-border-width - Border width of the card
      * @cssprop --wcs-card-background-color - Background color of the card
      * @cssprop --wcs-card-text-color - Text color of the card
+     * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal
      */
     interface HTMLWcsCardElement extends Components.WcsCard, HTMLStencilElement {
     }
@@ -2615,6 +2880,7 @@ declare global {
     /**
      * The card-body is a subcomponent of `wcs-card`. It represents content of the card with an extra padding around.
      * @cssprop --wcs-card-body-padding - Padding of the card body
+     * @cssprop --wcs-card-body-gap - Gap between each element in the card body
      */
     interface HTMLWcsCardBodyElement extends Components.WcsCardBody, HTMLStencilElement {
     }
@@ -2622,6 +2888,56 @@ declare global {
         prototype: HTMLWcsCardBodyElement;
         new (): HTMLWcsCardBodyElement;
     };
+    /**
+     * A content for a card inside card-body. Commonly used to provide more details about the card content. 
+     * The information provided should be concise and easy to read.
+     * By default, the margin is removed from the top and bottom of the card description.
+     * @cssprop --wcs-card-content-color - The color of the card description.
+     * @cssprop --wcs-card-content-font-size - The font size of the card description.
+     */
+    interface HTMLWcsCardContentElement extends Components.WcsCardContent, HTMLStencilElement {
+    }
+    var HTMLWcsCardContentElement: {
+        prototype: HTMLWcsCardContentElement;
+        new (): HTMLWcsCardContentElement;
+    };
+    /**
+     * The card footer component is a container that display content at the bottom of the card.
+     * It uses a flex layout to organize actions the user can take with a card
+     * @cssprop --wcs-card-footer-gap - Gap of the card footer
+     */
+    interface HTMLWcsCardFooterElement extends Components.WcsCardFooter, HTMLStencilElement {
+    }
+    var HTMLWcsCardFooterElement: {
+        prototype: HTMLWcsCardFooterElement;
+        new (): HTMLWcsCardFooterElement;
+    };
+    /**
+     * The card header component is a container that display a title and an action, it can also display a label as a `<wcs-badge>` component.
+     * The default slotted element is displayed as a `<h3>` element
+     * @cssprop --wcs-card-header-title-color - Color of the title
+     * @cssprop --wcs-card-header-title-font-size - Font size of the title
+     * @cssprop --wcs-card-header-title-font-weight - Font weight of the title
+     * @cssprop --wcs-card-header-gap - Gap between the title and the badge
+     */
+    interface HTMLWcsCardHeaderElement extends Components.WcsCardHeader, HTMLStencilElement {
+    }
+    var HTMLWcsCardHeaderElement: {
+        prototype: HTMLWcsCardHeaderElement;
+        new (): HTMLWcsCardHeaderElement;
+    };
+    /**
+     * The card media component is a container that display an image/icon inside a card. 
+     * On horizontal orientation, the image/icon has an aspect ratio of 1/1
+     * On vertical orientation, the image/icon has an aspect ratio of 16/9.
+     * @cssprop --wcs-card-media-max-width-horizontal - Max width of the image when the card is horizontal
+     */
+    interface HTMLWcsCardMediaElement extends Components.WcsCardMedia, HTMLStencilElement {
+    }
+    var HTMLWcsCardMediaElement: {
+        prototype: HTMLWcsCardMediaElement;
+        new (): HTMLWcsCardMediaElement;
+    };
     interface HTMLWcsCheckboxElementEventMap {
         "wcsChange": CheckboxChangeEventDetail;
         "wcsFocus": FocusEvent;
@@ -2981,6 +3297,7 @@ declare global {
      * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover
      * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field
      * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover
+     * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus
      * @cssprop --wcs-editable-field-border-style - Border style of the editable field
      * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size
      * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size
@@ -3380,6 +3697,7 @@ declare global {
      * @cssprop --wcs-input-border-color-default - default border color of the input when not focused
      * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled
      * @cssprop --wcs-input-border-color-focus - border color of the input when focused
+     * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused
      * @cssprop --wcs-input-border-color-error - border color of the input when in error state
      * @cssprop --wcs-input-value-color - color of the input value
      * @cssprop --wcs-input-value-font-weight - font weight of the input value
@@ -3426,6 +3744,10 @@ declare global {
     /**
      * Lists are used for grouping a collection of related items.
      * Standard lists can be used either with or without icons. Depending on the context, the list can have one or more
+     * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action. 
+     * ## Accessibility guidelines 💡
+     * > - You should wrap your list-items inside a container with a `role` attribute set to `list`. On each `wcs-list-item`, 
+     *   you should set a `role` attribute to `listitem`. See the code below.
      * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action.
      * @cssprop --wcs-list-item-padding - Padding of the list item
      * @cssprop --wcs-list-item-border-width - Border width of the list item
@@ -3474,7 +3796,7 @@ declare global {
         new (): HTMLWcsListItemPropertyElement;
     };
     /**
-     * A component used to display a [Material Icon](https://fonts.google.com/icons). Can be useful when used in wcs-grid or in a wcs-button.
+     * A component used to display a [Material Icon](https://fonts.google.com/icons?icon.set=Material+Icons). Can be useful when used in wcs-grid or in a wcs-button.
      */
     interface HTMLWcsMatIconElement extends Components.WcsMatIcon, HTMLStencilElement {
     }
@@ -3493,6 +3815,9 @@ declare global {
      * > - 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.
+     * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial 
+     * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you 
+     * > want to focus. You will see a story as example below
      * > - 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/
@@ -4047,6 +4372,9 @@ declare global {
     }
     /**
      * Tabs component to switch between tab content. Use in conjunction with `wcs-tab`.
+     * ## Accessibility guidelines 💡
+     * > - Mobile display should be used for narrower screens (automatically set by default).
+     * > - The component respects the W3C [tab pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
      * @cssprop --wcs-tabs-indicator-height - Height of the tabs indicator
      * @cssprop --wcs-tabs-indicator-background-color - Background color of the tabs indicator
      * @cssprop --wcs-tabs-indicator-border-radius - Border radius of the tabs indicator
@@ -4068,6 +4396,24 @@ declare global {
      * @cssprop --wcs-tabs-padding-left - Padding left of the tabs
      * @cssprop --wcs-tabs-headers-border-bottom - Border bottom (gutter) below the tabs
      * @cssprop --wcs-tabs-transition-duration - Transition duration of the tabs
+     * @cssprop --wcs-tabs-mobile-breakpoint - Breakpoint for mobile display (default: 575px)
+     * @cssprop --wcs-tabs-mobile-overlay-border-width - Border width of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-overlay-border-color - Border color of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-overlay-background-color - Background color of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-overlay-padding - Padding of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-overlay-border-radius - Border radius of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-gap - Gap between the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-padding - Padding of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-height - Height of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-font-weight-default - Default weight of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-font-weight-active - Active font weight of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-font-size - Font size of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-color - Text color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-background-color-default - Default background color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-background-color-focus - Focused background color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-background-color-hover - Hovered background color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-background-color-press - Pressed background color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-border-radius - Border radius of the mobile tabs in the overlay
      */
     interface HTMLWcsTabsElement extends Components.WcsTabs, HTMLStencilElement {
         addEventListener<K extends keyof HTMLWcsTabsElementEventMap>(type: K, listener: (this: HTMLWcsTabsElement, ev: WcsTabsCustomEvent<HTMLWcsTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4143,14 +4489,13 @@ declare global {
      * (for longer content).
      * Note that this component is based on the Tippy.js library : https://atomiks.github.io/tippyjs/
      * ## Accessibility guidelines 💡
-     * The component places necessary aria attribute on your target element (like the `wcs-button`) :
-     * - `aria-expanded`: set to true when popover is open, false when it is closed
      * The problem is that impaired users may not be able to see what is the information provided by the tooltip. To solve
      * this problem, the tooltip should be served with some aria attributes to make it accessible.
      * Aria-features `wcs-tooltip` respect:
      * - dismiss when the user presses the `Escape` key
      * - has a `role=tooltip`
-     * - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
+     * - when set to `interactive` mode
+     *  - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
      * Aria-features `wcs-tooltip` **does not respect with `wcs-button`**:
      * - aria-controls => we cannot do it yet, we need to wait for Cross root ARIA - export ID (https://github.com/WICG/aom/blob/gh-pages/exportid-explainer.md)
      * But you have to provide the "link" between the element you want to describe and the tooltip. To do this, you have to
@@ -4177,6 +4522,8 @@ declare global {
         "wcs-accordion-header": HTMLWcsAccordionHeaderElement;
         "wcs-accordion-panel": HTMLWcsAccordionPanelElement;
         "wcs-action-bar": HTMLWcsActionBarElement;
+        "wcs-alert": HTMLWcsAlertElement;
+        "wcs-alert-drawer": HTMLWcsAlertDrawerElement;
         "wcs-app": HTMLWcsAppElement;
         "wcs-badge": HTMLWcsBadgeElement;
         "wcs-breadcrumb": HTMLWcsBreadcrumbElement;
@@ -4184,6 +4531,10 @@ declare global {
         "wcs-button": HTMLWcsButtonElement;
         "wcs-card": HTMLWcsCardElement;
         "wcs-card-body": HTMLWcsCardBodyElement;
+        "wcs-card-content": HTMLWcsCardContentElement;
+        "wcs-card-footer": HTMLWcsCardFooterElement;
+        "wcs-card-header": HTMLWcsCardHeaderElement;
+        "wcs-card-media": HTMLWcsCardMediaElement;
         "wcs-checkbox": HTMLWcsCheckboxElement;
         "wcs-com-nav": HTMLWcsComNavElement;
         "wcs-com-nav-category": HTMLWcsComNavCategoryElement;
@@ -4335,6 +4686,85 @@ declare namespace LocalJSX {
          */
         "gutter"?: boolean;
     }
+    /**
+     * Alerts are used to communicate a state or an action that has been performed.
+     * It has to be used conjunction with the `wcs-alert-drawer` component, or you can use it independently by taking care of 
+     * the alert visibility
+     * @cssprop --wcs-alert-background-color - Background color of the alert
+     * @cssprop --wcs-alert-icon-background-color - Background color of the icon
+     * @cssprop --wcs-alert-title-color - Color of the title
+     * @cssprop --wcs-alert-subtitle-color - Color of the subtitle
+     * @cssprop --wcs-alert-dismiss-button-color - Color of the dismiss button
+     * @cssprop --wcs-alert-title-font-weight - Font weight of the title
+     * @cssprop --wcs-alert-subtitle-font-weight - Font weight of the subtitle
+     * @cssprop --wcs-alert-title-font-size - Font size of the title
+     * @cssprop --wcs-alert-subtitle-font-size - Font size of the subtitle
+     * @cssprop --wcs-alert-border-width - Border width of the alert
+     * @cssprop --wcs-alert-border-color - Border color of the alert
+     * @cssprop --wcs-alert-border-radius - Border radius of the alert
+     * @cssprop --wcs-alert-padding - Padding of the alert
+     * @cssprop --wcs-alert-gap - Gap between each element of the alert, icon content and close button
+     * @cssprop --wcs-alert-min-width - Minimum width of the alert, default to 100% and it is set by alert-drawer component
+     * @cssprop --wcs-alert-progress-bar-height - Height of the progress bar if `showProgressBar` is set to true
+     * @cssprop --wcs-alert-progress-bar-background-color - Background color of the progress bar
+     */
+    interface WcsAlert {
+        "intent"?: WcsAlertIntent;
+        /**
+          * Event emitted when the alert is dismissed
+         */
+        "onWcsAlertDismiss"?: (event: WcsAlertCustomEvent<void>) => void;
+        /**
+          * Controls the visibility state of the alert. This property is exposed to allow control of the alert's display state and animation timing: - Used by wcs-alert-drawer to coordinate exit animations when the alert is dismissed - Can be used directly for custom implementations (though using wcs-alert-drawer is recommended) - When set to false, it triggers the exit animation if implemented  Note: While direct usage is possible for custom implementations, it's recommended to use wcs-alert-drawer for consistent alert management and animations.
+         */
+        "show"?: boolean;
+        "showProgressBar"?: boolean;
+        /**
+          * Time duration of the alert visibility  5000ms by default If 0, the alert will not emit `wcsAlertDismiss` event automatically
+         */
+        "timeout"?: number;
+    }
+    /**
+     * Serve as a container for displaying `wcs-alert` components. Directly use this component to display alerts in your applications.
+     * ## Usage
+     * You can place the `wcs-alert-drawer` component anywhere in your application. It will be used to display alerts.
+     * You need to set `position` property to define where the alert drawer will be displayed on the screen.
+     * About alerts order:
+     * - alerts are ordered up-bottom if the position is `top` and bottom-up if the position is `bottom`
+     * ## Accessibility guidelines 💡
+     * - The component has `aria-live="polite"` and `aria-atomic="true"` attributes to announce the new alerts to screen readers
+     * ## Configuration (on the web component)
+     * Per default, the `wcs-alert-drawer` is configured with:
+     * - `position: 'top-right'`
+     * - `showProgressBar: false`
+     * - `timeout: 5000`
+     * When using the `WcsAlertDrawer::show(alert: WcsAlertConfig)` method, you can override the default configuration by 
+     * overriding it through the argument.
+     * You can also set them in the `wcs-alert-drawer` component directly as attributes
+     * ```html
+     * <wcs-alert-drawer position="top-right" show-progress-bar timeout="10000">
+     * ```
+     * With this configuration, all alerts will be displayed with a progress bar and a timeout of 10 seconds.
+     * @cssprop --wcs-alert-drawer-gap - Gap between alerts
+     * @cssprop --wcs-alert-drawer-margin-horizontal - Margin horizontal of the alert drawer
+     * @cssprop --wcs-alert-drawer-margin-vertical - Margin vertical of the alert drawer
+     * @cssprop --wcs-alert-drawer-hide-alert-animation-duration - Duration of the hide alert animation
+     * @cssprop --wcs-alert-drawer-min-width - Minimum width of the alert drawer => define the width of the alerts
+     */
+    interface WcsAlertDrawer {
+        /**
+          * Position of the alert drawer on the screen
+         */
+        "position"?: WcsAlertDrawerPosition;
+        /**
+          * Whether to show the progress bar or not
+         */
+        "showProgressBar"?: boolean;
+        /**
+          * Timeout for the alert to be dismissed automatically
+         */
+        "timeout"?: number;
+    }
     interface WcsApp {
     }
     /**
@@ -4508,21 +4938,63 @@ declare namespace LocalJSX {
     /**
      * The card component is a container that display content such as text, images, buttons, and lists.  
      * A card can be a single component, but is often made up of a header, title, subtitle, and content.
+     * While they're very flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body`
+     * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to make sure the card is well-designed.
      * @cssprop --wcs-card-border-color - Border color of the card
      * @cssprop --wcs-card-border-radius - Border radius of the card
      * @cssprop --wcs-card-border-width - Border width of the card
      * @cssprop --wcs-card-background-color - Background color of the card
      * @cssprop --wcs-card-text-color - Text color of the card
+     * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal
      */
     interface WcsCard {
         "mode"?: CardMode;
+        /**
+          * The orientation of the card, can be horizontal or vertical
+         */
+        "orientation"?: CardOrientation;
     }
     /**
      * The card-body is a subcomponent of `wcs-card`. It represents content of the card with an extra padding around.
      * @cssprop --wcs-card-body-padding - Padding of the card body
+     * @cssprop --wcs-card-body-gap - Gap between each element in the card body
      */
     interface WcsCardBody {
     }
+    /**
+     * A content for a card inside card-body. Commonly used to provide more details about the card content. 
+     * The information provided should be concise and easy to read.
+     * By default, the margin is removed from the top and bottom of the card description.
+     * @cssprop --wcs-card-content-color - The color of the card description.
+     * @cssprop --wcs-card-content-font-size - The font size of the card description.
+     */
+    interface WcsCardContent {
+    }
+    /**
+     * The card footer component is a container that display content at the bottom of the card.
+     * It uses a flex layout to organize actions the user can take with a card
+     * @cssprop --wcs-card-footer-gap - Gap of the card footer
+     */
+    interface WcsCardFooter {
+    }
+    /**
+     * The card header component is a container that display a title and an action, it can also display a label as a `<wcs-badge>` component.
+     * The default slotted element is displayed as a `<h3>` element
+     * @cssprop --wcs-card-header-title-color - Color of the title
+     * @cssprop --wcs-card-header-title-font-size - Font size of the title
+     * @cssprop --wcs-card-header-title-font-weight - Font weight of the title
+     * @cssprop --wcs-card-header-gap - Gap between the title and the badge
+     */
+    interface WcsCardHeader {
+    }
+    /**
+     * The card media component is a container that display an image/icon inside a card. 
+     * On horizontal orientation, the image/icon has an aspect ratio of 1/1
+     * On vertical orientation, the image/icon has an aspect ratio of 16/9.
+     * @cssprop --wcs-card-media-max-width-horizontal - Max width of the image when the card is horizontal
+     */
+    interface WcsCardMedia {
+    }
     /**
      * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.
      * @cssprop --wcs-checkbox-border-color-default - Default color of the border
@@ -4873,6 +5345,7 @@ declare namespace LocalJSX {
      * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover
      * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field
      * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover
+     * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus
      * @cssprop --wcs-editable-field-border-style - Border style of the editable field
      * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size
      * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size
@@ -4890,7 +5363,7 @@ declare namespace LocalJSX {
          */
         "formatFn"?: FormatFn<any>;
         /**
-          * Label of the field
+          * Label of the field.   Will also be part of the edit button `aria-label`.
          */
         "label": string;
         /**
@@ -5340,6 +5813,7 @@ declare namespace LocalJSX {
      * @cssprop --wcs-input-border-color-default - default border color of the input when not focused
      * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled
      * @cssprop --wcs-input-border-color-focus - border color of the input when focused
+     * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused
      * @cssprop --wcs-input-border-color-error - border color of the input when in error state
      * @cssprop --wcs-input-value-color - color of the input value
      * @cssprop --wcs-input-value-font-weight - font weight of the input value
@@ -5385,6 +5859,7 @@ declare namespace LocalJSX {
           * A hint to the browser for which enter key to display.
          */
         "enterkeyhint"?: WcsInputEnterKeyHint;
+        "hidePasswordButtonAriaLabel"?: string;
         /**
           * Name of the material icon to add to the input
          */
@@ -5453,6 +5928,7 @@ declare namespace LocalJSX {
           * If `true`, the user must fill in a value before submitting a form.
          */
         "required"?: boolean;
+        "showPasswordButtonAriaLabel"?: string;
         /**
           * Specify the size (height) of the input.
          */
@@ -5502,6 +5978,10 @@ declare namespace LocalJSX {
     /**
      * Lists are used for grouping a collection of related items.
      * Standard lists can be used either with or without icons. Depending on the context, the list can have one or more
+     * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action. 
+     * ## Accessibility guidelines 💡
+     * > - You should wrap your list-items inside a container with a `role` attribute set to `list`. On each `wcs-list-item`, 
+     *   you should set a `role` attribute to `listitem`. See the code below.
      * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action.
      * @cssprop --wcs-list-item-padding - Padding of the list item
      * @cssprop --wcs-list-item-border-width - Border width of the list item
@@ -5542,7 +6022,7 @@ declare namespace LocalJSX {
     interface WcsListItemProperty {
     }
     /**
-     * A component used to display a [Material Icon](https://fonts.google.com/icons). Can be useful when used in wcs-grid or in a wcs-button.
+     * A component used to display a [Material Icon](https://fonts.google.com/icons?icon.set=Material+Icons). Can be useful when used in wcs-grid or in a wcs-button.
      */
     interface WcsMatIcon {
         /**
@@ -5566,6 +6046,9 @@ declare namespace LocalJSX {
      * > - 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.
+     * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial 
+     * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you 
+     * > want to focus. You will see a story as example below
      * > - 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/
@@ -5593,10 +6076,19 @@ declare namespace LocalJSX {
           * Specifies the aria-label present on the close button when the modal is opened.   Only use when `showCloseButton` is `true`.
          */
         "closeButtonAriaLabel"?: string;
+        /**
+          * Disables automatic focus behavior when the modal opens.  When set to true, the modal will not automatically focus any element upon opening. Use this property with caution, as managing focus is important for accessibility. Consider providing an alternative focus management strategy if disabling the default behavior.
+         */
+        "disableAutoFocus"?: boolean;
         /**
           * Specifies whether the component should hide the actions slot or not
          */
         "hideActions"?: boolean;
+        /**
+          * The ID of the element to automatically focus when the modal opens.  If this property is not set and `disableAutoFocus` is false, the modal will automatically focus the first focusable element within its content. This follows accessibility best practices by ensuring keyboard navigation starts from a logical point when the modal opens.
+          * @example <wcs-modal initial-focus-element="cancel-button"></wcs-modal>
+         */
+        "initialFocusElementId"?: string;
         /**
           * Specifies which element id controls the modal
           * @private
@@ -6012,6 +6504,10 @@ declare namespace LocalJSX {
           * The text to display when the select is empty.
          */
         "placeholder"?: string | null;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
         /**
           * **Only works with `autocomplete` mode.**   If `true`, the server mode disables the client-side filtering on your select and allows you to handle which options should be present in your DOM.
          */
@@ -6233,6 +6729,9 @@ declare namespace LocalJSX {
     }
     /**
      * Tabs component to switch between tab content. Use in conjunction with `wcs-tab`.
+     * ## Accessibility guidelines 💡
+     * > - Mobile display should be used for narrower screens (automatically set by default).
+     * > - The component respects the W3C [tab pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
      * @cssprop --wcs-tabs-indicator-height - Height of the tabs indicator
      * @cssprop --wcs-tabs-indicator-background-color - Background color of the tabs indicator
      * @cssprop --wcs-tabs-indicator-border-radius - Border radius of the tabs indicator
@@ -6254,6 +6753,24 @@ declare namespace LocalJSX {
      * @cssprop --wcs-tabs-padding-left - Padding left of the tabs
      * @cssprop --wcs-tabs-headers-border-bottom - Border bottom (gutter) below the tabs
      * @cssprop --wcs-tabs-transition-duration - Transition duration of the tabs
+     * @cssprop --wcs-tabs-mobile-breakpoint - Breakpoint for mobile display (default: 575px)
+     * @cssprop --wcs-tabs-mobile-overlay-border-width - Border width of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-overlay-border-color - Border color of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-overlay-background-color - Background color of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-overlay-padding - Padding of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-overlay-border-radius - Border radius of the mobile overlay
+     * @cssprop --wcs-tabs-mobile-gap - Gap between the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-padding - Padding of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-height - Height of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-font-weight-default - Default weight of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-font-weight-active - Active font weight of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-font-size - Font size of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-color - Text color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-background-color-default - Default background color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-background-color-focus - Focused background color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-background-color-hover - Hovered background color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-background-color-press - Pressed background color of the mobile tabs in the overlay
+     * @cssprop --wcs-tabs-mobile-border-radius - Border radius of the mobile tabs in the overlay
      */
     interface WcsTabs {
         /**
@@ -6424,14 +6941,13 @@ declare namespace LocalJSX {
      * (for longer content).
      * Note that this component is based on the Tippy.js library : https://atomiks.github.io/tippyjs/
      * ## Accessibility guidelines 💡
-     * The component places necessary aria attribute on your target element (like the `wcs-button`) :
-     * - `aria-expanded`: set to true when popover is open, false when it is closed
      * The problem is that impaired users may not be able to see what is the information provided by the tooltip. To solve
      * this problem, the tooltip should be served with some aria attributes to make it accessible.
      * Aria-features `wcs-tooltip` respect:
      * - dismiss when the user presses the `Escape` key
      * - has a `role=tooltip`
-     * - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
+     * - when set to `interactive` mode
+     *  - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
      * Aria-features `wcs-tooltip` **does not respect with `wcs-button`**:
      * - aria-controls => we cannot do it yet, we need to wait for Cross root ARIA - export ID (https://github.com/WICG/aom/blob/gh-pages/exportid-explainer.md)
      * But you have to provide the "link" between the element you want to describe and the tooltip. To do this, you have to
@@ -6481,7 +6997,7 @@ declare namespace LocalJSX {
          */
         "position"?: WcsTooltipPosition;
         /**
-          * Allows you to change the theme used by tippy.  The WCS theme is used by default and uses the WCS CSS variables.  You can create a theme by following this documentation and choosing a custom name : https://atomiks.github.io/tippyjs/v6/themes/
+          * Allows you to change the theme used by tippy.  The WCS theme 'dark' is used by default and uses the WCS CSS variables.  You can create a theme by following this documentation and choosing a custom name : https://atomiks.github.io/tippyjs/v6/themes/
          */
         "theme"?: 'dark' | 'light';
         /**
@@ -6495,6 +7011,8 @@ declare namespace LocalJSX {
         "wcs-accordion-header": WcsAccordionHeader;
         "wcs-accordion-panel": WcsAccordionPanel;
         "wcs-action-bar": WcsActionBar;
+        "wcs-alert": WcsAlert;
+        "wcs-alert-drawer": WcsAlertDrawer;
         "wcs-app": WcsApp;
         "wcs-badge": WcsBadge;
         "wcs-breadcrumb": WcsBreadcrumb;
@@ -6502,6 +7020,10 @@ declare namespace LocalJSX {
         "wcs-button": WcsButton;
         "wcs-card": WcsCard;
         "wcs-card-body": WcsCardBody;
+        "wcs-card-content": WcsCardContent;
+        "wcs-card-footer": WcsCardFooter;
+        "wcs-card-header": WcsCardHeader;
+        "wcs-card-media": WcsCardMedia;
         "wcs-checkbox": WcsCheckbox;
         "wcs-com-nav": WcsComNav;
         "wcs-com-nav-category": WcsComNavCategory;
@@ -6621,6 +7143,57 @@ declare module "@stencil/core" {
              * @cssprop --wcs-tabs-gutter-background-color - Background color of the gutter
              */
             "wcs-action-bar": LocalJSX.WcsActionBar & JSXBase.HTMLAttributes<HTMLWcsActionBarElement>;
+            /**
+             * Alerts are used to communicate a state or an action that has been performed.
+             * It has to be used conjunction with the `wcs-alert-drawer` component, or you can use it independently by taking care of 
+             * the alert visibility
+             * @cssprop --wcs-alert-background-color - Background color of the alert
+             * @cssprop --wcs-alert-icon-background-color - Background color of the icon
+             * @cssprop --wcs-alert-title-color - Color of the title
+             * @cssprop --wcs-alert-subtitle-color - Color of the subtitle
+             * @cssprop --wcs-alert-dismiss-button-color - Color of the dismiss button
+             * @cssprop --wcs-alert-title-font-weight - Font weight of the title
+             * @cssprop --wcs-alert-subtitle-font-weight - Font weight of the subtitle
+             * @cssprop --wcs-alert-title-font-size - Font size of the title
+             * @cssprop --wcs-alert-subtitle-font-size - Font size of the subtitle
+             * @cssprop --wcs-alert-border-width - Border width of the alert
+             * @cssprop --wcs-alert-border-color - Border color of the alert
+             * @cssprop --wcs-alert-border-radius - Border radius of the alert
+             * @cssprop --wcs-alert-padding - Padding of the alert
+             * @cssprop --wcs-alert-gap - Gap between each element of the alert, icon content and close button
+             * @cssprop --wcs-alert-min-width - Minimum width of the alert, default to 100% and it is set by alert-drawer component
+             * @cssprop --wcs-alert-progress-bar-height - Height of the progress bar if `showProgressBar` is set to true
+             * @cssprop --wcs-alert-progress-bar-background-color - Background color of the progress bar
+             */
+            "wcs-alert": LocalJSX.WcsAlert & JSXBase.HTMLAttributes<HTMLWcsAlertElement>;
+            /**
+             * Serve as a container for displaying `wcs-alert` components. Directly use this component to display alerts in your applications.
+             * ## Usage
+             * You can place the `wcs-alert-drawer` component anywhere in your application. It will be used to display alerts.
+             * You need to set `position` property to define where the alert drawer will be displayed on the screen.
+             * About alerts order:
+             * - alerts are ordered up-bottom if the position is `top` and bottom-up if the position is `bottom`
+             * ## Accessibility guidelines 💡
+             * - The component has `aria-live="polite"` and `aria-atomic="true"` attributes to announce the new alerts to screen readers
+             * ## Configuration (on the web component)
+             * Per default, the `wcs-alert-drawer` is configured with:
+             * - `position: 'top-right'`
+             * - `showProgressBar: false`
+             * - `timeout: 5000`
+             * When using the `WcsAlertDrawer::show(alert: WcsAlertConfig)` method, you can override the default configuration by 
+             * overriding it through the argument.
+             * You can also set them in the `wcs-alert-drawer` component directly as attributes
+             * ```html
+             * <wcs-alert-drawer position="top-right" show-progress-bar timeout="10000">
+             * ```
+             * With this configuration, all alerts will be displayed with a progress bar and a timeout of 10 seconds.
+             * @cssprop --wcs-alert-drawer-gap - Gap between alerts
+             * @cssprop --wcs-alert-drawer-margin-horizontal - Margin horizontal of the alert drawer
+             * @cssprop --wcs-alert-drawer-margin-vertical - Margin vertical of the alert drawer
+             * @cssprop --wcs-alert-drawer-hide-alert-animation-duration - Duration of the hide alert animation
+             * @cssprop --wcs-alert-drawer-min-width - Minimum width of the alert drawer => define the width of the alerts
+             */
+            "wcs-alert-drawer": LocalJSX.WcsAlertDrawer & JSXBase.HTMLAttributes<HTMLWcsAlertDrawerElement>;
             "wcs-app": LocalJSX.WcsApp & JSXBase.HTMLAttributes<HTMLWcsAppElement>;
             /**
              * The badge component is a small label, generally appearing inside or in proximity to another larger interface component,
@@ -6725,18 +7298,52 @@ declare module "@stencil/core" {
             /**
              * The card component is a container that display content such as text, images, buttons, and lists.  
              * A card can be a single component, but is often made up of a header, title, subtitle, and content.
+             * While they're very flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body`
+             * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to make sure the card is well-designed.
              * @cssprop --wcs-card-border-color - Border color of the card
              * @cssprop --wcs-card-border-radius - Border radius of the card
              * @cssprop --wcs-card-border-width - Border width of the card
              * @cssprop --wcs-card-background-color - Background color of the card
              * @cssprop --wcs-card-text-color - Text color of the card
+             * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal
              */
             "wcs-card": LocalJSX.WcsCard & JSXBase.HTMLAttributes<HTMLWcsCardElement>;
             /**
              * The card-body is a subcomponent of `wcs-card`. It represents content of the card with an extra padding around.
              * @cssprop --wcs-card-body-padding - Padding of the card body
+             * @cssprop --wcs-card-body-gap - Gap between each element in the card body
              */
             "wcs-card-body": LocalJSX.WcsCardBody & JSXBase.HTMLAttributes<HTMLWcsCardBodyElement>;
+            /**
+             * A content for a card inside card-body. Commonly used to provide more details about the card content. 
+             * The information provided should be concise and easy to read.
+             * By default, the margin is removed from the top and bottom of the card description.
+             * @cssprop --wcs-card-content-color - The color of the card description.
+             * @cssprop --wcs-card-content-font-size - The font size of the card description.
+             */
+            "wcs-card-content": LocalJSX.WcsCardContent & JSXBase.HTMLAttributes<HTMLWcsCardContentElement>;
+            /**
+             * The card footer component is a container that display content at the bottom of the card.
+             * It uses a flex layout to organize actions the user can take with a card
+             * @cssprop --wcs-card-footer-gap - Gap of the card footer
+             */
+            "wcs-card-footer": LocalJSX.WcsCardFooter & JSXBase.HTMLAttributes<HTMLWcsCardFooterElement>;
+            /**
+             * The card header component is a container that display a title and an action, it can also display a label as a `<wcs-badge>` component.
+             * The default slotted element is displayed as a `<h3>` element
+             * @cssprop --wcs-card-header-title-color - Color of the title
+             * @cssprop --wcs-card-header-title-font-size - Font size of the title
+             * @cssprop --wcs-card-header-title-font-weight - Font weight of the title
+             * @cssprop --wcs-card-header-gap - Gap between the title and the badge
+             */
+            "wcs-card-header": LocalJSX.WcsCardHeader & JSXBase.HTMLAttributes<HTMLWcsCardHeaderElement>;
+            /**
+             * The card media component is a container that display an image/icon inside a card. 
+             * On horizontal orientation, the image/icon has an aspect ratio of 1/1
+             * On vertical orientation, the image/icon has an aspect ratio of 16/9.
+             * @cssprop --wcs-card-media-max-width-horizontal - Max width of the image when the card is horizontal
+             */
+            "wcs-card-media": LocalJSX.WcsCardMedia & JSXBase.HTMLAttributes<HTMLWcsCardMediaElement>;
             /**
              * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.
              * @cssprop --wcs-checkbox-border-color-default - Default color of the border
@@ -6969,6 +7576,7 @@ declare module "@stencil/core" {
              * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover
              * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field
              * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover
+             * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus
              * @cssprop --wcs-editable-field-border-style - Border style of the editable field
              * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size
              * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size
@@ -7221,6 +7829,7 @@ declare module "@stencil/core" {
              * @cssprop --wcs-input-border-color-default - default border color of the input when not focused
              * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled
              * @cssprop --wcs-input-border-color-focus - border color of the input when focused
+             * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused
              * @cssprop --wcs-input-border-color-error - border color of the input when in error state
              * @cssprop --wcs-input-value-color - color of the input value
              * @cssprop --wcs-input-value-font-weight - font weight of the input value
@@ -7249,6 +7858,10 @@ declare module "@stencil/core" {
             /**
              * Lists are used for grouping a collection of related items.
              * Standard lists can be used either with or without icons. Depending on the context, the list can have one or more
+             * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action. 
+             * ## Accessibility guidelines 💡
+             * > - You should wrap your list-items inside a container with a `role` attribute set to `list`. On each `wcs-list-item`, 
+             *   you should set a `role` attribute to `listitem`. See the code below.
              * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action.
              * @cssprop --wcs-list-item-padding - Padding of the list item
              * @cssprop --wcs-list-item-border-width - Border width of the list item
@@ -7282,7 +7895,7 @@ declare module "@stencil/core" {
              */
             "wcs-list-item-property": LocalJSX.WcsListItemProperty & JSXBase.HTMLAttributes<HTMLWcsListItemPropertyElement>;
             /**
-             * A component used to display a [Material Icon](https://fonts.google.com/icons). Can be useful when used in wcs-grid or in a wcs-button.
+             * A component used to display a [Material Icon](https://fonts.google.com/icons?icon.set=Material+Icons). Can be useful when used in wcs-grid or in a wcs-button.
              */
             "wcs-mat-icon": LocalJSX.WcsMatIcon & JSXBase.HTMLAttributes<HTMLWcsMatIconElement>;
             /**
@@ -7293,6 +7906,9 @@ declare module "@stencil/core" {
              * > - 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.
+             * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial 
+             * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you 
+             * > want to focus. You will see a story as example below
              * > - 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/
@@ -7683,6 +8299,9 @@ declare module "@stencil/core" {
             "wcs-tab": LocalJSX.WcsTab & JSXBase.HTMLAttributes<HTMLWcsTabElement>;
             /**
              * Tabs component to switch between tab content. Use in conjunction with `wcs-tab`.
+             * ## Accessibility guidelines 💡
+             * > - Mobile display should be used for narrower screens (automatically set by default).
+             * > - The component respects the W3C [tab pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
              * @cssprop --wcs-tabs-indicator-height - Height of the tabs indicator
              * @cssprop --wcs-tabs-indicator-background-color - Background color of the tabs indicator
              * @cssprop --wcs-tabs-indicator-border-radius - Border radius of the tabs indicator
@@ -7704,6 +8323,24 @@ declare module "@stencil/core" {
              * @cssprop --wcs-tabs-padding-left - Padding left of the tabs
              * @cssprop --wcs-tabs-headers-border-bottom - Border bottom (gutter) below the tabs
              * @cssprop --wcs-tabs-transition-duration - Transition duration of the tabs
+             * @cssprop --wcs-tabs-mobile-breakpoint - Breakpoint for mobile display (default: 575px)
+             * @cssprop --wcs-tabs-mobile-overlay-border-width - Border width of the mobile overlay
+             * @cssprop --wcs-tabs-mobile-overlay-border-color - Border color of the mobile overlay
+             * @cssprop --wcs-tabs-mobile-overlay-background-color - Background color of the mobile overlay
+             * @cssprop --wcs-tabs-mobile-overlay-padding - Padding of the mobile overlay
+             * @cssprop --wcs-tabs-mobile-overlay-border-radius - Border radius of the mobile overlay
+             * @cssprop --wcs-tabs-mobile-gap - Gap between the mobile tabs in the overlay
+             * @cssprop --wcs-tabs-mobile-padding - Padding of the mobile tabs in the overlay
+             * @cssprop --wcs-tabs-mobile-height - Height of the mobile tabs in the overlay
+             * @cssprop --wcs-tabs-mobile-font-weight-default - Default weight of the mobile tabs in the overlay
+             * @cssprop --wcs-tabs-mobile-font-weight-active - Active font weight of the mobile tabs in the overlay
+             * @cssprop --wcs-tabs-mobile-font-size - Font size of the mobile tabs in the overlay
+             * @cssprop --wcs-tabs-mobile-color - Text color of the mobile tabs in the overlay
+             * @cssprop --wcs-tabs-mobile-background-color-default - Default background color of the mobile tabs in the overlay
+             * @cssprop --wcs-tabs-mobile-background-color-focus - Focused background color of the mobile tabs in the overlay
+             * @cssprop --wcs-tabs-mobile-background-color-hover - Hovered background color of the mobile tabs in the overlay
+             * @cssprop --wcs-tabs-mobile-background-color-press - Pressed background color of the mobile tabs in the overlay
+             * @cssprop --wcs-tabs-mobile-border-radius - Border radius of the mobile tabs in the overlay
              */
             "wcs-tabs": LocalJSX.WcsTabs & JSXBase.HTMLAttributes<HTMLWcsTabsElement>;
             /**
@@ -7747,14 +8384,13 @@ declare module "@stencil/core" {
              * (for longer content).
              * Note that this component is based on the Tippy.js library : https://atomiks.github.io/tippyjs/
              * ## Accessibility guidelines 💡
-             * The component places necessary aria attribute on your target element (like the `wcs-button`) :
-             * - `aria-expanded`: set to true when popover is open, false when it is closed
              * The problem is that impaired users may not be able to see what is the information provided by the tooltip. To solve
              * this problem, the tooltip should be served with some aria attributes to make it accessible.
              * Aria-features `wcs-tooltip` respect:
              * - dismiss when the user presses the `Escape` key
              * - has a `role=tooltip`
-             * - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
+             * - when set to `interactive` mode
+             *  - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
              * Aria-features `wcs-tooltip` **does not respect with `wcs-button`**:
              * - aria-controls => we cannot do it yet, we need to wait for Cross root ARIA - export ID (https://github.com/WICG/aom/blob/gh-pages/exportid-explainer.md)
              * But you have to provide the "link" between the element you want to describe and the tooltip. To do this, you have to