npm - wcs-core - Versions diffs - 7.1.0 → 7.2.0 - Mend

wcs-core 7.1.0 → 7.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (570) hide show

package/dist/types/components.d.ts CHANGED Viewed

@@ -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.
@@ -920,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
          */
@@ -1350,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 {
         /**
@@ -2048,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
@@ -2069,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 {
         /**
@@ -2322,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;
@@ -2503,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: {
@@ -2632,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 {
     }
@@ -2647,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 {
     }
@@ -2654,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;
@@ -3512,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 {
     }
@@ -4088,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
@@ -4109,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;
@@ -4217,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;
@@ -4224,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;
@@ -4375,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 {
     }
     /**
@@ -4548,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
@@ -5590,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 {
         /**
@@ -6297,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
@@ -6318,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 {
         /**
@@ -6558,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;
@@ -6565,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;
@@ -6684,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,
@@ -6788,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
@@ -7351,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>;
             /**
@@ -7755,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
@@ -7776,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>;
             /**