wcs-core 7.5.1 → 7.7.0

package/dist/types/components.d.ts

@@ -21,6 +21,7 @@ import { RowCssPartsFn, WcsCellFormatter, WcsGridAllRowSelectedEventDetails, Wcs
 import { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode } from "./components/horizontal-stepper/horizontal-stepper-interface";
 import { AutocompleteTypes, InputChangeEventDetail, TextFieldTypes, WcsInputAutocorrect, WcsInputEnterKeyHint, WcsInputInputMode, WcsInputSize, WcsInputState } from "./components/input/input-interface";
 import { MaterialIconFamily, MaterialIconSize } from "./components/mat-icon/mat-icon-interface";
+import { WcsMessageBackground } from "./components/message/message-interface";
 import { ModalSize } from "./components/modal/modal-interface";
 import { WcsNativeSelectSize } from "./components/native-select/native-select-interface";
 import { CssTypes, WcsSize } from "./shared-types";
@@ -50,6 +51,7 @@ export { RowCssPartsFn, WcsCellFormatter, WcsGridAllRowSelectedEventDetails, Wcs
 export { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode } from "./components/horizontal-stepper/horizontal-stepper-interface";
 export { AutocompleteTypes, InputChangeEventDetail, TextFieldTypes, WcsInputAutocorrect, WcsInputEnterKeyHint, WcsInputInputMode, WcsInputSize, WcsInputState } from "./components/input/input-interface";
 export { MaterialIconFamily, MaterialIconSize } from "./components/mat-icon/mat-icon-interface";
+export { WcsMessageBackground } from "./components/message/message-interface";
 export { ModalSize } from "./components/modal/modal-interface";
 export { WcsNativeSelectSize } from "./components/native-select/native-select-interface";
 export { CssTypes, WcsSize } from "./shared-types";
@@ -166,7 +168,7 @@ export namespace Components {
     }
     /**
      * 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 
+     * 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
@@ -226,13 +228,18 @@ export namespace Components {
      * @cssprop --wcs-alert-drawer-min-width - Minimum width of the alert drawer => define the width of the alerts
      */
     interface WcsAlertDrawer {
+        /**
+          * Method exposed on `wcs-alert-drawer` to clear all `wcs-alert` which are inside, via the JS API
+          * @example Plain javascript (example inside a script tag): ```javascript  document.querySelector('wcs-alert-drawer').clear(); ```
+         */
+        "clear": () => Promise<void>;
         /**
           * 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  });
+          * @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>;
@@ -382,12 +389,23 @@ export namespace Components {
      * @cssprop --wcs-button-font-size-l - font-size for a size l button
      * @cssprop --wcs-button-padding-size-l - padding for a size l button
      * @cssprop --wcs-button-font-weight - font weight of a plain,stroked,clear button
+     * @cssprop --wcs-button-gap - gap between button content (text and icons)
+     * @cssprop --wcs-button-start-icon-size-s - size of the start icon for a size s button
+     * @cssprop --wcs-button-start-icon-size-m - size of the start icon for a size m button
+     * @cssprop --wcs-button-start-icon-size-l - size of the start icon for a size l button
+     * @cssprop --wcs-button-end-icon-size-s - size of the end icon for a size s button
+     * @cssprop --wcs-button-end-icon-size-m - size of the end icon for a size m button
+     * @cssprop --wcs-button-end-icon-size-l - size of the end icon for a size l button
      */
     interface WcsButton {
         /**
           * Specify whether the button is disabled or not.
          */
         "disabled": boolean;
+        /**
+          * Name of a wcs-mat-icon to display at the end (right) of the button.
+         */
+        "endIcon"?: string;
         /**
           * Set a URL to point to.<br/> If specified use a `a` tag instead of `btn`.
          */
@@ -413,6 +431,10 @@ export namespace Components {
           * Specify the size of the button.
          */
         "size": WcsButtonSize;
+        /**
+          * Name of a wcs-mat-icon to display at the start (left) of the button.
+         */
+        "startIcon"?: string;
         /**
           * Specifies where to open the linked document when using href (see prop above)<br/> Default '_self' will open the linked document in the same frame as it was clicked
          */
@@ -423,10 +445,15 @@ export namespace Components {
         "type": WcsButtonType;
     }
     /**
-     * The card component is a container that display content such as text, images, buttons, and lists.  
+     * The card component is a container that displays 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.
+     * While cards are flexible, it is important to use them consistently. You may use `wcs-card-media` outside
+     * `wcs-card-body`, and `wcs-card-header`, `wcs-card-content`, and `wcs-card-footer` within `wcs-card-body`
+     * to keep the card structure clear and well-designed.
+     * `wcs-card-content` is intended for textual content only. If you need to display a form or other rich interactive
+     * content inside a card, place it directly inside `wcs-card-body` instead of wrapping it in `wcs-card-content`.
+     * A card can also be used as a visual wrapper to get the card border, radius, and background. In that case, prefer a
+     * direct child `wcs-card-body` when you need to host structured content.
      * @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
@@ -450,8 +477,12 @@ export namespace Components {
         "setOrientation": (orientation: CardOrientation) => Promise<void>;
     }
     /**
-     * A content for a card inside card-body. Commonly used to provide more details about the card content. 
+     * A text content container for a card inside `wcs-card-body`.
+     * Commonly used to provide additional details about the card content.
      * The information provided should be concise and easy to read.
+     * Use `wcs-card-content` for text only. It applies text-oriented layout rules and overflow behavior.
+     * Forms and other rich interactive content should be placed directly inside `wcs-card-body`, not inside
+     * `wcs-card-content`.
      * 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.
@@ -1586,6 +1617,10 @@ export namespace Components {
     }
     /**
      * 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.
+     * @cssprop --wcs-mat-icon-font-size-s - font size for a size s icon
+     * @cssprop --wcs-mat-icon-font-size-m - font size for a size m icon
+     * @cssprop --wcs-mat-icon-font-size-l - font size for a size l icon
+     * @cssprop --wcs-mat-icon-font-size-xl - font size for a size xl icon
      */
     interface WcsMatIcon {
         /**
@@ -1602,6 +1637,56 @@ export namespace Components {
          */
         "size": MaterialIconSize;
     }
+    /**
+     * Messages are used to communicate contextual information to users.
+     * They can display information, success, warning, or error states.
+     * Unlike alerts, messages are static feedback elements and are not automatically dismissed.
+     * @cssprop --wcs-message-title-color - Text color of the title
+     * @cssprop --wcs-message-subtitle-color - Text color of the subtitle
+     * @cssprop --wcs-message-title-font-weight - Font weight of the title
+     * @cssprop --wcs-message-subtitle-font-weight - Font weight of the subtitle
+     * @cssprop --wcs-message-title-font-size - Font size of the title
+     * @cssprop --wcs-message-subtitle-font-size - Font size of the subtitle
+     * @cssprop --wcs-message-dismiss-button-color - Color of the dismiss button
+     * @cssprop --wcs-message-border-radius - Border radius of the message
+     * @cssprop --wcs-message-border-width - Border width of the message
+     * @cssprop --wcs-message-padding - Padding of the message
+     * @cssprop --wcs-message-gap - Gap between icon and content
+     * @cssprop --wcs-message-border-color-success - Border color of success messages
+     * @cssprop --wcs-message-icon-color-success - Icon color of success messages
+     * @cssprop --wcs-message-background-color-lightest-success - Lightest background color of success messages
+     * @cssprop --wcs-message-background-color-lighter-success - Lighter background color of success messages
+     * @cssprop --wcs-message-border-color-information - Border color of information messages
+     * @cssprop --wcs-message-icon-color-information - Icon color of information messages
+     * @cssprop --wcs-message-background-color-lightest-information - Lightest background color of information messages
+     * @cssprop --wcs-message-background-color-lighter-information - Lighter background color of information messages
+     * @cssprop --wcs-message-border-color-warning - Border color of warning messages
+     * @cssprop --wcs-message-icon-color-warning - Icon color of warning messages
+     * @cssprop --wcs-message-background-color-lightest-warning - Lightest background color of warning messages
+     * @cssprop --wcs-message-background-color-lighter-warning - Lighter background color of warning messages
+     * @cssprop --wcs-message-border-color-error - Border color of error messages
+     * @cssprop --wcs-message-icon-color-error - Icon color of error messages
+     * @cssprop --wcs-message-background-color-lightest-error - Lightest background color of error messages
+     * @cssprop --wcs-message-background-color-lighter-error - Lighter background color of error messages
+     */
+    interface WcsMessage {
+        /**
+          * Defines the background appearance of the message.
+         */
+        "background": WcsMessageBackground;
+        /**
+          * Defines the semantic intent of the message. - Non-disruptive messages (`information`, `success`) use `role="status"` - Disruptive messages (`warning`, `error`) use `role="alert"`
+         */
+        "intent": WcsAlertIntent;
+        /**
+          * Defines whether the message should have a border. The border color is determined by the intent of the message.
+         */
+        "showBorder": boolean;
+        /**
+          * Specifies whether the component should display a close button.
+         */
+        "showCloseButton": boolean;
+    }
     /**
      * The modal component (also named dialog or popup) is an interface element that appears on top of the page content.
      * Use it to show a message, a confirmation dialog, or any other content like forms.
@@ -2634,6 +2719,10 @@ export interface WcsInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLWcsInputElement;
 }
+export interface WcsMessageCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLWcsMessageElement;
+}
 export interface WcsModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLWcsModalElement;
@@ -2772,7 +2861,7 @@ declare global {
     }
     /**
      * 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 
+     * 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
@@ -2958,6 +3047,13 @@ declare global {
      * @cssprop --wcs-button-font-size-l - font-size for a size l button
      * @cssprop --wcs-button-padding-size-l - padding for a size l button
      * @cssprop --wcs-button-font-weight - font weight of a plain,stroked,clear button
+     * @cssprop --wcs-button-gap - gap between button content (text and icons)
+     * @cssprop --wcs-button-start-icon-size-s - size of the start icon for a size s button
+     * @cssprop --wcs-button-start-icon-size-m - size of the start icon for a size m button
+     * @cssprop --wcs-button-start-icon-size-l - size of the start icon for a size l button
+     * @cssprop --wcs-button-end-icon-size-s - size of the end icon for a size s button
+     * @cssprop --wcs-button-end-icon-size-m - size of the end icon for a size m button
+     * @cssprop --wcs-button-end-icon-size-l - size of the end icon for a size l button
      */
     interface HTMLWcsButtonElement extends Components.WcsButton, HTMLStencilElement {
     }
@@ -2966,10 +3062,15 @@ declare global {
         new (): HTMLWcsButtonElement;
     };
     /**
-     * The card component is a container that display content such as text, images, buttons, and lists.  
+     * The card component is a container that displays 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.
+     * While cards are flexible, it is important to use them consistently. You may use `wcs-card-media` outside
+     * `wcs-card-body`, and `wcs-card-header`, `wcs-card-content`, and `wcs-card-footer` within `wcs-card-body`
+     * to keep the card structure clear and well-designed.
+     * `wcs-card-content` is intended for textual content only. If you need to display a form or other rich interactive
+     * content inside a card, place it directly inside `wcs-card-body` instead of wrapping it in `wcs-card-content`.
+     * A card can also be used as a visual wrapper to get the card border, radius, and background. In that case, prefer a
+     * direct child `wcs-card-body` when you need to host structured content.
      * @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
@@ -2995,8 +3096,12 @@ declare global {
         new (): HTMLWcsCardBodyElement;
     };
     /**
-     * A content for a card inside card-body. Commonly used to provide more details about the card content. 
+     * A text content container for a card inside `wcs-card-body`.
+     * Commonly used to provide additional details about the card content.
      * The information provided should be concise and easy to read.
+     * Use `wcs-card-content` for text only. It applies text-oriented layout rules and overflow behavior.
+     * Forms and other rich interactive content should be placed directly inside `wcs-card-body`, not inside
+     * `wcs-card-content`.
      * 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.
@@ -3983,6 +4088,10 @@ declare global {
     };
     /**
      * 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.
+     * @cssprop --wcs-mat-icon-font-size-s - font size for a size s icon
+     * @cssprop --wcs-mat-icon-font-size-m - font size for a size m icon
+     * @cssprop --wcs-mat-icon-font-size-l - font size for a size l icon
+     * @cssprop --wcs-mat-icon-font-size-xl - font size for a size xl icon
      */
     interface HTMLWcsMatIconElement extends Components.WcsMatIcon, HTMLStencilElement {
     }
@@ -3990,6 +4099,55 @@ declare global {
         prototype: HTMLWcsMatIconElement;
         new (): HTMLWcsMatIconElement;
     };
+    interface HTMLWcsMessageElementEventMap {
+        "wcsMessageDismiss": void;
+    }
+    /**
+     * Messages are used to communicate contextual information to users.
+     * They can display information, success, warning, or error states.
+     * Unlike alerts, messages are static feedback elements and are not automatically dismissed.
+     * @cssprop --wcs-message-title-color - Text color of the title
+     * @cssprop --wcs-message-subtitle-color - Text color of the subtitle
+     * @cssprop --wcs-message-title-font-weight - Font weight of the title
+     * @cssprop --wcs-message-subtitle-font-weight - Font weight of the subtitle
+     * @cssprop --wcs-message-title-font-size - Font size of the title
+     * @cssprop --wcs-message-subtitle-font-size - Font size of the subtitle
+     * @cssprop --wcs-message-dismiss-button-color - Color of the dismiss button
+     * @cssprop --wcs-message-border-radius - Border radius of the message
+     * @cssprop --wcs-message-border-width - Border width of the message
+     * @cssprop --wcs-message-padding - Padding of the message
+     * @cssprop --wcs-message-gap - Gap between icon and content
+     * @cssprop --wcs-message-border-color-success - Border color of success messages
+     * @cssprop --wcs-message-icon-color-success - Icon color of success messages
+     * @cssprop --wcs-message-background-color-lightest-success - Lightest background color of success messages
+     * @cssprop --wcs-message-background-color-lighter-success - Lighter background color of success messages
+     * @cssprop --wcs-message-border-color-information - Border color of information messages
+     * @cssprop --wcs-message-icon-color-information - Icon color of information messages
+     * @cssprop --wcs-message-background-color-lightest-information - Lightest background color of information messages
+     * @cssprop --wcs-message-background-color-lighter-information - Lighter background color of information messages
+     * @cssprop --wcs-message-border-color-warning - Border color of warning messages
+     * @cssprop --wcs-message-icon-color-warning - Icon color of warning messages
+     * @cssprop --wcs-message-background-color-lightest-warning - Lightest background color of warning messages
+     * @cssprop --wcs-message-background-color-lighter-warning - Lighter background color of warning messages
+     * @cssprop --wcs-message-border-color-error - Border color of error messages
+     * @cssprop --wcs-message-icon-color-error - Icon color of error messages
+     * @cssprop --wcs-message-background-color-lightest-error - Lightest background color of error messages
+     * @cssprop --wcs-message-background-color-lighter-error - Lighter background color of error messages
+     */
+    interface HTMLWcsMessageElement extends Components.WcsMessage, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLWcsMessageElementEventMap>(type: K, listener: (this: HTMLWcsMessageElement, ev: WcsMessageCustomEvent<HTMLWcsMessageElementEventMap[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 HTMLWcsMessageElementEventMap>(type: K, listener: (this: HTMLWcsMessageElement, ev: WcsMessageCustomEvent<HTMLWcsMessageElementEventMap[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 HTMLWcsMessageElement: {
+        prototype: HTMLWcsMessageElement;
+        new (): HTMLWcsMessageElement;
+    };
     interface HTMLWcsModalElementEventMap {
         "wcsDialogClosed": void;
     }
@@ -4756,6 +4914,7 @@ declare global {
         "wcs-list-item-properties": HTMLWcsListItemPropertiesElement;
         "wcs-list-item-property": HTMLWcsListItemPropertyElement;
         "wcs-mat-icon": HTMLWcsMatIconElement;
+        "wcs-message": HTMLWcsMessageElement;
         "wcs-modal": HTMLWcsModalElement;
         "wcs-native-select": HTMLWcsNativeSelectElement;
         "wcs-nav": HTMLWcsNavElement;
@@ -4882,7 +5041,7 @@ declare namespace LocalJSX {
     }
     /**
      * 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 
+     * 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
@@ -5090,12 +5249,23 @@ declare namespace LocalJSX {
      * @cssprop --wcs-button-font-size-l - font-size for a size l button
      * @cssprop --wcs-button-padding-size-l - padding for a size l button
      * @cssprop --wcs-button-font-weight - font weight of a plain,stroked,clear button
+     * @cssprop --wcs-button-gap - gap between button content (text and icons)
+     * @cssprop --wcs-button-start-icon-size-s - size of the start icon for a size s button
+     * @cssprop --wcs-button-start-icon-size-m - size of the start icon for a size m button
+     * @cssprop --wcs-button-start-icon-size-l - size of the start icon for a size l button
+     * @cssprop --wcs-button-end-icon-size-s - size of the end icon for a size s button
+     * @cssprop --wcs-button-end-icon-size-m - size of the end icon for a size m button
+     * @cssprop --wcs-button-end-icon-size-l - size of the end icon for a size l button
      */
     interface WcsButton {
         /**
           * Specify whether the button is disabled or not.
          */
         "disabled"?: boolean;
+        /**
+          * Name of a wcs-mat-icon to display at the end (right) of the button.
+         */
+        "endIcon"?: string;
         /**
           * Set a URL to point to.<br/> If specified use a `a` tag instead of `btn`.
          */
@@ -5120,6 +5290,10 @@ declare namespace LocalJSX {
           * Specify the size of the button.
          */
         "size"?: WcsButtonSize;
+        /**
+          * Name of a wcs-mat-icon to display at the start (left) of the button.
+         */
+        "startIcon"?: string;
         /**
           * Specifies where to open the linked document when using href (see prop above)<br/> Default '_self' will open the linked document in the same frame as it was clicked
          */
@@ -5130,10 +5304,15 @@ declare namespace LocalJSX {
         "type"?: WcsButtonType;
     }
     /**
-     * The card component is a container that display content such as text, images, buttons, and lists.  
+     * The card component is a container that displays 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.
+     * While cards are flexible, it is important to use them consistently. You may use `wcs-card-media` outside
+     * `wcs-card-body`, and `wcs-card-header`, `wcs-card-content`, and `wcs-card-footer` within `wcs-card-body`
+     * to keep the card structure clear and well-designed.
+     * `wcs-card-content` is intended for textual content only. If you need to display a form or other rich interactive
+     * content inside a card, place it directly inside `wcs-card-body` instead of wrapping it in `wcs-card-content`.
+     * A card can also be used as a visual wrapper to get the card border, radius, and background. In that case, prefer a
+     * direct child `wcs-card-body` when you need to host structured content.
      * @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
@@ -5156,8 +5335,12 @@ declare namespace LocalJSX {
     interface WcsCardBody {
     }
     /**
-     * A content for a card inside card-body. Commonly used to provide more details about the card content. 
+     * A text content container for a card inside `wcs-card-body`.
+     * Commonly used to provide additional details about the card content.
      * The information provided should be concise and easy to read.
+     * Use `wcs-card-content` for text only. It applies text-oriented layout rules and overflow behavior.
+     * Forms and other rich interactive content should be placed directly inside `wcs-card-body`, not inside
+     * `wcs-card-content`.
      * 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.
@@ -6321,6 +6504,10 @@ declare namespace LocalJSX {
     }
     /**
      * 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.
+     * @cssprop --wcs-mat-icon-font-size-s - font size for a size s icon
+     * @cssprop --wcs-mat-icon-font-size-m - font size for a size m icon
+     * @cssprop --wcs-mat-icon-font-size-l - font size for a size l icon
+     * @cssprop --wcs-mat-icon-font-size-xl - font size for a size xl icon
      */
     interface WcsMatIcon {
         /**
@@ -6336,6 +6523,60 @@ declare namespace LocalJSX {
          */
         "size"?: MaterialIconSize;
     }
+    /**
+     * Messages are used to communicate contextual information to users.
+     * They can display information, success, warning, or error states.
+     * Unlike alerts, messages are static feedback elements and are not automatically dismissed.
+     * @cssprop --wcs-message-title-color - Text color of the title
+     * @cssprop --wcs-message-subtitle-color - Text color of the subtitle
+     * @cssprop --wcs-message-title-font-weight - Font weight of the title
+     * @cssprop --wcs-message-subtitle-font-weight - Font weight of the subtitle
+     * @cssprop --wcs-message-title-font-size - Font size of the title
+     * @cssprop --wcs-message-subtitle-font-size - Font size of the subtitle
+     * @cssprop --wcs-message-dismiss-button-color - Color of the dismiss button
+     * @cssprop --wcs-message-border-radius - Border radius of the message
+     * @cssprop --wcs-message-border-width - Border width of the message
+     * @cssprop --wcs-message-padding - Padding of the message
+     * @cssprop --wcs-message-gap - Gap between icon and content
+     * @cssprop --wcs-message-border-color-success - Border color of success messages
+     * @cssprop --wcs-message-icon-color-success - Icon color of success messages
+     * @cssprop --wcs-message-background-color-lightest-success - Lightest background color of success messages
+     * @cssprop --wcs-message-background-color-lighter-success - Lighter background color of success messages
+     * @cssprop --wcs-message-border-color-information - Border color of information messages
+     * @cssprop --wcs-message-icon-color-information - Icon color of information messages
+     * @cssprop --wcs-message-background-color-lightest-information - Lightest background color of information messages
+     * @cssprop --wcs-message-background-color-lighter-information - Lighter background color of information messages
+     * @cssprop --wcs-message-border-color-warning - Border color of warning messages
+     * @cssprop --wcs-message-icon-color-warning - Icon color of warning messages
+     * @cssprop --wcs-message-background-color-lightest-warning - Lightest background color of warning messages
+     * @cssprop --wcs-message-background-color-lighter-warning - Lighter background color of warning messages
+     * @cssprop --wcs-message-border-color-error - Border color of error messages
+     * @cssprop --wcs-message-icon-color-error - Icon color of error messages
+     * @cssprop --wcs-message-background-color-lightest-error - Lightest background color of error messages
+     * @cssprop --wcs-message-background-color-lighter-error - Lighter background color of error messages
+     */
+    interface WcsMessage {
+        /**
+          * Defines the background appearance of the message.
+         */
+        "background"?: WcsMessageBackground;
+        /**
+          * Defines the semantic intent of the message. - Non-disruptive messages (`information`, `success`) use `role="status"` - Disruptive messages (`warning`, `error`) use `role="alert"`
+         */
+        "intent"?: WcsAlertIntent;
+        /**
+          * Event emitted when the message is dismissed.
+         */
+        "onWcsMessageDismiss"?: (event: WcsMessageCustomEvent<void>) => void;
+        /**
+          * Defines whether the message should have a border. The border color is determined by the intent of the message.
+         */
+        "showBorder"?: boolean;
+        /**
+          * Specifies whether the component should display a close button.
+         */
+        "showCloseButton"?: boolean;
+    }
     /**
      * The modal component (also named dialog or popup) is an interface element that appears on top of the page content.
      * Use it to show a message, a confirmation dialog, or any other content like forms.
@@ -7357,6 +7598,7 @@ declare namespace LocalJSX {
         "wcs-list-item-properties": WcsListItemProperties;
         "wcs-list-item-property": WcsListItemProperty;
         "wcs-mat-icon": WcsMatIcon;
+        "wcs-message": WcsMessage;
         "wcs-modal": WcsModal;
         "wcs-native-select": WcsNativeSelect;
         "wcs-nav": WcsNav;
@@ -7444,7 +7686,7 @@ declare module "@stencil/core" {
             "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 
+             * 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
@@ -7592,13 +7834,25 @@ declare module "@stencil/core" {
              * @cssprop --wcs-button-font-size-l - font-size for a size l button
              * @cssprop --wcs-button-padding-size-l - padding for a size l button
              * @cssprop --wcs-button-font-weight - font weight of a plain,stroked,clear button
+             * @cssprop --wcs-button-gap - gap between button content (text and icons)
+             * @cssprop --wcs-button-start-icon-size-s - size of the start icon for a size s button
+             * @cssprop --wcs-button-start-icon-size-m - size of the start icon for a size m button
+             * @cssprop --wcs-button-start-icon-size-l - size of the start icon for a size l button
+             * @cssprop --wcs-button-end-icon-size-s - size of the end icon for a size s button
+             * @cssprop --wcs-button-end-icon-size-m - size of the end icon for a size m button
+             * @cssprop --wcs-button-end-icon-size-l - size of the end icon for a size l button
              */
             "wcs-button": LocalJSX.WcsButton & JSXBase.HTMLAttributes<HTMLWcsButtonElement>;
             /**
-             * The card component is a container that display content such as text, images, buttons, and lists.  
+             * The card component is a container that displays 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.
+             * While cards are flexible, it is important to use them consistently. You may use `wcs-card-media` outside
+             * `wcs-card-body`, and `wcs-card-header`, `wcs-card-content`, and `wcs-card-footer` within `wcs-card-body`
+             * to keep the card structure clear and well-designed.
+             * `wcs-card-content` is intended for textual content only. If you need to display a form or other rich interactive
+             * content inside a card, place it directly inside `wcs-card-body` instead of wrapping it in `wcs-card-content`.
+             * A card can also be used as a visual wrapper to get the card border, radius, and background. In that case, prefer a
+             * direct child `wcs-card-body` when you need to host structured content.
              * @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
@@ -7614,8 +7868,12 @@ declare module "@stencil/core" {
              */
             "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. 
+             * A text content container for a card inside `wcs-card-body`.
+             * Commonly used to provide additional details about the card content.
              * The information provided should be concise and easy to read.
+             * Use `wcs-card-content` for text only. It applies text-oriented layout rules and overflow behavior.
+             * Forms and other rich interactive content should be placed directly inside `wcs-card-body`, not inside
+             * `wcs-card-content`.
              * 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.
@@ -8258,8 +8516,45 @@ 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?icon.set=Material+Icons). Can be useful when used in wcs-grid or in a wcs-button.
+             * @cssprop --wcs-mat-icon-font-size-s - font size for a size s icon
+             * @cssprop --wcs-mat-icon-font-size-m - font size for a size m icon
+             * @cssprop --wcs-mat-icon-font-size-l - font size for a size l icon
+             * @cssprop --wcs-mat-icon-font-size-xl - font size for a size xl icon
              */
             "wcs-mat-icon": LocalJSX.WcsMatIcon & JSXBase.HTMLAttributes<HTMLWcsMatIconElement>;
+            /**
+             * Messages are used to communicate contextual information to users.
+             * They can display information, success, warning, or error states.
+             * Unlike alerts, messages are static feedback elements and are not automatically dismissed.
+             * @cssprop --wcs-message-title-color - Text color of the title
+             * @cssprop --wcs-message-subtitle-color - Text color of the subtitle
+             * @cssprop --wcs-message-title-font-weight - Font weight of the title
+             * @cssprop --wcs-message-subtitle-font-weight - Font weight of the subtitle
+             * @cssprop --wcs-message-title-font-size - Font size of the title
+             * @cssprop --wcs-message-subtitle-font-size - Font size of the subtitle
+             * @cssprop --wcs-message-dismiss-button-color - Color of the dismiss button
+             * @cssprop --wcs-message-border-radius - Border radius of the message
+             * @cssprop --wcs-message-border-width - Border width of the message
+             * @cssprop --wcs-message-padding - Padding of the message
+             * @cssprop --wcs-message-gap - Gap between icon and content
+             * @cssprop --wcs-message-border-color-success - Border color of success messages
+             * @cssprop --wcs-message-icon-color-success - Icon color of success messages
+             * @cssprop --wcs-message-background-color-lightest-success - Lightest background color of success messages
+             * @cssprop --wcs-message-background-color-lighter-success - Lighter background color of success messages
+             * @cssprop --wcs-message-border-color-information - Border color of information messages
+             * @cssprop --wcs-message-icon-color-information - Icon color of information messages
+             * @cssprop --wcs-message-background-color-lightest-information - Lightest background color of information messages
+             * @cssprop --wcs-message-background-color-lighter-information - Lighter background color of information messages
+             * @cssprop --wcs-message-border-color-warning - Border color of warning messages
+             * @cssprop --wcs-message-icon-color-warning - Icon color of warning messages
+             * @cssprop --wcs-message-background-color-lightest-warning - Lightest background color of warning messages
+             * @cssprop --wcs-message-background-color-lighter-warning - Lighter background color of warning messages
+             * @cssprop --wcs-message-border-color-error - Border color of error messages
+             * @cssprop --wcs-message-icon-color-error - Icon color of error messages
+             * @cssprop --wcs-message-background-color-lightest-error - Lightest background color of error messages
+             * @cssprop --wcs-message-background-color-lighter-error - Lighter background color of error messages
+             */
+            "wcs-message": LocalJSX.WcsMessage & JSXBase.HTMLAttributes<HTMLWcsMessageElement>;
             /**
              * The modal component (also named dialog or popup) is an interface element that appears on top of the page content.
              * Use it to show a message, a confirmation dialog, or any other content like forms.

package/dist/wcs/{p-41b946b2.entry.js → p-03ae13ec.entry.js}

@@ -1,2 +1,2 @@
-import{r as a,h as c}from"./p-32e583ea.js";const r=":host{--wcs-badge-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-badge-height-l:calc(4 * var(--wcs-semantic-size-base));--wcs-badge-font-size-l:var(--wcs-semantic-font-size-label-1);--wcs-badge-height-m:calc(3 * var(--wcs-semantic-size-base));--wcs-badge-font-size-m:var(--wcs-semantic-font-size-label-2);--wcs-badge-height-s:calc(2.5 * var(--wcs-semantic-size-base));--wcs-badge-font-size-s:var(--wcs-semantic-font-size-label-3);--wcs-badge-border-radius-default:var(--wcs-semantic-border-radius-base);--wcs-badge-border-radius-circular:var(--wcs-semantic-border-radius-full);--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse);--wcs-badge-padding-horizontal-l:var(--wcs-semantic-spacing-base);--wcs-badge-padding-horizontal-m:var(--wcs-semantic-spacing-base);--wcs-badge-padding-horizontal-s:calc(0.75 * var(--wcs-semantic-spacing-base));--wcs-badge-height:var(--wcs-badge-height-m);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-base) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-m);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-m);display:inline-flex;gap:var(--wcs-badge-gap);padding:0 var(--wcs-badge-padding-horizontal);height:var(--wcs-badge-height);inline-size:fit-content;font-size:var(--wcs-badge-font-size);box-sizing:border-box;font-weight:var(--wcs-badge-font-weight);line-height:1;text-align:center;align-content:center;align-items:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--wcs-badge-border-radius-default);color:var(--wcs-badge-color);background-color:var(--wcs-badge-background-color)}:host([color=lighter]){--wcs-badge-color:var(--wcs-badge-color-lighter) !important;--wcs-badge-background-color:var(--wcs-badge-background-color-lighter) !important}:host([shape=rounded]){border-radius:var(--wcs-badge-border-radius-circular)}:host([size=l]){--wcs-badge-height:var(--wcs-badge-height-l);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-large) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-l);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-l)}:host([size=m]){--wcs-badge-height:var(--wcs-badge-height-m);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-base) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-m);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-m)}:host([size=s]){--wcs-badge-height:var(--wcs-badge-height-s);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-small) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-s);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-s)}:host(.wcs-secondary){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-secondary);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-success){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-success-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-success-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-info){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-information-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-information-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-warning){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-warning-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-warning-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-inverse);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-critical),:host(.wcs-danger){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-critical-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-critical-lightest);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-critical)}";const e=r;const s=class{constructor(c){a(this,c);this.shape="normal";this.color="initial";this.size="m"}render(){return c("slot",{key:"6d9646b28344f4d1f05a3efaf798a6273252a8bf"})}};s.style=e;export{s as wcs_badge};
-//# sourceMappingURL=p-41b946b2.entry.js.map
+import{r as a,h as c}from"./p-32e583ea.js";const r=":host{--wcs-badge-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-badge-height-l:calc(4 * var(--wcs-semantic-size-base));--wcs-badge-font-size-l:var(--wcs-semantic-font-size-label-1);--wcs-badge-height-m:calc(3 * var(--wcs-semantic-size-base));--wcs-badge-font-size-m:var(--wcs-semantic-font-size-label-2);--wcs-badge-height-s:calc(2.5 * var(--wcs-semantic-size-base));--wcs-badge-font-size-s:var(--wcs-semantic-font-size-label-3);--wcs-badge-border-radius-default:var(--wcs-semantic-border-radius-base);--wcs-badge-border-radius-circular:var(--wcs-semantic-border-radius-full);--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse);--wcs-badge-padding-horizontal-l:var(--wcs-semantic-spacing-base);--wcs-badge-padding-horizontal-m:var(--wcs-semantic-spacing-base);--wcs-badge-padding-horizontal-s:calc(0.75 * var(--wcs-semantic-spacing-base));--wcs-badge-height:var(--wcs-badge-height-m);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-base) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-m);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-m);display:inline-flex;gap:var(--wcs-badge-gap);padding:0 var(--wcs-badge-padding-horizontal);height:var(--wcs-badge-height);inline-size:fit-content;font-size:var(--wcs-badge-font-size);box-sizing:border-box;font-weight:var(--wcs-badge-font-weight);line-height:1;text-align:center;align-content:center;align-items:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--wcs-badge-border-radius-default);color:var(--wcs-badge-color);background-color:var(--wcs-badge-background-color)}:host([color=lighter]){--wcs-badge-color:var(--wcs-badge-color-lighter) !important;--wcs-badge-background-color:var(--wcs-badge-background-color-lighter) !important}:host([shape=rounded]){border-radius:var(--wcs-badge-border-radius-circular)}:host([size=l]){--wcs-badge-height:var(--wcs-badge-height-l);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-large) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-l);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-l)}:host([size=m]){--wcs-badge-height:var(--wcs-badge-height-m);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-base) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-m);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-m)}:host([size=s]){--wcs-badge-height:var(--wcs-badge-height-s);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-small) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-s);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-s)}:host(.wcs-secondary){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-secondary);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-success){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-success-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-success-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-info){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-information-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-information-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-warning){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-warning-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-warning-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-inverse);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-critical),:host(.wcs-danger){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-critical-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-critical-lightest);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-critical)}";const s=r;const e=class{constructor(c){a(this,c);this.shape="normal";this.color="initial";this.size="m"}render(){return c("slot",{key:"d7154c1a24abfa3084a6915857734f9b63ad70da"})}};e.style=s;export{e as wcs_badge};
+//# sourceMappingURL=p-03ae13ec.entry.js.map

package/dist/wcs/p-07c961b4.entry.js

@@ -0,0 +1,2 @@
+import{r as c,h as t,H as o}from"./p-32e583ea.js";const e=":host{--wcs-card-content-color:var(--wcs-semantic-color-text-tertiary);--wcs-card-content-font-size:var(--wcs-semantic-font-size-body-3);display:block;overflow:hidden}::slotted(*){color:var(--wcs-card-content-color);font-size:var(--wcs-card-content-font-size);margin:0}";const s=e;const r=class{constructor(t){c(this,t)}render(){return t(o,{key:"1ec73be8ca667468b90bdba53ba3e7db263198ad"},t("slot",{key:"3bc5b7bcb24c01974b1de78864d50a2ded6822d3"}))}};r.style=s;export{r as wcs_card_content};
+//# sourceMappingURL=p-07c961b4.entry.js.map

package/dist/wcs/p-07c961b4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardContentCss","WcsCardContentStyle0","CardContent","render","h","Host","key"],"sources":["src/components/card-content/card-content.scss?tag=wcs-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":[":host {\n    --wcs-card-content-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-card-content-font-size: var(--wcs-semantic-font-size-body-3);\n\n    display: block;\n    overflow: hidden;\n}\n\n::slotted(*) {\n    color: var(--wcs-card-content-color);\n    font-size: var(--wcs-card-content-font-size);\n    margin: 0;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * A text content container for a card inside `wcs-card-body`.\n * Commonly used to provide additional details about the card content.\n * The information provided should be concise and easy to read.\n *\n * Use `wcs-card-content` for text only. It applies text-oriented layout rules and overflow behavior.\n * Forms and other rich interactive content should be placed directly inside `wcs-card-body`, not inside\n * `wcs-card-content`.\n *\n * By default, the margin is removed from the top and bottom of the card description.\n *\n * @slot - The textual content of the card description.\n *\n * @cssprop --wcs-card-content-color - The color of the card description.\n * @cssprop --wcs-card-content-font-size - The font size of the card description.\n */\n@Component({\n  tag: 'wcs-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,gRACvB,MAAAC,EAAeD,E,MCsBFE,EAAW,M,yBAEtB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C"}