wcs-core 7.6.0 → 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
          */
@@ -1595,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 {
         /**
@@ -1611,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.
@@ -2643,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;
@@ -2781,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
@@ -2967,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 {
     }
@@ -4001,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 {
     }
@@ -4008,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;
     }
@@ -4774,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;
@@ -4900,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
@@ -5108,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`.
          */
@@ -5138,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
          */
@@ -6348,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 {
         /**
@@ -6363,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.
@@ -7384,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;
@@ -7471,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
@@ -7619,6 +7834,13 @@ 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>;
             /**
@@ -8294,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-9e091c53.entry.js → p-0a0bc006.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as o,H as i,g as s}from"./p-32e583ea.js";import{p as e}from"./p-5314a64d.js";const a="@keyframes slide-in-bottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@keyframes slide-out{from{opacity:1}to{opacity:0}}@keyframes slide-in-top{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0%)}}:host{--wcs-alert-drawer-gap:var(--wcs-semantic-spacing-base);--wcs-alert-drawer-margin-horizontal:var(--wcs-semantic-spacing-base);--wcs-alert-drawer-margin-vertical:var(--wcs-semantic-spacing-base);--wcs-alert-drawer-min-width:400px;--wcs-alert-drawer-hide-alert-animation-duration:var(--wcs-semantic-motion-duration-feedback-slow);position:fixed;z-index:99999;width:fit-content}:host wcs-alert{--wcs-alert-min-width:var(--wcs-alert-drawer-min-width)}:host wcs-alert:not([show]){animation-duration:var(--wcs-alert-drawer-hide-alert-animation-duration);animation-timing-function:ease;animation-name:slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion: reduce){:host wcs-alert:not([show]){animation:none}}:host #alerts-container{display:flex;flex-direction:column;gap:var(--wcs-alert-drawer-gap)}@media (max-width: 575px){:host{left:50% !important;transform:translate(-50%, 0);width:calc(100% - 2 * var(--wcs-alert-drawer-margin-horizontal))}:host wcs-alert{--wcs-alert-min-width:100%}}:host([position=top]),:host([position=top-left]),:host([position=top-right]){top:var(--wcs-alert-drawer-margin-vertical);flex-direction:column-reverse}:host([position=top]) wcs-alert[show],:host([position=top-left]) wcs-alert[show],:host([position=top-right]) wcs-alert[show]{animation:slide-in-top var(--wcs-alert-drawer-hide-alert-animation-duration) ease}@media (prefers-reduced-motion: reduce){:host([position=top]) wcs-alert[show],:host([position=top-left]) wcs-alert[show],:host([position=top-right]) wcs-alert[show]{animation:none}}:host([position=bottom]),:host([position=bottom-left]),:host([position=bottom-right]){bottom:var(--wcs-alert-drawer-margin-vertical)}:host([position=bottom]) wcs-alert[show],:host([position=bottom-left]) wcs-alert[show],:host([position=bottom-right]) wcs-alert[show]{animation:slide-in-bottom var(--wcs-alert-drawer-hide-alert-animation-duration) ease}@media (prefers-reduced-motion: reduce){:host([position=bottom]) wcs-alert[show],:host([position=bottom-left]) wcs-alert[show],:host([position=bottom-right]) wcs-alert[show]{animation:none}}:host([position=top-right]),:host([position=bottom-right]){right:var(--wcs-alert-drawer-margin-horizontal)}:host([position=top-left]),:host([position=bottom-left]){left:var(--wcs-alert-drawer-margin-horizontal)}:host([position=bottom]),:host([position=top]){left:50%;transform:translate(-50%, 0)}";const r=a;const n=class{constructor(o){t(this,o);this.alertEventListeners=new WeakMap;this.timeoutId=undefined;this.userPrefersReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches;this.close=t=>{if(!this.userPrefersReducedMotion){this.timeoutId=setTimeout((()=>{t.remove();this.alertEventListeners.delete(t)}),e(window.getComputedStyle(this.el).getPropertyValue("--wcs-alert-drawer-hide-alert-animation-duration"))||300)}else{t.remove();this.alertEventListeners.delete(t)}};this.position="bottom-right";this.timeout=5e3;this.showProgressBar=false}async show(t){this.alertsContainer.appendChild(this.renderToast(t))}renderToast(t){var o,i;const s=document.createElement("wcs-alert");s.setAttribute("intent",t.intent);if((o=t.showProgressBar)!==null&&o!==void 0?o:this.showProgressBar){s.setAttribute("show-progress-bar","")}s.setAttribute("timeout",String((i=t.timeout)!==null&&i!==void 0?i:this.timeout));const e=()=>this.close(s);this.alertEventListeners.set(s,e);s.addEventListener("wcsAlertDismiss",e);const a=document.createElement("span");a.setAttribute("slot","title");a.textContent=t.title;s.appendChild(a);const r=document.createElement("span");r.setAttribute("slot","subtitle");r.textContent=t.subtitle;s.appendChild(r);return s}render(){return o(i,{key:"18a68f9f7727b29da85e0852dc87de30d79581ed",role:"region","aria-label":"Informations","aria-live":"polite","aria-atomic":"true"},o("div",{key:"ee0d30077439b991e5ff6eb02b24873f015dce5e",ref:t=>this.alertsContainer=t,id:"alerts-container"}))}disconnectedCallback(){this.alertEventListeners=new WeakMap;clearTimeout(this.timeoutId)}get el(){return s(this)}};n.style=r;export{n as wcs_alert_drawer};
-//# sourceMappingURL=p-9e091c53.entry.js.map
+import{r as t,h as o,H as i,g as s}from"./p-32e583ea.js";import{p as a}from"./p-71af107c.js";const e="@keyframes slide-in-bottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@keyframes slide-out{from{opacity:1}to{opacity:0}}@keyframes slide-in-top{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0%)}}:host{--wcs-alert-drawer-gap:var(--wcs-semantic-spacing-base);--wcs-alert-drawer-margin-horizontal:var(--wcs-semantic-spacing-base);--wcs-alert-drawer-margin-vertical:var(--wcs-semantic-spacing-base);--wcs-alert-drawer-min-width:400px;--wcs-alert-drawer-hide-alert-animation-duration:var(--wcs-semantic-motion-duration-feedback-slow);position:fixed;z-index:99999;width:fit-content}:host wcs-alert{--wcs-alert-min-width:var(--wcs-alert-drawer-min-width)}:host wcs-alert:not([show]){animation-duration:var(--wcs-alert-drawer-hide-alert-animation-duration);animation-timing-function:ease;animation-name:slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion: reduce){:host wcs-alert:not([show]){animation:none}}:host #alerts-container{display:flex;flex-direction:column;gap:var(--wcs-alert-drawer-gap)}@media (max-width: 575px){:host{left:50% !important;transform:translate(-50%, 0);width:calc(100% - 2 * var(--wcs-alert-drawer-margin-horizontal))}:host wcs-alert{--wcs-alert-min-width:100%}}:host([position=top]),:host([position=top-left]),:host([position=top-right]){top:var(--wcs-alert-drawer-margin-vertical);flex-direction:column-reverse}:host([position=top]) wcs-alert[show],:host([position=top-left]) wcs-alert[show],:host([position=top-right]) wcs-alert[show]{animation:slide-in-top var(--wcs-alert-drawer-hide-alert-animation-duration) ease}@media (prefers-reduced-motion: reduce){:host([position=top]) wcs-alert[show],:host([position=top-left]) wcs-alert[show],:host([position=top-right]) wcs-alert[show]{animation:none}}:host([position=bottom]),:host([position=bottom-left]),:host([position=bottom-right]){bottom:var(--wcs-alert-drawer-margin-vertical)}:host([position=bottom]) wcs-alert[show],:host([position=bottom-left]) wcs-alert[show],:host([position=bottom-right]) wcs-alert[show]{animation:slide-in-bottom var(--wcs-alert-drawer-hide-alert-animation-duration) ease}@media (prefers-reduced-motion: reduce){:host([position=bottom]) wcs-alert[show],:host([position=bottom-left]) wcs-alert[show],:host([position=bottom-right]) wcs-alert[show]{animation:none}}:host([position=top-right]),:host([position=bottom-right]){right:var(--wcs-alert-drawer-margin-horizontal)}:host([position=top-left]),:host([position=bottom-left]){left:var(--wcs-alert-drawer-margin-horizontal)}:host([position=bottom]),:host([position=top]){left:50%;transform:translate(-50%, 0)}";const r=e;const n=class{constructor(o){t(this,o);this.alertEventListeners=new WeakMap;this.timeoutId=undefined;this.userPrefersReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches;this.close=t=>{if(!this.userPrefersReducedMotion){this.timeoutId=setTimeout((()=>{t.remove();this.alertEventListeners.delete(t)}),a(window.getComputedStyle(this.el).getPropertyValue("--wcs-alert-drawer-hide-alert-animation-duration"))||300)}else{t.remove();this.alertEventListeners.delete(t)}};this.position="bottom-right";this.timeout=5e3;this.showProgressBar=false}async show(t){this.alertsContainer.appendChild(this.renderToast(t))}async clear(){this.alertsContainer.replaceChildren()}renderToast(t){var o,i;const s=document.createElement("wcs-alert");s.setAttribute("intent",t.intent);if((o=t.showProgressBar)!==null&&o!==void 0?o:this.showProgressBar){s.setAttribute("show-progress-bar","")}s.setAttribute("timeout",String((i=t.timeout)!==null&&i!==void 0?i:this.timeout));const a=()=>this.close(s);this.alertEventListeners.set(s,a);s.addEventListener("wcsAlertDismiss",a);const e=document.createElement("span");e.setAttribute("slot","title");e.textContent=t.title;s.appendChild(e);const r=document.createElement("span");r.setAttribute("slot","subtitle");r.textContent=t.subtitle;s.appendChild(r);return s}render(){return o(i,{key:"7df0dd0305bc6a7074ba14d9bfd2153a9fe08ccf",role:"region","aria-label":"Informations","aria-live":"polite","aria-atomic":"true"},o("div",{key:"8037fe4cd08765cdebb5b78054d3370996f1ea9b",ref:t=>this.alertsContainer=t,id:"alerts-container"}))}disconnectedCallback(){this.alertEventListeners=new WeakMap;clearTimeout(this.timeoutId)}get el(){return s(this)}};n.style=r;export{n as wcs_alert_drawer};
+//# sourceMappingURL=p-0a0bc006.entry.js.map

package/dist/wcs/p-0a0bc006.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["alertDrawerCss","WcsAlertDrawerStyle0","AlertDrawer","this","alertEventListeners","WeakMap","timeoutId","undefined","userPrefersReducedMotion","window","matchMedia","matches","close","alert","setTimeout","remove","delete","parseCssTimeValueToMilliseconds","getComputedStyle","el","getPropertyValue","show","alertsContainer","appendChild","renderToast","clear","replaceChildren","alertElement","document","createElement","setAttribute","intent","_a","showProgressBar","String","_b","timeout","listener","set","addEventListener","title","textContent","subtitle","render","h","Host","key","role","ref","id","disconnectedCallback","clearTimeout"],"sources":["src/components/alert-drawer/alert-drawer.scss?tag=wcs-alert-drawer&encapsulation=shadow","src/components/alert-drawer/alert-drawer.tsx"],"sourcesContent":["@import '../../style/breakpoints';\n@import './alert-drawer-keyframes';\n\n:host {\n    --wcs-alert-drawer-gap: var(--wcs-semantic-spacing-base);\n    --wcs-alert-drawer-margin-horizontal: var(--wcs-semantic-spacing-base);\n    --wcs-alert-drawer-margin-vertical: var(--wcs-semantic-spacing-base);\n    --wcs-alert-drawer-min-width: 400px;\n\n    --wcs-alert-drawer-hide-alert-animation-duration: var(--wcs-semantic-motion-duration-feedback-slow);\n\n    position: fixed;\n    z-index: 99999;\n    width: fit-content;\n\n    wcs-alert {\n        --wcs-alert-min-width: var(--wcs-alert-drawer-min-width);\n    }\n\n    wcs-alert:not([show]) {\n        animation-duration: var(--wcs-alert-drawer-hide-alert-animation-duration);\n        animation-timing-function: ease;\n        animation-name: slide-out;\n\n        animation-fill-mode: forwards; // forwards = keep the last keyframe state => that keeps the alert with the opacity 0 at the end of the animation\n\n        @media (prefers-reduced-motion: reduce) {\n            animation: none;\n        }\n    }\n\n    #alerts-container {\n        display: flex;\n        flex-direction: column;\n        gap: var(--wcs-alert-drawer-gap);\n    }\n}\n\n@include for-phone-only {\n    :host {\n        left: 50% !important; // !important => to override the left applied by the :host([position=left]) selector\n        transform: translate(-50%, 0);\n        width: calc(100% - 2 * var(--wcs-alert-drawer-margin-horizontal)); // 1 * margin for the left and 1 * margin for the right\n\n        wcs-alert {\n            --wcs-alert-min-width: 100%;\n        }\n    }\n}\n\n:host([position=top]), :host([position=top-left]), :host([position=top-right]) {\n    top: var(--wcs-alert-drawer-margin-vertical);\n    flex-direction: column-reverse;\n\n    wcs-alert[show] {\n        animation: slide-in-top var(--wcs-alert-drawer-hide-alert-animation-duration) ease;\n\n        @media (prefers-reduced-motion: reduce) {\n            animation: none;\n        }\n    }\n}\n\n:host([position=bottom]), :host([position=bottom-left]), :host([position=bottom-right]) {\n    bottom: var(--wcs-alert-drawer-margin-vertical);\n\n    wcs-alert[show] {\n        animation: slide-in-bottom var(--wcs-alert-drawer-hide-alert-animation-duration) ease;\n\n        @media (prefers-reduced-motion: reduce) {\n            animation: none;\n        }\n    }\n}\n\n:host([position=top-right]), :host([position=bottom-right]) {\n    right: var(--wcs-alert-drawer-margin-horizontal);\n}\n\n:host([position=top-left]), :host([position=bottom-left]) {\n    left: var(--wcs-alert-drawer-margin-horizontal);\n}\n\n:host([position=bottom]), :host([position=top]) {\n    left: 50%;\n    transform: translate(-50%, 0);\n}\n","import { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { parseCssTimeValueToMilliseconds } from '../../utils/helpers';\nimport { WcsAlertDrawerPosition } from \"./alert-drawer-interface\";\nimport { WcsAlertConfig } from \"../alert/alert-interface\";\n\n/**\n * Serve as a container for displaying `wcs-alert` components. Directly use this component to display alerts in your applications.\n * \n * ## Usage\n * \n * You can place the `wcs-alert-drawer` component anywhere in your application. It will be used to display alerts.\n * You need to set `position` property to define where the alert drawer will be displayed on the screen.\n * \n * About alerts order:\n * - alerts are ordered up-bottom if the position is `top` and bottom-up if the position is `bottom`\n * \n * ## Accessibility guidelines 💡\n * \n * - The component has `aria-live=\"polite\"` and `aria-atomic=\"true\"` attributes to announce the new alerts to screen readers\n * \n * ## Configuration (on the web component)\n *\n * Per default, the `wcs-alert-drawer` is configured with:\n * - `position: 'top-right'`\n * - `showProgressBar: false`\n * - `timeout: 5000`\n *\n * When using the `WcsAlertDrawer::show(alert: WcsAlertConfig)` method, you can override the default configuration by \n * overriding it through the argument.\n * You can also set them in the `wcs-alert-drawer` component directly as attributes\n * \n * ```html\n * <wcs-alert-drawer position=\"top-right\" show-progress-bar timeout=\"10000\">\n * ```\n * With this configuration, all alerts will be displayed with a progress bar and a timeout of 10 seconds.\n * \n * @slot - the alert drawer content, where alerts you put as children will be displayed\n * \n * @cssprop --wcs-alert-drawer-gap - Gap between alerts\n * @cssprop --wcs-alert-drawer-margin-horizontal - Margin horizontal of the alert drawer\n * @cssprop --wcs-alert-drawer-margin-vertical - Margin vertical of the alert drawer\n * @cssprop --wcs-alert-drawer-hide-alert-animation-duration - Duration of the hide alert animation\n * @cssprop --wcs-alert-drawer-min-width - Minimum width of the alert drawer => define the width of the alerts\n */\n@Component({\n    tag: 'wcs-alert-drawer',\n    styleUrl: 'alert-drawer.scss',\n    shadow: true,\n})\nexport class AlertDrawer {\n    @Element()\n    private el!: HTMLWcsAlertDrawerElement;\n\n    /**\n     * Position of the alert drawer on the screen\n     */\n    @Prop({ reflect: true }) position: WcsAlertDrawerPosition = 'bottom-right';\n\n    /**\n     * Timeout for the alert to be dismissed automatically\n     */\n    @Prop() timeout: number = 5000;\n    /**\n     * Whether to show the progress bar or not\n     */\n    @Prop() showProgressBar: boolean = false;\n\n    /*\n     https://www.reddit.com/r/Frontend/comments/1ato11w/comment/kqz4gt8/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button\n     https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef\n     */\n    private alertEventListeners = new WeakMap<HTMLElement, (evt: AnimationEvent) => void>();\n    private timeoutId = undefined;\n\n    private userPrefersReducedMotion: boolean = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    private alertsContainer: HTMLDivElement;\n\n    /**\n     * Handles the dismissal of an alert\n     * @param alert The alert element\n     */\n    private close = (alert: HTMLWcsAlertElement): void => {\n        if (!this.userPrefersReducedMotion) {\n            this.timeoutId = setTimeout(() => {\n                alert.remove();\n                // Cleanup the event listener reference\n                this.alertEventListeners.delete(alert);\n            }, parseCssTimeValueToMilliseconds(window.getComputedStyle(this.el).getPropertyValue(\"--wcs-alert-drawer-hide-alert-animation-duration\")) || 300);\n        } else {\n            // If the user has reduced motion preference, remove the alert immediately\n            alert.remove();\n            // Cleanup the event listener reference\n            this.alertEventListeners.delete(alert);\n        }\n    };\n\n    /**\n     * Method exposed on `wcs-alert-drawer` to show an alert programmatically via the JS API\n     * @example\n     * Plain javascript (example inside a script tag):\n     * ```javascript\n     *  document.querySelector('wcs-alert-drawer').show({\n     *      title: 'Alert title',\n     *      subtitle: 'Alert subtitle',\n     *      intent: 'info',\n     *      showProgressBar: true,\n     *      timeout: 5000\n     *  });\n     * ```\n     * @param alert The alert to show\n     */\n    @Method()\n    async show(alert: WcsAlertConfig): Promise<void> {\n        this.alertsContainer.appendChild(this.renderToast(alert));\n    }\n\n    /**\n     * Method exposed on `wcs-alert-drawer` to clear all `wcs-alert` which are inside, via the JS API\n     * @example\n     * Plain javascript (example inside a script tag):\n     * ```javascript\n     *  document.querySelector('wcs-alert-drawer').clear();\n     * ```\n     */\n    @Method()\n    async clear(): Promise<void> {\n        this.alertsContainer.replaceChildren();\n    }\n\n    private renderToast(alert: WcsAlertConfig): HTMLWcsAlertElement {\n        const alertElement = document.createElement('wcs-alert') as HTMLWcsAlertElement;\n        alertElement.setAttribute('intent', alert.intent);\n\n        // Uses the alert config if defined, otherwise falls back to the drawer default\n        // as the showProgressBar is a boolean attribute, we need to set it to an empty string only if true\n        if ((alert.showProgressBar ?? this.showProgressBar)) {\n            alertElement.setAttribute('show-progress-bar', '');\n        }\n        \n        // Uses the alert config if defined, otherwise falls back to the drawer default\n        alertElement.setAttribute('timeout', String(alert.timeout ?? this.timeout));\n\n        const listener = () => this.close(alertElement);\n        this.alertEventListeners.set(alertElement, listener);\n        alertElement.addEventListener(\"wcsAlertDismiss\", listener);\n        \n        const title = document.createElement('span') as HTMLSpanElement;\n        title.setAttribute('slot', 'title');\n        title.textContent = alert.title;\n        alertElement.appendChild(title);\n\n        const subtitle = document.createElement('span') as HTMLSpanElement;\n        subtitle.setAttribute('slot', 'subtitle');\n        subtitle.textContent = alert.subtitle;\n        alertElement.appendChild(subtitle);\n\n        return alertElement;\n    }\n\n    render() {\n        // https://www.clever-cloud.com/doc/clever-components/?path=/docs/%F0%9F%9B%A0-toast-cc-toaster--docs#about-accessibility\n        return (\n            <Host role=\"region\" aria-label=\"Informations\" aria-live=\"polite\" aria-atomic=\"true\">\n                <div ref={(el) => this.alertsContainer = el} id=\"alerts-container\">\n                </div>\n            </Host>\n        );\n    }\n\n    disconnectedCallback() {\n        this.alertEventListeners = new WeakMap(); // Clear the event listeners, weakmap is not iterable\n        clearTimeout(this.timeoutId);\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,okFACvB,MAAAC,EAAeD,E,MCgDFE,EAAW,M,yBAsBZC,KAAAC,oBAAsB,IAAIC,QAC1BF,KAAAG,UAAYC,UAEZJ,KAAAK,yBAAoCC,OAAOC,WAAW,oCAAoCC,QAO1FR,KAAAS,MAASC,IACb,IAAKV,KAAKK,yBAA0B,CAChCL,KAAKG,UAAYQ,YAAW,KACxBD,EAAME,SAENZ,KAAKC,oBAAoBY,OAAOH,EAAM,GACvCI,EAAgCR,OAAOS,iBAAiBf,KAAKgB,IAAIC,iBAAiB,sDAAwD,I,KAC1I,CAEHP,EAAME,SAENZ,KAAKC,oBAAoBY,OAAOH,E,iBApCoB,e,aAKlC,I,qBAIS,K,CA+CnC,UAAMQ,CAAKR,GACPV,KAAKmB,gBAAgBC,YAAYpB,KAAKqB,YAAYX,G,CAYtD,WAAMY,GACFtB,KAAKmB,gBAAgBI,iB,CAGjB,WAAAF,CAAYX,G,QAChB,MAAMc,EAAeC,SAASC,cAAc,aAC5CF,EAAaG,aAAa,SAAUjB,EAAMkB,QAI1C,IAAKC,EAAAnB,EAAMoB,mBAAe,MAAAD,SAAA,EAAAA,EAAI7B,KAAK8B,gBAAkB,CACjDN,EAAaG,aAAa,oBAAqB,G,CAInDH,EAAaG,aAAa,UAAWI,QAAOC,EAAAtB,EAAMuB,WAAO,MAAAD,SAAA,EAAAA,EAAIhC,KAAKiC,UAElE,MAAMC,EAAW,IAAMlC,KAAKS,MAAMe,GAClCxB,KAAKC,oBAAoBkC,IAAIX,EAAcU,GAC3CV,EAAaY,iBAAiB,kBAAmBF,GAEjD,MAAMG,EAAQZ,SAASC,cAAc,QACrCW,EAAMV,aAAa,OAAQ,SAC3BU,EAAMC,YAAc5B,EAAM2B,MAC1Bb,EAAaJ,YAAYiB,GAEzB,MAAME,EAAWd,SAASC,cAAc,QACxCa,EAASZ,aAAa,OAAQ,YAC9BY,EAASD,YAAc5B,EAAM6B,SAC7Bf,EAAaJ,YAAYmB,GAEzB,OAAOf,C,CAGX,MAAAgB,GAEI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SAAQ,aAAY,eAAc,YAAW,SAAQ,cAAa,QACzEH,EAAA,OAAAE,IAAA,2CAAKE,IAAM7B,GAAOhB,KAAKmB,gBAAkBH,EAAI8B,GAAG,qB,CAM5D,oBAAAC,GACI/C,KAAKC,oBAAsB,IAAIC,QAC/B8C,aAAahD,KAAKG,U"}

package/dist/wcs/{p-b42f441f.entry.js → p-167108aa.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,c as t,h as a,H as e,g as o}from"./p-32e583ea.js";import{i as r,a as i,s as c}from"./p-5314a64d.js";import{S as n}from"./p-84e22272.js";import{c as b}from"./p-e1fb3625.js";const l=':host{--wcs-tabs-indicator-height:calc(var(--wcs-semantic-size-base) / 2);--wcs-tabs-indicator-background-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-indicator-border-radius:var(--wcs-semantic-border-radius-full);--wcs-tabs-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-tabs-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-tabs-color-selected:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-tabs-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-tabs-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-tabs-padding-top:var(--wcs-semantic-spacing-base);--wcs-tabs-padding-right:var(--wcs-semantic-spacing-large);--wcs-tabs-padding-bottom:calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));--wcs-tabs-padding-left:var(--wcs-semantic-spacing-large);--wcs-tabs-gutter-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-gutter-background-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-headers-border-bottom:var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);--wcs-tabs-mobile-breakpoint:var(--wcs-phone-breakpoint-max-width, 575px);--wcs-tabs-mobile-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-mobile-overlay-border-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-mobile-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-tabs-mobile-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-mobile-gap:var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-padding:0 var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-height:var(--wcs-semantic-size-m);--wcs-tabs-mobile-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-tabs-mobile-font-weight-active:var(--wcs-semantic-font-weight-black);--wcs-tabs-mobile-font-size:var(--wcs-semantic-font-size-base);--wcs-tabs-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-tabs-mobile-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-tabs-mobile-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-mobile-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-mobile-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-mobile-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:block}:host([align=start]) .wcs-tabs-headers{justify-content:start}:host([align=end]) .wcs-tabs-headers{justify-content:end}:host([align=center]) .wcs-tabs-headers{justify-content:center}.wcs-tabs-headers{overflow-x:auto;display:flex;flex-direction:row;position:relative}:host([gutter]) .wcs-tabs-headers{border-bottom:var(--wcs-tabs-headers-border-bottom)}.wcs-tab-header{position:relative;padding:var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);border-radius:var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;display:flex;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:all var(--wcs-tabs-transition-duration) ease-out}.wcs-tab-header span{text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default)}.wcs-tab-header:hover{background-color:var(--wcs-tabs-background-color-hover)}.wcs-tab-header:hover span{color:var(--wcs-tabs-color-hover)}.wcs-tab-header:focus-visible>span{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-tabs-border-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}.wcs-tab-header:active{background-color:var(--wcs-tabs-background-color-press)}.wcs-tab-header:active span{color:var(--wcs-tabs-color-press)}.active span{font-weight:var(--wcs-tabs-font-weight-selected);color:var(--wcs-tabs-color-selected)}.active::after{position:absolute;bottom:0;left:0;width:100%;content:"";height:var(--wcs-tabs-indicator-height);background-color:var(--wcs-tabs-indicator-background-color);border-radius:var(--wcs-tabs-indicator-border-radius)}button{background-color:inherit}#mobile-button{border:0;font-family:var(--wcs-font-sans-serif), sans-serif;text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default);padding-right:calc(0.75 * var(--wcs-tabs-padding-right));}#mobile-button span{display:flex;align-items:center}#mobile-button .arrow{fill:var(--wcs-tabs-color-default)}#mobile-button:hover .arrow{fill:var(--wcs-tabs-color-hover)}#mobile-button:active .arrow{fill:var(--wcs-tabs-color-press)}.popover{display:none;z-index:9999;overflow:hidden;border:var(--wcs-tabs-mobile-overlay-border-width) solid var(--wcs-tabs-mobile-overlay-border-color);border-radius:var(--wcs-tabs-mobile-overlay-border-radius);padding:var(--wcs-tabs-mobile-overlay-padding);background-color:var(--wcs-tabs-mobile-overlay-background-color)}.popover [role=tab]{display:flex;flex-direction:row;align-items:center;cursor:pointer;user-select:none;gap:var(--wcs-tabs-mobile-gap);padding:var(--wcs-tabs-mobile-padding);height:var(--wcs-tabs-mobile-height);font-weight:var(--wcs-tabs-mobile-font-weight-default);font-size:var(--wcs-tabs-mobile-font-size);color:var(--wcs-tabs-mobile-color);background-color:var(--wcs-tabs-mobile-background-color);border-radius:var(--wcs-tabs-mobile-border-radius);transition-duration:var(--wcs-tabs-transition-duration);transition-property:background-color, color;transition-timing-function:ease;overflow:hidden;white-space:nowrap}.popover [role=tab]:focus{background-color:var(--wcs-tabs-mobile-background-color-focus)}.popover [role=tab]:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-semantic-color-border-focus-base);outline-offset:0;border-radius:var(--wcs-tabs-mobile-border-radius)}.popover [role=tab]:hover{background-color:var(--wcs-tabs-mobile-background-color-hover)}.popover [role=tab]:active{background-color:var(--wcs-tabs-mobile-background-color-press)}.popover .mobile-active{font-weight:var(--wcs-tabs-mobile-font-weight-active)}.show{display:block}';const d=l;const h=[];const w=class{constructor(a){s(this,a);this.tabChange=t(this,"tabChange",7);this.inheritedAttributes={};this.tabsId=v++;this.align="start";this.selectedIndex=0;this.selectedKey=undefined;this.headersOnly=false;this.gutter=undefined;this.description=undefined;this.mobileOverlayExpanded=false;this.mobile=false;this.headers=[];this.currentActiveTabIndex=0}selectedIndexChanged(s){this.currentActiveTabIndex=s}selectedTabkeyChanged(s){this.updateCurrentActiveIndexByTabKey(s)}onMobileChange(s){if(!s){this.popper.destroy();this.popper=null}}emitActiveTabChange(){this.tabChange.emit({tabName:this.headers[this.currentActiveTabIndex],tabIndex:this.currentActiveTabIndex,selectedKey:this.tabs[this.currentActiveTabIndex].itemKey})}updateCurrentActiveIndexByTabKey(s){for(let t=0;t<this.tabs.length;t++){const a=this.tabs[t];if(a.itemKey===s){this.currentActiveTabIndex=t}}}onTabLoaded(){this.refreshHeaders()}onWindowClickEvent(s){if(this.mobile){const t=s.composedPath().some((s=>s===this.mobileButton||s===this.popoverDiv));if(this.mobileOverlayExpanded&&!t){this.mobileOverlayExpanded=false}}}tabsDidLoadWithResizeObserver(){const s=getComputedStyle(this.el).getPropertyValue("--wcs-tabs-mobile-breakpoint")||"575px";const t=parseInt(s,10);return new ResizeObserver((s=>{const a=s[0].contentRect;const e=a.right-a.width;const o=a.left;this.mobile=a.width<=t-(o+e)}))}initMobileOverlay(){this.popper=b(this.mobileButton,this.popoverDiv,{placement:"bottom-start",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,8]}}]})}componentDidLoad(){this.putTabsInCorrectDivIfTheyAreNot();this.refreshHeaders();if(this.selectedIndex){this.currentActiveTabIndex=this.selectedIndex}if(this.selectedKey){this.updateCurrentActiveIndexByTabKey(this.selectedKey)}if(!this.resizeObserver){this.resizeObserver=this.tabsDidLoadWithResizeObserver();this.resizeObserver.observe(document.body)}}componentDidRender(){if(this.mobile){if(!this.popper){this.initMobileOverlay()}else{this.popper.update()}}}putTabsInCorrectDivIfTheyAreNot(){const s=this.el.shadowRoot.querySelector(".wcs-tabs");if(s.querySelector("slot")===null){Array.from(this.el.querySelectorAll("wcs-tab")).filter((t=>t.parentNode!==s)).forEach((t=>{if(t.parentElement.isEqualNode(this.el)){this.el.removeChild(t);s.appendChild(t)}}))}}handleKeyDown(s,t){var a,e;const o=s.target;switch(s.key){case" ":case"Enter":{this.selectTabAndEmitChangeEvent(t);s.preventDefault();break}case"ArrowLeft":{if((a=o.previousElementSibling)===null||a===void 0?void 0:a.classList.contains("wcs-tab-header")){o.previousElementSibling.focus();s.preventDefault()}break}case"ArrowRight":{if((e=o.nextElementSibling)===null||e===void 0?void 0:e.classList.contains("wcs-tab-header")){o.nextElementSibling.focus();s.preventDefault()}break}case"Home":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header:first-child");if(t){t.focus();s.preventDefault()}break}case"End":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header:last-child");if(t){t.focus();s.preventDefault()}break}}}handleKeyDownMobile(s,t){var a,e;const o=s.target;switch(s.key){case" ":case"Enter":{this.selectTabAndEmitChangeEvent(t);s.preventDefault();break}case"ArrowUp":{if((a=o.previousElementSibling)===null||a===void 0?void 0:a.classList.contains("wcs-tab-header-mobile")){o.previousElementSibling.focus();s.preventDefault()}break}case"ArrowDown":{if((e=o.nextElementSibling)===null||e===void 0?void 0:e.classList.contains("wcs-tab-header-mobile")){o.nextElementSibling.focus();s.preventDefault()}break}case"Home":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header-mobile:first-child");if(t){t.focus();s.preventDefault()}break}case"End":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header-mobile:last-child");if(t){t.focus();s.preventDefault()}break}case"Escape":{this.mobileOverlayExpanded=false;s.preventDefault();break}}}refreshHeaders(){this.headers=[];this.tabs.forEach((s=>{this.headers.push(s.getAttribute("header"))}))}get tabs(){var s;const t=this.el.shadowRoot.querySelector(".wcs-tabs");const a=this.el.shadowRoot.querySelectorAll(".wcs-tabs > wcs-tab");return a.length!==0?a:(t===null||t===void 0?void 0:t.querySelector("slot"))?(s=t===null||t===void 0?void 0:t.querySelector("slot"))===null||s===void 0?void 0:s.assignedElements():[]}selectTabAndEmitChangeEvent(s){var t;this.currentActiveTabIndex=s;this.emitActiveTabChange();if(this.mobile){this.mobileOverlayExpanded=false;(t=this.mobileButton)===null||t===void 0?void 0:t.focus()}}componentWillUpdate(){if(!this.headersOnly){this.updateTabVisibility()}else{this.hideAllTabsContent()}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},r(this.el)),i(this.el,h))}disconnectedCallback(){var s;if(this.popper){this.popper.destroy();this.popper=null}(s=this.resizeObserver)===null||s===void 0?void 0:s.disconnect()}async setAriaAttribute(s,t){c(this.mobile?this.popoverDiv:this.nativeTablist,s,t)}updateTabVisibility(){this.tabs.forEach(((s,t)=>{if(t!==this.currentActiveTabIndex){s.hidden=true}else{s.hidden=false}}))}hideAllTabsContent(){this.tabs.forEach((s=>s.hidden=true))}onMobileButtonClick(){this.mobileOverlayExpanded=!this.mobileOverlayExpanded;const s=this.popoverDiv.querySelectorAll("[role=tab]")[this.currentActiveTabIndex];requestAnimationFrame((()=>{s===null||s===void 0?void 0:s.focus()}))}onMobileButtonKeyDown(s){if(s.key==="ArrowDown"||s.key==="ArrowUp"){this.onMobileButtonClick()}}mobileLayout(){return[a("button",{id:"mobile-button",class:"wcs-tab-header active","aria-controls":"menu",role:"button","aria-expanded":this.mobileOverlayExpanded?"true":"false",ref:s=>this.mobileButton=s,onClick:()=>this.onMobileButtonClick(),onKeyDown:s=>this.onMobileButtonKeyDown(s),onBlur:s=>s.stopImmediatePropagation()},a("span",null,this.headers[this.currentActiveTabIndex]," ",a(n,{up:this.mobileOverlayExpanded}))),a("div",Object.assign({class:(this.mobileOverlayExpanded?"show ":"")+"popover",role:"tablist",id:"menu","aria-label":this.description,"aria-orientation":"vertical",ref:s=>this.popoverDiv=s,tabIndex:-1},this.inheritedAttributes),this.headers.map(((s,t)=>a("div",{class:"wcs-tab-header-mobile "+(this.currentActiveTabIndex===t?"mobile-active":""),onClick:()=>this.selectTabAndEmitChangeEvent(t),onKeyDown:s=>this.handleKeyDownMobile(s,t),tabIndex:this.currentActiveTabIndex===t?0:-1,role:"tab",id:`tabs-id-${this.tabsId}-tab-id-${t}`,"aria-controls":`tabs-id-${this.tabsId}-tab-panel-${t}`,"aria-label":s,"aria-selected":this.currentActiveTabIndex===t?"true":"false"},a("span",null,s)))))]}desktopLayout(){return this.headers.map(((s,t)=>a("div",{class:"wcs-tab-header "+(this.currentActiveTabIndex===t?"active":""),onClick:()=>this.selectTabAndEmitChangeEvent(t),onKeyDown:s=>this.handleKeyDown(s,t),tabIndex:this.currentActiveTabIndex===t?0:-1,role:"tab",id:`tabs-id-${this.tabsId}-tab-id-${t}`,"aria-controls":`tabs-id-${this.tabsId}-tab-panel-${t}`,"aria-label":s,"aria-selected":this.currentActiveTabIndex===t?"true":"false"},a("span",null,s))))}render(){return a(e,{key:"52a78624d4440876aacfcabeb2b25df81867d64c"},a("div",Object.assign({key:"6bdbb2386f24c7d4f808a5af656ea8efc740a2d1",class:"wcs-tabs-headers",role:this.mobile?null:"tablist",ref:s=>this.nativeTablist=s,"aria-orientation":this.mobile?null:"horizontal","aria-label":this.mobile?null:this.description},!this.mobile&&this.inheritedAttributes),this.mobile?this.mobileLayout():this.desktopLayout()),a("div",{key:"dfc2a9df4b2778cbb5d0144aaca7fd54cf699f9c",class:"wcs-tabs"},a("slot",{key:"a97bec22c495527408eb56caf91a30a67aed3e4f",onSlotchange:()=>this.onTabsSlotChange(),name:"wcs-tab"})))}onTabsSlotChange(){let s=0;this.refreshHeaders();this.tabs.forEach((t=>{t.setAttribute("aria-label",this.headers.at(s));t.setAttribute("id",`tabs-id-${this.tabsId}-tab-panel-${s}`);s++}))}get el(){return o(this)}static get watchers(){return{selectedIndex:["selectedIndexChanged"],selectedKey:["selectedTabkeyChanged"],mobile:["onMobileChange"]}}};let v=0;w.style=d;export{w as wcs_tabs};
-//# sourceMappingURL=p-b42f441f.entry.js.map
+import{r as s,c as t,h as a,H as e,g as o}from"./p-32e583ea.js";import{i as r,a as i,s as c}from"./p-71af107c.js";import{S as n}from"./p-84e22272.js";import{c as b}from"./p-e1fb3625.js";const l=':host{--wcs-tabs-indicator-height:calc(var(--wcs-semantic-size-base) / 2);--wcs-tabs-indicator-background-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-indicator-border-radius:var(--wcs-semantic-border-radius-full);--wcs-tabs-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-tabs-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-tabs-color-selected:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-tabs-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-tabs-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-tabs-padding-top:var(--wcs-semantic-spacing-base);--wcs-tabs-padding-right:var(--wcs-semantic-spacing-large);--wcs-tabs-padding-bottom:calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));--wcs-tabs-padding-left:var(--wcs-semantic-spacing-large);--wcs-tabs-gutter-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-gutter-background-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-headers-border-bottom:var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);--wcs-tabs-mobile-breakpoint:var(--wcs-phone-breakpoint-max-width, 575px);--wcs-tabs-mobile-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-mobile-overlay-border-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-mobile-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-tabs-mobile-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-mobile-gap:var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-padding:0 var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-height:var(--wcs-semantic-size-m);--wcs-tabs-mobile-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-tabs-mobile-font-weight-active:var(--wcs-semantic-font-weight-black);--wcs-tabs-mobile-font-size:var(--wcs-semantic-font-size-base);--wcs-tabs-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-tabs-mobile-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-tabs-mobile-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-mobile-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-mobile-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-mobile-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:block}:host([align=start]) .wcs-tabs-headers{justify-content:start}:host([align=end]) .wcs-tabs-headers{justify-content:end}:host([align=center]) .wcs-tabs-headers{justify-content:center}.wcs-tabs-headers{overflow-x:auto;display:flex;flex-direction:row;position:relative}:host([gutter]) .wcs-tabs-headers{border-bottom:var(--wcs-tabs-headers-border-bottom)}.wcs-tab-header{position:relative;padding:var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);border-radius:var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;display:flex;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:all var(--wcs-tabs-transition-duration) ease-out}.wcs-tab-header span{text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default)}.wcs-tab-header:hover{background-color:var(--wcs-tabs-background-color-hover)}.wcs-tab-header:hover span{color:var(--wcs-tabs-color-hover)}.wcs-tab-header:focus-visible>span{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-tabs-border-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}.wcs-tab-header:active{background-color:var(--wcs-tabs-background-color-press)}.wcs-tab-header:active span{color:var(--wcs-tabs-color-press)}.active span{font-weight:var(--wcs-tabs-font-weight-selected);color:var(--wcs-tabs-color-selected)}.active::after{position:absolute;bottom:0;left:0;width:100%;content:"";height:var(--wcs-tabs-indicator-height);background-color:var(--wcs-tabs-indicator-background-color);border-radius:var(--wcs-tabs-indicator-border-radius)}button{background-color:inherit}#mobile-button{border:0;font-family:var(--wcs-font-sans-serif), sans-serif;text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default);padding-right:calc(0.75 * var(--wcs-tabs-padding-right));}#mobile-button span{display:flex;align-items:center}#mobile-button .arrow{fill:var(--wcs-tabs-color-default)}#mobile-button:hover .arrow{fill:var(--wcs-tabs-color-hover)}#mobile-button:active .arrow{fill:var(--wcs-tabs-color-press)}.popover{display:none;z-index:9999;overflow:hidden;border:var(--wcs-tabs-mobile-overlay-border-width) solid var(--wcs-tabs-mobile-overlay-border-color);border-radius:var(--wcs-tabs-mobile-overlay-border-radius);padding:var(--wcs-tabs-mobile-overlay-padding);background-color:var(--wcs-tabs-mobile-overlay-background-color)}.popover [role=tab]{display:flex;flex-direction:row;align-items:center;cursor:pointer;user-select:none;gap:var(--wcs-tabs-mobile-gap);padding:var(--wcs-tabs-mobile-padding);height:var(--wcs-tabs-mobile-height);font-weight:var(--wcs-tabs-mobile-font-weight-default);font-size:var(--wcs-tabs-mobile-font-size);color:var(--wcs-tabs-mobile-color);background-color:var(--wcs-tabs-mobile-background-color);border-radius:var(--wcs-tabs-mobile-border-radius);transition-duration:var(--wcs-tabs-transition-duration);transition-property:background-color, color;transition-timing-function:ease;overflow:hidden;white-space:nowrap}.popover [role=tab]:focus{background-color:var(--wcs-tabs-mobile-background-color-focus)}.popover [role=tab]:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-semantic-color-border-focus-base);outline-offset:0;border-radius:var(--wcs-tabs-mobile-border-radius)}.popover [role=tab]:hover{background-color:var(--wcs-tabs-mobile-background-color-hover)}.popover [role=tab]:active{background-color:var(--wcs-tabs-mobile-background-color-press)}.popover .mobile-active{font-weight:var(--wcs-tabs-mobile-font-weight-active)}.show{display:block}';const d=l;const h=[];const w=class{constructor(a){s(this,a);this.tabChange=t(this,"tabChange",7);this.inheritedAttributes={};this.tabsId=v++;this.align="start";this.selectedIndex=0;this.selectedKey=undefined;this.headersOnly=false;this.gutter=undefined;this.description=undefined;this.mobileOverlayExpanded=false;this.mobile=false;this.headers=[];this.currentActiveTabIndex=0}selectedIndexChanged(s){this.currentActiveTabIndex=s}selectedTabkeyChanged(s){this.updateCurrentActiveIndexByTabKey(s)}onMobileChange(s){if(!s){this.popper.destroy();this.popper=null}}emitActiveTabChange(){this.tabChange.emit({tabName:this.headers[this.currentActiveTabIndex],tabIndex:this.currentActiveTabIndex,selectedKey:this.tabs[this.currentActiveTabIndex].itemKey})}updateCurrentActiveIndexByTabKey(s){for(let t=0;t<this.tabs.length;t++){const a=this.tabs[t];if(a.itemKey===s){this.currentActiveTabIndex=t}}}onTabLoaded(){this.refreshHeaders()}onWindowClickEvent(s){if(this.mobile){const t=s.composedPath().some((s=>s===this.mobileButton||s===this.popoverDiv));if(this.mobileOverlayExpanded&&!t){this.mobileOverlayExpanded=false}}}tabsDidLoadWithResizeObserver(){const s=getComputedStyle(this.el).getPropertyValue("--wcs-tabs-mobile-breakpoint")||"575px";const t=parseInt(s,10);return new ResizeObserver((s=>{const a=s[0].contentRect;const e=a.right-a.width;const o=a.left;this.mobile=a.width<=t-(o+e)}))}initMobileOverlay(){this.popper=b(this.mobileButton,this.popoverDiv,{placement:"bottom-start",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,8]}}]})}componentDidLoad(){this.putTabsInCorrectDivIfTheyAreNot();this.refreshHeaders();if(this.selectedIndex){this.currentActiveTabIndex=this.selectedIndex}if(this.selectedKey){this.updateCurrentActiveIndexByTabKey(this.selectedKey)}if(!this.resizeObserver){this.resizeObserver=this.tabsDidLoadWithResizeObserver();this.resizeObserver.observe(document.body)}}componentDidRender(){if(this.mobile){if(!this.popper){this.initMobileOverlay()}else{this.popper.update()}}}putTabsInCorrectDivIfTheyAreNot(){const s=this.el.shadowRoot.querySelector(".wcs-tabs");if(s.querySelector("slot")===null){Array.from(this.el.querySelectorAll("wcs-tab")).filter((t=>t.parentNode!==s)).forEach((t=>{if(t.parentElement.isEqualNode(this.el)){this.el.removeChild(t);s.appendChild(t)}}))}}handleKeyDown(s,t){var a,e;const o=s.target;switch(s.key){case" ":case"Enter":{this.selectTabAndEmitChangeEvent(t);s.preventDefault();break}case"ArrowLeft":{if((a=o.previousElementSibling)===null||a===void 0?void 0:a.classList.contains("wcs-tab-header")){o.previousElementSibling.focus();s.preventDefault()}break}case"ArrowRight":{if((e=o.nextElementSibling)===null||e===void 0?void 0:e.classList.contains("wcs-tab-header")){o.nextElementSibling.focus();s.preventDefault()}break}case"Home":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header:first-child");if(t){t.focus();s.preventDefault()}break}case"End":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header:last-child");if(t){t.focus();s.preventDefault()}break}}}handleKeyDownMobile(s,t){var a,e;const o=s.target;switch(s.key){case" ":case"Enter":{this.selectTabAndEmitChangeEvent(t);s.preventDefault();break}case"ArrowUp":{if((a=o.previousElementSibling)===null||a===void 0?void 0:a.classList.contains("wcs-tab-header-mobile")){o.previousElementSibling.focus();s.preventDefault()}break}case"ArrowDown":{if((e=o.nextElementSibling)===null||e===void 0?void 0:e.classList.contains("wcs-tab-header-mobile")){o.nextElementSibling.focus();s.preventDefault()}break}case"Home":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header-mobile:first-child");if(t){t.focus();s.preventDefault()}break}case"End":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header-mobile:last-child");if(t){t.focus();s.preventDefault()}break}case"Escape":{this.mobileOverlayExpanded=false;s.preventDefault();break}}}refreshHeaders(){this.headers=[];this.tabs.forEach((s=>{this.headers.push(s.getAttribute("header"))}))}get tabs(){var s;const t=this.el.shadowRoot.querySelector(".wcs-tabs");const a=this.el.shadowRoot.querySelectorAll(".wcs-tabs > wcs-tab");return a.length!==0?a:(t===null||t===void 0?void 0:t.querySelector("slot"))?(s=t===null||t===void 0?void 0:t.querySelector("slot"))===null||s===void 0?void 0:s.assignedElements():[]}selectTabAndEmitChangeEvent(s){var t;this.currentActiveTabIndex=s;this.emitActiveTabChange();if(this.mobile){this.mobileOverlayExpanded=false;(t=this.mobileButton)===null||t===void 0?void 0:t.focus()}}componentWillUpdate(){if(!this.headersOnly){this.updateTabVisibility()}else{this.hideAllTabsContent()}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},r(this.el)),i(this.el,h))}disconnectedCallback(){var s;if(this.popper){this.popper.destroy();this.popper=null}(s=this.resizeObserver)===null||s===void 0?void 0:s.disconnect()}async setAriaAttribute(s,t){c(this.mobile?this.popoverDiv:this.nativeTablist,s,t)}updateTabVisibility(){this.tabs.forEach(((s,t)=>{if(t!==this.currentActiveTabIndex){s.hidden=true}else{s.hidden=false}}))}hideAllTabsContent(){this.tabs.forEach((s=>s.hidden=true))}onMobileButtonClick(){this.mobileOverlayExpanded=!this.mobileOverlayExpanded;const s=this.popoverDiv.querySelectorAll("[role=tab]")[this.currentActiveTabIndex];requestAnimationFrame((()=>{s===null||s===void 0?void 0:s.focus()}))}onMobileButtonKeyDown(s){if(s.key==="ArrowDown"||s.key==="ArrowUp"){this.onMobileButtonClick()}}mobileLayout(){return[a("button",{id:"mobile-button",class:"wcs-tab-header active","aria-controls":"menu",role:"button","aria-expanded":this.mobileOverlayExpanded?"true":"false",ref:s=>this.mobileButton=s,onClick:()=>this.onMobileButtonClick(),onKeyDown:s=>this.onMobileButtonKeyDown(s),onBlur:s=>s.stopImmediatePropagation()},a("span",null,this.headers[this.currentActiveTabIndex]," ",a(n,{up:this.mobileOverlayExpanded}))),a("div",Object.assign({class:(this.mobileOverlayExpanded?"show ":"")+"popover",role:"tablist",id:"menu","aria-label":this.description,"aria-orientation":"vertical",ref:s=>this.popoverDiv=s,tabIndex:-1},this.inheritedAttributes),this.headers.map(((s,t)=>a("div",{class:"wcs-tab-header-mobile "+(this.currentActiveTabIndex===t?"mobile-active":""),onClick:()=>this.selectTabAndEmitChangeEvent(t),onKeyDown:s=>this.handleKeyDownMobile(s,t),tabIndex:this.currentActiveTabIndex===t?0:-1,role:"tab",id:`tabs-id-${this.tabsId}-tab-id-${t}`,"aria-controls":`tabs-id-${this.tabsId}-tab-panel-${t}`,"aria-label":s,"aria-selected":this.currentActiveTabIndex===t?"true":"false"},a("span",null,s)))))]}desktopLayout(){return this.headers.map(((s,t)=>a("div",{class:"wcs-tab-header "+(this.currentActiveTabIndex===t?"active":""),onClick:()=>this.selectTabAndEmitChangeEvent(t),onKeyDown:s=>this.handleKeyDown(s,t),tabIndex:this.currentActiveTabIndex===t?0:-1,role:"tab",id:`tabs-id-${this.tabsId}-tab-id-${t}`,"aria-controls":`tabs-id-${this.tabsId}-tab-panel-${t}`,"aria-label":s,"aria-selected":this.currentActiveTabIndex===t?"true":"false"},a("span",null,s))))}render(){return a(e,{key:"75568ca6a7aeec231dd3cf6635af3097abc2fa37"},a("div",Object.assign({key:"d42b3e1963f66f46197ab9c91efc2a12fc103fad",class:"wcs-tabs-headers",role:this.mobile?null:"tablist",ref:s=>this.nativeTablist=s,"aria-orientation":this.mobile?null:"horizontal","aria-label":this.mobile?null:this.description},!this.mobile&&this.inheritedAttributes),this.mobile?this.mobileLayout():this.desktopLayout()),a("div",{key:"8037e7b015386894daa212ed1d461cbaf4910848",class:"wcs-tabs"},a("slot",{key:"23c47cc557cb6d2a01173ca4a86790b39e2fd97f",onSlotchange:()=>this.onTabsSlotChange(),name:"wcs-tab"})))}onTabsSlotChange(){let s=0;this.refreshHeaders();this.tabs.forEach((t=>{t.setAttribute("aria-label",this.headers.at(s));t.setAttribute("id",`tabs-id-${this.tabsId}-tab-panel-${s}`);s++}))}get el(){return o(this)}static get watchers(){return{selectedIndex:["selectedIndexChanged"],selectedKey:["selectedTabkeyChanged"],mobile:["onMobileChange"]}}};let v=0;w.style=d;export{w as wcs_tabs};
+//# sourceMappingURL=p-167108aa.entry.js.map