wcs-core 7.0.0 → 7.1.0

package/dist/types/components.d.ts

@@ -392,6 +392,10 @@ export namespace Components {
           * Specify whether the checkbox is disabled or not.
          */
         "disabled": boolean;
+        /**
+          * Get the label text
+         */
+        "getLabel": () => Promise<string>;
         /**
           * If `true` the checkbox is in indeterminate state.
          */
@@ -691,6 +695,7 @@ export namespace Components {
      * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover
      * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field
      * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover
+     * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus
      * @cssprop --wcs-editable-field-border-style - Border style of the editable field
      * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size
      * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size
@@ -708,7 +713,7 @@ export namespace Components {
          */
         "formatFn": FormatFn<any>;
         /**
-          * Label of the field
+          * Label of the field.   Will also be part of the edit button `aria-label`.
          */
         "label": string;
         /**
@@ -1138,6 +1143,7 @@ export namespace Components {
      * @cssprop --wcs-input-border-color-default - default border color of the input when not focused
      * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled
      * @cssprop --wcs-input-border-color-focus - border color of the input when focused
+     * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused
      * @cssprop --wcs-input-border-color-error - border color of the input when in error state
      * @cssprop --wcs-input-value-color - color of the input value
      * @cssprop --wcs-input-value-font-weight - font weight of the input value
@@ -1191,6 +1197,7 @@ export namespace Components {
           * Returns the native `<input>` element used under the hood.
          */
         "getInputElement": () => Promise<HTMLInputElement>;
+        "hidePasswordButtonAriaLabel": string;
         /**
           * Name of the material icon to add to the input
          */
@@ -1248,6 +1255,7 @@ export namespace Components {
           * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global `input.blur()`.
          */
         "setBlur": () => Promise<void>;
+        "showPasswordButtonAriaLabel": string;
         /**
           * Specify the size (height) of the input.
          */
@@ -1298,6 +1306,10 @@ export namespace Components {
     /**
      * Lists are used for grouping a collection of related items.
      * Standard lists can be used either with or without icons. Depending on the context, the list can have one or more
+     * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action. 
+     * ## Accessibility guidelines 💡
+     * > - You should wrap your list-items inside a container with a `role` attribute set to `list`. On each `wcs-list-item`, 
+     *   you should set a `role` attribute to `listitem`. See the code below.
      * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action.
      * @cssprop --wcs-list-item-padding - Padding of the list item
      * @cssprop --wcs-list-item-border-width - Border width of the list item
@@ -1363,6 +1375,9 @@ export namespace Components {
      * > - Keyboard navigation is trapped inside the modal
      * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order
      * > to focus it upon dialog dismissal.
+     * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial 
+     * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you 
+     * > want to focus. You will see a story as example below
      * > - The modal can be closed at any time by pressing the Escape key.
      * >
      * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
@@ -1390,10 +1405,19 @@ export namespace Components {
           * Specifies the aria-label present on the close button when the modal is opened.   Only use when `showCloseButton` is `true`.
          */
         "closeButtonAriaLabel": string;
+        /**
+          * Disables automatic focus behavior when the modal opens.  When set to true, the modal will not automatically focus any element upon opening. Use this property with caution, as managing focus is important for accessibility. Consider providing an alternative focus management strategy if disabling the default behavior.
+         */
+        "disableAutoFocus": boolean;
         /**
           * Specifies whether the component should hide the actions slot or not
          */
         "hideActions": boolean;
+        /**
+          * The ID of the element to automatically focus when the modal opens.  If this property is not set and `disableAutoFocus` is false, the modal will automatically focus the first focusable element within its content. This follows accessibility best practices by ensuring keyboard navigation starts from a logical point when the modal opens.
+          * @example <wcs-modal initial-focus-element="cancel-button"></wcs-modal>
+         */
+        "initialFocusElementId"?: string;
         /**
           * Specifies which element id controls the modal
           * @private
@@ -1707,6 +1731,7 @@ export namespace Components {
           * The name of the control to be set on all radio button children
          */
         "name": any;
+        "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise<void>;
         /**
           * The value of the radio-group. Automatically reflects which radio button is selected.
          */
@@ -1801,6 +1826,10 @@ export namespace Components {
           * The text to display when the select is empty.
          */
         "placeholder"?: string | null;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
         /**
           * **Only works with `autocomplete` mode.**   If `true`, the server mode disables the client-side filtering on your select and allows you to handle which options should be present in your DOM.
          */
@@ -1992,6 +2021,10 @@ export namespace Components {
           * Specify whether the switch is disabled or not.
          */
         "disabled": boolean;
+        /**
+          * Get the label text
+         */
+        "getLabel": () => Promise<string>;
         /**
           * Specifie the alignment of the switch with the label content
          */
@@ -2204,14 +2237,13 @@ export namespace Components {
      * (for longer content).
      * Note that this component is based on the Tippy.js library : https://atomiks.github.io/tippyjs/
      * ## Accessibility guidelines 💡
-     * The component places necessary aria attribute on your target element (like the `wcs-button`) :
-     * - `aria-expanded`: set to true when popover is open, false when it is closed
      * The problem is that impaired users may not be able to see what is the information provided by the tooltip. To solve
      * this problem, the tooltip should be served with some aria attributes to make it accessible.
      * Aria-features `wcs-tooltip` respect:
      * - dismiss when the user presses the `Escape` key
      * - has a `role=tooltip`
-     * - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
+     * - when set to `interactive` mode
+     *  - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
      * Aria-features `wcs-tooltip` **does not respect with `wcs-button`**:
      * - aria-controls => we cannot do it yet, we need to wait for Cross root ARIA - export ID (https://github.com/WICG/aom/blob/gh-pages/exportid-explainer.md)
      * But you have to provide the "link" between the element you want to describe and the tooltip. To do this, you have to
@@ -2277,7 +2309,7 @@ export namespace Components {
          */
         "show": () => Promise<void>;
         /**
-          * Allows you to change the theme used by tippy.  The WCS theme is used by default and uses the WCS CSS variables.  You can create a theme by following this documentation and choosing a custom name : https://atomiks.github.io/tippyjs/v6/themes/
+          * Allows you to change the theme used by tippy.  The WCS theme 'dark' is used by default and uses the WCS CSS variables.  You can create a theme by following this documentation and choosing a custom name : https://atomiks.github.io/tippyjs/v6/themes/
          */
         "theme": 'dark' | 'light';
         /**
@@ -2981,6 +3013,7 @@ declare global {
      * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover
      * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field
      * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover
+     * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus
      * @cssprop --wcs-editable-field-border-style - Border style of the editable field
      * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size
      * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size
@@ -3380,6 +3413,7 @@ declare global {
      * @cssprop --wcs-input-border-color-default - default border color of the input when not focused
      * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled
      * @cssprop --wcs-input-border-color-focus - border color of the input when focused
+     * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused
      * @cssprop --wcs-input-border-color-error - border color of the input when in error state
      * @cssprop --wcs-input-value-color - color of the input value
      * @cssprop --wcs-input-value-font-weight - font weight of the input value
@@ -3426,6 +3460,10 @@ declare global {
     /**
      * Lists are used for grouping a collection of related items.
      * Standard lists can be used either with or without icons. Depending on the context, the list can have one or more
+     * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action. 
+     * ## Accessibility guidelines 💡
+     * > - You should wrap your list-items inside a container with a `role` attribute set to `list`. On each `wcs-list-item`, 
+     *   you should set a `role` attribute to `listitem`. See the code below.
      * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action.
      * @cssprop --wcs-list-item-padding - Padding of the list item
      * @cssprop --wcs-list-item-border-width - Border width of the list item
@@ -3493,6 +3531,9 @@ declare global {
      * > - Keyboard navigation is trapped inside the modal
      * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order
      * > to focus it upon dialog dismissal.
+     * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial 
+     * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you 
+     * > want to focus. You will see a story as example below
      * > - The modal can be closed at any time by pressing the Escape key.
      * >
      * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
@@ -4143,14 +4184,13 @@ declare global {
      * (for longer content).
      * Note that this component is based on the Tippy.js library : https://atomiks.github.io/tippyjs/
      * ## Accessibility guidelines 💡
-     * The component places necessary aria attribute on your target element (like the `wcs-button`) :
-     * - `aria-expanded`: set to true when popover is open, false when it is closed
      * The problem is that impaired users may not be able to see what is the information provided by the tooltip. To solve
      * this problem, the tooltip should be served with some aria attributes to make it accessible.
      * Aria-features `wcs-tooltip` respect:
      * - dismiss when the user presses the `Escape` key
      * - has a `role=tooltip`
-     * - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
+     * - when set to `interactive` mode
+     *  - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
      * Aria-features `wcs-tooltip` **does not respect with `wcs-button`**:
      * - aria-controls => we cannot do it yet, we need to wait for Cross root ARIA - export ID (https://github.com/WICG/aom/blob/gh-pages/exportid-explainer.md)
      * But you have to provide the "link" between the element you want to describe and the tooltip. To do this, you have to
@@ -4873,6 +4913,7 @@ declare namespace LocalJSX {
      * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover
      * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field
      * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover
+     * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus
      * @cssprop --wcs-editable-field-border-style - Border style of the editable field
      * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size
      * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size
@@ -4890,7 +4931,7 @@ declare namespace LocalJSX {
          */
         "formatFn"?: FormatFn<any>;
         /**
-          * Label of the field
+          * Label of the field.   Will also be part of the edit button `aria-label`.
          */
         "label": string;
         /**
@@ -5340,6 +5381,7 @@ declare namespace LocalJSX {
      * @cssprop --wcs-input-border-color-default - default border color of the input when not focused
      * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled
      * @cssprop --wcs-input-border-color-focus - border color of the input when focused
+     * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused
      * @cssprop --wcs-input-border-color-error - border color of the input when in error state
      * @cssprop --wcs-input-value-color - color of the input value
      * @cssprop --wcs-input-value-font-weight - font weight of the input value
@@ -5385,6 +5427,7 @@ declare namespace LocalJSX {
           * A hint to the browser for which enter key to display.
          */
         "enterkeyhint"?: WcsInputEnterKeyHint;
+        "hidePasswordButtonAriaLabel"?: string;
         /**
           * Name of the material icon to add to the input
          */
@@ -5453,6 +5496,7 @@ declare namespace LocalJSX {
           * If `true`, the user must fill in a value before submitting a form.
          */
         "required"?: boolean;
+        "showPasswordButtonAriaLabel"?: string;
         /**
           * Specify the size (height) of the input.
          */
@@ -5502,6 +5546,10 @@ declare namespace LocalJSX {
     /**
      * Lists are used for grouping a collection of related items.
      * Standard lists can be used either with or without icons. Depending on the context, the list can have one or more
+     * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action. 
+     * ## Accessibility guidelines 💡
+     * > - You should wrap your list-items inside a container with a `role` attribute set to `list`. On each `wcs-list-item`, 
+     *   you should set a `role` attribute to `listitem`. See the code below.
      * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action.
      * @cssprop --wcs-list-item-padding - Padding of the list item
      * @cssprop --wcs-list-item-border-width - Border width of the list item
@@ -5566,6 +5614,9 @@ declare namespace LocalJSX {
      * > - Keyboard navigation is trapped inside the modal
      * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order
      * > to focus it upon dialog dismissal.
+     * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial 
+     * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you 
+     * > want to focus. You will see a story as example below
      * > - The modal can be closed at any time by pressing the Escape key.
      * >
      * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
@@ -5593,10 +5644,19 @@ declare namespace LocalJSX {
           * Specifies the aria-label present on the close button when the modal is opened.   Only use when `showCloseButton` is `true`.
          */
         "closeButtonAriaLabel"?: string;
+        /**
+          * Disables automatic focus behavior when the modal opens.  When set to true, the modal will not automatically focus any element upon opening. Use this property with caution, as managing focus is important for accessibility. Consider providing an alternative focus management strategy if disabling the default behavior.
+         */
+        "disableAutoFocus"?: boolean;
         /**
           * Specifies whether the component should hide the actions slot or not
          */
         "hideActions"?: boolean;
+        /**
+          * The ID of the element to automatically focus when the modal opens.  If this property is not set and `disableAutoFocus` is false, the modal will automatically focus the first focusable element within its content. This follows accessibility best practices by ensuring keyboard navigation starts from a logical point when the modal opens.
+          * @example <wcs-modal initial-focus-element="cancel-button"></wcs-modal>
+         */
+        "initialFocusElementId"?: string;
         /**
           * Specifies which element id controls the modal
           * @private
@@ -6012,6 +6072,10 @@ declare namespace LocalJSX {
           * The text to display when the select is empty.
          */
         "placeholder"?: string | null;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
         /**
           * **Only works with `autocomplete` mode.**   If `true`, the server mode disables the client-side filtering on your select and allows you to handle which options should be present in your DOM.
          */
@@ -6424,14 +6488,13 @@ declare namespace LocalJSX {
      * (for longer content).
      * Note that this component is based on the Tippy.js library : https://atomiks.github.io/tippyjs/
      * ## Accessibility guidelines 💡
-     * The component places necessary aria attribute on your target element (like the `wcs-button`) :
-     * - `aria-expanded`: set to true when popover is open, false when it is closed
      * The problem is that impaired users may not be able to see what is the information provided by the tooltip. To solve
      * this problem, the tooltip should be served with some aria attributes to make it accessible.
      * Aria-features `wcs-tooltip` respect:
      * - dismiss when the user presses the `Escape` key
      * - has a `role=tooltip`
-     * - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
+     * - when set to `interactive` mode
+     *  - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
      * Aria-features `wcs-tooltip` **does not respect with `wcs-button`**:
      * - aria-controls => we cannot do it yet, we need to wait for Cross root ARIA - export ID (https://github.com/WICG/aom/blob/gh-pages/exportid-explainer.md)
      * But you have to provide the "link" between the element you want to describe and the tooltip. To do this, you have to
@@ -6481,7 +6544,7 @@ declare namespace LocalJSX {
          */
         "position"?: WcsTooltipPosition;
         /**
-          * Allows you to change the theme used by tippy.  The WCS theme is used by default and uses the WCS CSS variables.  You can create a theme by following this documentation and choosing a custom name : https://atomiks.github.io/tippyjs/v6/themes/
+          * Allows you to change the theme used by tippy.  The WCS theme 'dark' is used by default and uses the WCS CSS variables.  You can create a theme by following this documentation and choosing a custom name : https://atomiks.github.io/tippyjs/v6/themes/
          */
         "theme"?: 'dark' | 'light';
         /**
@@ -6969,6 +7032,7 @@ declare module "@stencil/core" {
              * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover
              * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field
              * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover
+             * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus
              * @cssprop --wcs-editable-field-border-style - Border style of the editable field
              * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size
              * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size
@@ -7221,6 +7285,7 @@ declare module "@stencil/core" {
              * @cssprop --wcs-input-border-color-default - default border color of the input when not focused
              * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled
              * @cssprop --wcs-input-border-color-focus - border color of the input when focused
+             * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused
              * @cssprop --wcs-input-border-color-error - border color of the input when in error state
              * @cssprop --wcs-input-value-color - color of the input value
              * @cssprop --wcs-input-value-font-weight - font weight of the input value
@@ -7249,6 +7314,10 @@ declare module "@stencil/core" {
             /**
              * Lists are used for grouping a collection of related items.
              * Standard lists can be used either with or without icons. Depending on the context, the list can have one or more
+             * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action. 
+             * ## Accessibility guidelines 💡
+             * > - You should wrap your list-items inside a container with a `role` attribute set to `list`. On each `wcs-list-item`, 
+             *   you should set a `role` attribute to `listitem`. See the code below.
              * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action.
              * @cssprop --wcs-list-item-padding - Padding of the list item
              * @cssprop --wcs-list-item-border-width - Border width of the list item
@@ -7293,6 +7362,9 @@ declare module "@stencil/core" {
              * > - Keyboard navigation is trapped inside the modal
              * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order
              * > to focus it upon dialog dismissal.
+             * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial 
+             * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you 
+             * > want to focus. You will see a story as example below
              * > - The modal can be closed at any time by pressing the Escape key.
              * >
              * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
@@ -7747,14 +7819,13 @@ declare module "@stencil/core" {
              * (for longer content).
              * Note that this component is based on the Tippy.js library : https://atomiks.github.io/tippyjs/
              * ## Accessibility guidelines 💡
-             * The component places necessary aria attribute on your target element (like the `wcs-button`) :
-             * - `aria-expanded`: set to true when popover is open, false when it is closed
              * The problem is that impaired users may not be able to see what is the information provided by the tooltip. To solve
              * this problem, the tooltip should be served with some aria attributes to make it accessible.
              * Aria-features `wcs-tooltip` respect:
              * - dismiss when the user presses the `Escape` key
              * - has a `role=tooltip`
-             * - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
+             * - when set to `interactive` mode
+             *  - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
              * Aria-features `wcs-tooltip` **does not respect with `wcs-button`**:
              * - aria-controls => we cannot do it yet, we need to wait for Cross root ARIA - export ID (https://github.com/WICG/aom/blob/gh-pages/exportid-explainer.md)
              * But you have to provide the "link" between the element you want to describe and the tooltip. To do this, you have to

package/dist/types/utils/control-component-interface.d.ts

@@ -0,0 +1,22 @@
+/**
+ * For form controls components which have a label within like a wcs-switch or wcs-checkbox
+ */
+export interface ControlComponentWithLabel {
+    /**
+     * Get the label text
+     */
+    getLabel(): Promise<string>;
+}
+export declare function isControlComponentWithLabel(el: any): el is ControlComponentWithLabel;
+/**
+
+ * Extracts the text content from nodes assigned to a slot in a Web Component's Shadow DOM.
+ *
+ * @param element - The Web Component HTMLElement containing a Shadow DOM with slots
+ * @param slotName - Optional name of the slot to target (if not provided, targets the default slot)
+ * @returns The combined text content of all nodes assigned to the specified slot, with normalized whitespace
+ *
+ * @throws Will not throw errors, but returns empty string if the element has no Shadow DOM,
+ *         no matching slot, or no assigned nodes
+ */
+export declare function getSlottedContentText(element: HTMLElement, slotName?: string): string;

package/dist/types/utils/helpers.d.ts

@@ -47,6 +47,17 @@ export declare const compareLists: <T>(sourceList: T[], newList: T[], compareFn:
     kept: T[];
     added: T[];
 };
+/**
+ * Normalizes whitespace by replacing multiple consecutive whitespace characters
+ * with a single space and removes leading and trailing whitespace.
+ *
+ * @param content - String potentially containing multiple whitespace characters to normalize, if the content is null or undefined, it will return an empty string.
+ * @returns Normalized string where sequences of whitespace are replaced by a single space.
+ *
+ * @example
+ * normalizeWhitespace("  Text   with    spaces  ") // Returns "Text with spaces"
+ */
+export declare function normalizeWhitespace(content: string): string;
 /**
  * Patched version of requestAnimationFrame that avoids ngzone
  * Use only when you know ngzone should not run
@@ -58,6 +69,10 @@ export declare const raf: (h: any) => any;
 export declare const clickInsideElement: (event: MouseEvent, element: HTMLElement) => boolean;
 export declare const clickTargetIsElementOrChildren: (mouseEvent: MouseEvent, element: HTMLElement) => boolean;
 export declare function generateUniqueId(componentName: string): string;
+/**
+ * `clientX` property doesn't exist on KeyboardEvent, we therefore deduce it's a MouseEvent.
+ */
+export declare function isMouseEvent(event: MouseEvent | KeyboardEvent): event is MouseEvent;
 export declare function isKeyup(evt: KeyboardEvent): boolean;
 export declare function isKeydown(evt: KeyboardEvent): boolean;
 export declare function isEscapeKey(evt: KeyboardEvent): boolean;
@@ -74,3 +89,9 @@ export declare function isPageUpKey(evt: KeyboardEvent): boolean;
 export declare function isTabKey(evt: KeyboardEvent): boolean;
 export declare function isCtrlA(evt: KeyboardEvent): boolean;
 export declare function getCssRootPropertyValue(name: string): string | null;
+/**
+ * Converts a CSS time value string (e.g., '150ms', '1.5s') into milliseconds
+ * @param {string} timeValue - The CSS time value string
+ * @returns {number} Time in milliseconds
+ */
+export declare function parseCssTimeValueToMilliseconds(timeValue: string): number;

package/dist/wcs/p-0017d766.js

@@ -0,0 +1,2 @@
+import{g as n}from"./p-52d77e1f.js";function t(n,t){n.forEach((n=>{n.addEventListener("focusout",(r=>{const c=r.relatedTarget;if(!o(n,c)){const n=r.composedPath();if(s(n,t)){n.filter(e(t))[0].close()}}}))}))}function o(n,t){return n.contains(t)}function e(n){return t=>t.nodeName===n}function s(n,t){return n.map((n=>n.nodeName)).indexOf(t)!==-1}function r(t){const o=n("--wcs-phone-breakpoint-max-width")||"575px";const e=parseInt(o,10);return new ResizeObserver((n=>{const o=n[0].contentRect;const s=o.right-o.width;const r=o.left;if(o.width<=e-(r+s)){t.currentActiveSizing="mobile"}else{t.currentActiveSizing="desktop"}}))}export{r as c,t as r};
+//# sourceMappingURL=p-0017d766.js.map

package/dist/wcs/{p-45a6934d.entry.js → p-0ffdfc10.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as i,H as t}from"./p-32e583ea.js";const s=":host{--wcs-skeleton-width:100%;--wcs-skeleton-height:100%;--wcs-skeleton-min-height:1rem;--wcs-skeleton-background-color:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);--wcs-skeleton-animation-duration:var(--wcs-semantic-motion-duration-animation-base);display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:var(--wcs-skeleton-height);width:var(--wcs-skeleton-width);min-height:var(--wcs-skeleton-min-height);background:var(--wcs-skeleton-background-color);background-size:400% 100%}:host([animation=glide]) span{animation:glide var(--wcs-skeleton-animation-duration) ease-in-out infinite}:host([animation=pulse]){animation:pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-circle-border-radius:var(--wcs-semantic-border-radius-full);aspect-ratio:1/1;border-radius:var(--wcs-skeleton-circle-border-radius)}";const a=s;const o=class{constructor(i){e(this,i);this.animation="glide";this.radius=50}render(){return i(t,{key:"44cd54e8708108ea23e1cb45de611685603a1c06",style:{width:`${this.radius}px`,height:`${this.radius}px`}},i("span",{key:"0a3a05422de5cd69604847e4e89d5111b26cdb3d","aria-hidden":"true"}))}};o.style=a;export{o as wcs_skeleton_circle};
-//# sourceMappingURL=p-45a6934d.entry.js.map
+import{r as e,h as i,H as t}from"./p-32e583ea.js";const a=":host{--wcs-skeleton-width:100%;--wcs-skeleton-height:100%;--wcs-skeleton-min-height:1rem;--wcs-skeleton-background-color:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);--wcs-skeleton-animation-duration:var(--wcs-semantic-motion-duration-animation-base);display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:var(--wcs-skeleton-height);width:var(--wcs-skeleton-width);min-height:var(--wcs-skeleton-min-height);background:var(--wcs-skeleton-background-color);background-size:400% 100%}:host([animation=glide]) span{animation:glide var(--wcs-skeleton-animation-duration) ease-in-out infinite}:host([animation=pulse]){animation:pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-circle-border-radius:var(--wcs-semantic-border-radius-full);aspect-ratio:1/1;border-radius:var(--wcs-skeleton-circle-border-radius)}";const s=a;const o=class{constructor(i){e(this,i);this.animation="glide";this.radius=50}render(){return i(t,{key:"35693d9a55aa03effb704c51234571cd9ebbbeac",style:{width:`${this.radius}px`,height:`${this.radius}px`}},i("span",{key:"b1e806d2d016647626956aeb2962681d13083762","aria-hidden":"true"}))}};o.style=s;export{o as wcs_skeleton_circle};
+//# sourceMappingURL=p-0ffdfc10.entry.js.map

package/dist/wcs/{p-9f23c49e.entry.js → p-13090618.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,h as r,g as a}from"./p-32e583ea.js";import{i as e,a as o,s as c}from"./p-a3aece7a.js";const t=":host{--wcs-progress-bar-border-radius:var(--wcs-semantic-border-radius-full);--wcs-progress-bar-border-radius-small:var(--wcs-semantic-border-radius-small);--wcs-progress-bar-animation-duration:var(--wcs-semantic-motion-duration-feedback-slower);--wcs-progress-bar-height-m:calc(var(--wcs-semantic-size-m) / 4);--wcs-progress-bar-height-s:calc(var(--wcs-semantic-size-s) / 6);--wcs-progress-bar-background-color:transparent;--wcs-progress-bar-rail-color:var(--wcs-semantic-color-background-surface-tertiary);--wcs-progress-bar-rail-spacing:var(--wcs-semantic-spacing-small);--wcs-progress-bar-gap-s:var(--wcs-semantic-spacing-small);--wcs-progress-bar-gap-m:var(--wcs-semantic-spacing-base);--wcs-progress-bar-indicator-color:var(--wcs-semantic-color-background-surface-brand);--wcs-progress-bar-label-color:var(--wcs-semantic-color-text-primary);--wcs-progress-bar-label-font-size-s:var(--wcs-semantic-font-size-s);--wcs-progress-bar-label-font-size-m:calc(1.5 * var(--wcs-semantic-font-size-m));--wcs-progress-bar-label-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-progress-bar-label-percentage-font-size-s:calc(var(--wcs-semantic-font-size-s) * 0.7);--wcs-progress-bar-label-percentage-font-size-m:calc(var(--wcs-semantic-font-size-m) * 0.7);--wcs-progress-bar-label-top-space:var(--wcs-semantic-spacing-large)}:host([size=s]) .progress{height:var(--wcs-progress-bar-height-s);background-color:var(--wcs-progress-bar-background-color);background-image:none;background-size:auto;border-radius:var(--wcs-progress-bar-border-radius-small)}:host([size=s]) .progress .progress-label{font-size:var(--wcs-progress-bar-label-font-size-s);bottom:calc(100% + var(--wcs-progress-bar-gap-s))}:host([size=s]) .progress .progress-label sup{font-size:var(--wcs-progress-bar-label-percentage-font-size-s)}.progress{display:flex;height:var(--wcs-progress-bar-height-m);color:var(--wcs-progress-bar-label-color);background-color:var(--wcs-progress-bar-background-color);background-image:linear-gradient(90deg, var(--wcs-progress-bar-rail-color), 50%, transparent 50%);background-size:var(--wcs-progress-bar-rail-spacing) var(--wcs-progress-bar-height-m);border-radius:var(--wcs-progress-bar-border-radius)}.progress.has-label{margin-top:var(--wcs-progress-bar-label-top-space)}.progress.value-zero>.progress-bar>.progress-label{right:unset}.progress-bar{position:relative;display:flex;flex-direction:column;justify-content:center;color:var(--wcs-progress-bar-label-color);text-align:center;background-color:var(--wcs-progress-bar-indicator-color);border-radius:var(--wcs-progress-bar-border-radius);transition:width var(--wcs-progress-bar-animation-duration) ease-out}.progress-label{line-height:1;position:absolute;right:0;bottom:calc(100% + var(--wcs-progress-bar-gap-m));display:flex;flex-direction:row;align-items:flex-start;font-size:var(--wcs-progress-bar-label-font-size-m);font-weight:var(--wcs-progress-bar-label-font-weight)}.progress-label sup{font-size:var(--wcs-progress-bar-label-percentage-font-size-m)}";const i=t;const l=["title"];const b=class{constructor(r){s(this,r);this.inheritedAttributes={};this.size="m";this.showLabel=false;this.value=0}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},e(this.el)),o(this.el,l))}async setAriaAttribute(s,r){c(this.nativeProgress,s,r)}render(){const s={width:this.value+"%"};return r("div",Object.assign({key:"5eafbef962694edca0d5df1ba278305024b62c52",class:this.rootClasses(),role:"progressbar","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.value,"aria-valuetext":this.value+"%",ref:s=>this.nativeProgress=s},this.inheritedAttributes),r("div",{key:"247b91b7898ef6c1c2ee16100bc344ec633beb9b",class:"progress-bar",style:s},this.showLabel&&r("span",{key:"24da06a23d7c1bae748872823defd844302d6d64",class:"progress-label"},this.value,r("sup",{key:"0deaf0870a815c32d8c45767f12c41b4ee8b493b"},"%"))))}rootClasses(){let s="progress";if(this.showLabel)s+=" has-label";if(this.value===0)s+=" value-zero";return s}get el(){return a(this)}};b.style=i;export{b as wcs_progress_bar};
-//# sourceMappingURL=p-9f23c49e.entry.js.map
+import{r as s,h as r,g as a}from"./p-32e583ea.js";import{i as e,a as o,s as c}from"./p-52d77e1f.js";const t=":host{--wcs-progress-bar-border-radius:var(--wcs-semantic-border-radius-full);--wcs-progress-bar-border-radius-small:var(--wcs-semantic-border-radius-small);--wcs-progress-bar-animation-duration:var(--wcs-semantic-motion-duration-feedback-slower);--wcs-progress-bar-height-m:calc(var(--wcs-semantic-size-m) / 4);--wcs-progress-bar-height-s:calc(var(--wcs-semantic-size-s) / 6);--wcs-progress-bar-background-color:transparent;--wcs-progress-bar-rail-color:var(--wcs-semantic-color-background-surface-tertiary);--wcs-progress-bar-rail-spacing:var(--wcs-semantic-spacing-small);--wcs-progress-bar-gap-s:var(--wcs-semantic-spacing-small);--wcs-progress-bar-gap-m:var(--wcs-semantic-spacing-base);--wcs-progress-bar-indicator-color:var(--wcs-semantic-color-background-surface-brand);--wcs-progress-bar-label-color:var(--wcs-semantic-color-text-primary);--wcs-progress-bar-label-font-size-s:var(--wcs-semantic-font-size-s);--wcs-progress-bar-label-font-size-m:calc(1.5 * var(--wcs-semantic-font-size-m));--wcs-progress-bar-label-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-progress-bar-label-percentage-font-size-s:calc(var(--wcs-semantic-font-size-s) * 0.7);--wcs-progress-bar-label-percentage-font-size-m:calc(var(--wcs-semantic-font-size-m) * 0.7);--wcs-progress-bar-label-top-space:var(--wcs-semantic-spacing-large)}:host([size=s]) .progress{height:var(--wcs-progress-bar-height-s);background-color:var(--wcs-progress-bar-background-color);background-image:none;background-size:auto;border-radius:var(--wcs-progress-bar-border-radius-small)}:host([size=s]) .progress .progress-label{font-size:var(--wcs-progress-bar-label-font-size-s);bottom:calc(100% + var(--wcs-progress-bar-gap-s))}:host([size=s]) .progress .progress-label sup{font-size:var(--wcs-progress-bar-label-percentage-font-size-s)}.progress{display:flex;height:var(--wcs-progress-bar-height-m);color:var(--wcs-progress-bar-label-color);background-color:var(--wcs-progress-bar-background-color);background-image:linear-gradient(90deg, var(--wcs-progress-bar-rail-color), 50%, transparent 50%);background-size:var(--wcs-progress-bar-rail-spacing) var(--wcs-progress-bar-height-m);border-radius:var(--wcs-progress-bar-border-radius)}.progress.has-label{margin-top:var(--wcs-progress-bar-label-top-space)}.progress.value-zero>.progress-bar>.progress-label{right:unset}.progress-bar{position:relative;display:flex;flex-direction:column;justify-content:center;color:var(--wcs-progress-bar-label-color);text-align:center;background-color:var(--wcs-progress-bar-indicator-color);border-radius:var(--wcs-progress-bar-border-radius);transition:width var(--wcs-progress-bar-animation-duration) ease-out}.progress-label{line-height:1;position:absolute;right:0;bottom:calc(100% + var(--wcs-progress-bar-gap-m));display:flex;flex-direction:row;align-items:flex-start;font-size:var(--wcs-progress-bar-label-font-size-m);font-weight:var(--wcs-progress-bar-label-font-weight)}.progress-label sup{font-size:var(--wcs-progress-bar-label-percentage-font-size-m)}";const i=t;const l=["title"];const b=class{constructor(r){s(this,r);this.inheritedAttributes={};this.size="m";this.showLabel=false;this.value=0}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},e(this.el)),o(this.el,l))}async setAriaAttribute(s,r){c(this.nativeProgress,s,r)}render(){const s={width:this.value+"%"};return r("div",Object.assign({key:"9339cb3c4ef89618cb45119495d3601ce2110d3d",class:this.rootClasses(),role:"progressbar","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.value,"aria-valuetext":this.value+"%",ref:s=>this.nativeProgress=s},this.inheritedAttributes),r("div",{key:"8b54ef388bcd4e2bff826a18374c4732f7d0e384",class:"progress-bar",style:s},this.showLabel&&r("span",{key:"f50f5879441f22db9552f6bbaaca3ede6f23a678",class:"progress-label"},this.value,r("sup",{key:"b10471901b5d3efc0ae95d3a1de822ead1720b87"},"%"))))}rootClasses(){let s="progress";if(this.showLabel)s+=" has-label";if(this.value===0)s+=" value-zero";return s}get el(){return a(this)}};b.style=i;export{b as wcs_progress_bar};
+//# sourceMappingURL=p-13090618.entry.js.map

package/dist/wcs/{p-8f0e093f.entry.js → p-13e50077.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as r,h as e,H as t}from"./p-32e583ea.js";import{c,d}from"./p-a3aece7a.js";const s="wcs-dropdown-item{--wcs-dropdown-item-height:var(--wcs-semantic-size-m);--wcs-dropdown-item-padding-horizontal:var(--wcs-semantic-spacing-base);--wcs-dropdown-item-padding-vertical:0;--wcs-dropdown-item-text-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-dropdown-item-text-color-default:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-dropdown-item-text-color-hover:var(--wcs-semantic-color-foreground-action-neutral-hover);--wcs-dropdown-item-text-color-press:var(--wcs-semantic-color-foreground-action-neutral-press);--wcs-dropdown-item-background-color-default:var(--wcs-semantic-color-background-action-neutral-default);--wcs-dropdown-item-background-color-hover:var(--wcs-semantic-color-background-action-neutral-hover);--wcs-dropdown-item-background-color-press:var(--wcs-semantic-color-background-action-neutral-press);--wcs-dropdown-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-dropdown-item-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-item-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);padding:0 var(--wcs-dropdown-item-padding-horizontal);font-weight:var(--wcs-dropdown-item-text-font-weight);cursor:pointer;color:var(--wcs-dropdown-item-text-color-default);height:var(--wcs-dropdown-item-height);display:flex;flex-direction:row;align-items:center;border-radius:var(--wcs-dropdown-item-border-radius);transition:background-color var(--wcs-dropdown-item-transition-duration) ease-in-out}wcs-dropdown-item:hover{color:var(--wcs-dropdown-item-text-color-hover);background-color:var(--wcs-dropdown-item-background-color-hover)}wcs-dropdown-item:active{color:var(--wcs-dropdown-item-text-color-press);background-color:var(--wcs-dropdown-item-background-color-press)}wcs-dropdown-item:focus-visible{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}@supports not selector(wcs-dropdown-item:focus-visible){wcs-dropdown-item:focus-within{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}}";const i=s;const n=class{constructor(e){o(this,e);this.wcsDropdownItemClick=r(this,"wcsDropdownItemClick",7)}onMouseUp(o){this.wcsDropdownItemClick.emit()}onKeyDown(o){if(c(o)||d(o)){o.preventDefault();o.stopImmediatePropagation();this.wcsDropdownItemClick.emit()}}render(){return e(t,{key:"42948ba23a57e020d496f17bf667e976ce7768d2",slot:"item",role:"menuitem",tabindex:"-1"},e("slot",{key:"6f5ac6bf76bc964f5a28ca5d6ee3bd43c3213e50"}))}};n.style=i;export{n as wcs_dropdown_item};
-//# sourceMappingURL=p-8f0e093f.entry.js.map
+import{r as o,c as r,h as e,H as t}from"./p-32e583ea.js";import{c,d}from"./p-52d77e1f.js";const s="wcs-dropdown-item{--wcs-dropdown-item-height:var(--wcs-semantic-size-m);--wcs-dropdown-item-padding-horizontal:var(--wcs-semantic-spacing-base);--wcs-dropdown-item-padding-vertical:0;--wcs-dropdown-item-text-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-dropdown-item-text-color-default:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-dropdown-item-text-color-hover:var(--wcs-semantic-color-foreground-action-neutral-hover);--wcs-dropdown-item-text-color-press:var(--wcs-semantic-color-foreground-action-neutral-press);--wcs-dropdown-item-background-color-default:var(--wcs-semantic-color-background-action-neutral-default);--wcs-dropdown-item-background-color-hover:var(--wcs-semantic-color-background-action-neutral-hover);--wcs-dropdown-item-background-color-press:var(--wcs-semantic-color-background-action-neutral-press);--wcs-dropdown-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-dropdown-item-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-item-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);padding:0 var(--wcs-dropdown-item-padding-horizontal);font-weight:var(--wcs-dropdown-item-text-font-weight);cursor:pointer;color:var(--wcs-dropdown-item-text-color-default);height:var(--wcs-dropdown-item-height);display:flex;flex-direction:row;align-items:center;border-radius:var(--wcs-dropdown-item-border-radius);transition:background-color var(--wcs-dropdown-item-transition-duration) ease-in-out}wcs-dropdown-item:hover{color:var(--wcs-dropdown-item-text-color-hover);background-color:var(--wcs-dropdown-item-background-color-hover)}wcs-dropdown-item:active{color:var(--wcs-dropdown-item-text-color-press);background-color:var(--wcs-dropdown-item-background-color-press)}wcs-dropdown-item:focus-visible{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}@supports not selector(wcs-dropdown-item:focus-visible){wcs-dropdown-item:focus-within{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}}";const i=s;const n=class{constructor(e){o(this,e);this.wcsDropdownItemClick=r(this,"wcsDropdownItemClick",7)}onMouseUp(o){this.wcsDropdownItemClick.emit()}onKeyDown(o){if(c(o)||d(o)){o.preventDefault();o.stopImmediatePropagation();this.wcsDropdownItemClick.emit()}}render(){return e(t,{key:"42948ba23a57e020d496f17bf667e976ce7768d2",slot:"item",role:"menuitem",tabindex:"-1"},e("slot",{key:"6f5ac6bf76bc964f5a28ca5d6ee3bd43c3213e50"}))}};n.style=i;export{n as wcs_dropdown_item};
+//# sourceMappingURL=p-13e50077.entry.js.map

package/dist/wcs/p-1438530e.entry.js

@@ -0,0 +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-gap:var(--wcs-semantic-spacing-base);--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));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:"03ddc8c170819c33674104a70697291ef5e56a9d"})}};e.style=s;export{e as wcs_badge};
+//# sourceMappingURL=p-1438530e.entry.js.map

package/dist/wcs/p-1438530e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["badgeCss","WcsBadgeStyle0","Badge","render","h","key"],"sources":["src/components/badge/badge.scss?tag=wcs-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":[":host {\n    --wcs-badge-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-badge-height-l: calc(4 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-l: var(--wcs-semantic-font-size-label-1);\n    --wcs-badge-height-m: calc(3 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-m: var(--wcs-semantic-font-size-label-2);\n    --wcs-badge-height-s: calc(2.5 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-s: var(--wcs-semantic-font-size-label-3);\n\n    --wcs-badge-border-radius-default: var(--wcs-semantic-border-radius-base);\n    --wcs-badge-border-radius-circular: var(--wcs-semantic-border-radius-full);\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-brand);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n    --wcs-badge-gap: var(--wcs-semantic-spacing-base);\n    --wcs-badge-padding-horizontal-l: var(--wcs-semantic-spacing-base);\n    --wcs-badge-padding-horizontal-m: var(--wcs-semantic-spacing-base);\n    --wcs-badge-padding-horizontal-s: calc(0.75 * var(--wcs-semantic-spacing-base));\n\n    display: inline-flex;\n    gap: var(--wcs-badge-gap);\n    padding: 0 var(--wcs-badge-padding-horizontal);\n    height: var(--wcs-badge-height);\n    inline-size: fit-content;\n    font-size: var(--wcs-badge-font-size);\n    box-sizing: border-box;\n    font-weight: var(--wcs-badge-font-weight);\n    line-height: 1;\n    text-align: center;\n    align-content: center;\n    align-items: center;\n    white-space: nowrap;\n    vertical-align: baseline;\n    border-radius: var(--wcs-badge-border-radius-default);\n    color: var(--wcs-badge-color);\n    background-color: var(--wcs-badge-background-color);\n}\n\n:host([color=lighter]) {\n    --wcs-badge-color: var(--wcs-badge-color-lighter) !important;\n    --wcs-badge-background-color: var(--wcs-badge-background-color-lighter) !important;\n}\n\n:host([shape=rounded]){\n    border-radius: var(--wcs-badge-border-radius-circular);\n}\n\n:host([size=l]) {\n    --wcs-badge-height: var(--wcs-badge-height-l);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-large) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-l);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-l);\n}\n\n:host([size=m]) { // Default\n    --wcs-badge-height: var(--wcs-badge-height-m);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-base) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-m);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-m);\n}\n\n:host([size=s]) {\n    --wcs-badge-height: var(--wcs-badge-height-s);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-small) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-s);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-s);\n}\n\n\n/* Color variants */\n\n:host(.wcs-secondary) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-secondary);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-success) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-success-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-success-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-info) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-information-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-information-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-warning) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-warning-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-warning-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-inverse);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-critical), :host(.wcs-danger) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-critical-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-critical-lightest);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-critical);\n}\n","import { Component, ComponentInterface, h, Prop } from '@stencil/core';\nimport { BadgeColor, BadgeShape, BadgeSize } from './badge-interface';\n\n/**\n * The badge component is a small label, generally appearing inside or in proximity to another larger interface component,\n * representing a status, property, or some other metadata.  \n *\n * @cssprop --wcs-badge-font-weight - Define the font weight of the badge\n * @cssprop --wcs-badge-height-l - Large height of the badge\n * @cssprop --wcs-badge-font-size-l - Large font size of the badge\n * @cssprop --wcs-badge-height-m - Medium height of the badge\n * @cssprop --wcs-badge-font-size-m - Font size of the badge\n * @cssprop --wcs-badge-height-s - Small height of the badge\n * @cssprop --wcs-badge-font-size-s - Small font size of the badge\n * @cssprop --wcs-badge-border-radius-default - Default border radius of the badge\n * @cssprop --wcs-badge-border-radius-circular - Circular border radius of the badge\n * \n * @cssprop --wcs-badge-background-color - Background color of the badge\n * @cssprop --wcs-badge-background-color-lighter - Background color of the lighter badge\n * @cssprop --wcs-badge-color - Text color of the badge\n * @cssprop --wcs-badge-color-lighter - Text color of the lighter badge\n * @cssporp --wcs-badge-gap - The gap inside the badge\n * \n * @cssprop --wcs-badge-padding-horizontal-l - Horizontal padding of the size L badge\n * @cssprop --wcs-badge-padding-horizontal-m - Horizontal padding of the size M badge\n * @cssprop --wcs-badge-padding-horizontal-s - Horizontal padding of the size S badge\n */\n@Component({\n    tag: 'wcs-badge',\n    styleUrl: 'badge.scss',\n    shadow: true\n})\nexport class Badge implements ComponentInterface {\n    /**\n     * Define the shape of the badge\n     */\n    @Prop() shape: BadgeShape = 'normal';\n    /**\n     * Allows you to change the color of the badge to make it less bright (based on the color chosen by the CSS class).\n     */\n    @Prop() color: BadgeColor = 'initial';\n\n    /**\n     * Specify the size of the badge.\n     */\n    @Prop({ reflect: true }) size: BadgeSize = 'm';\n\n    render() {\n        return (\n            <slot/>\n        );\n    }\n}\n"],"mappings":"2CAAA,MAAMA,EAAW,0vIACjB,MAAAC,EAAeD,E,MC+BFE,EAAK,M,oCAIc,S,WAIA,U,UAKe,G,CAE3C,MAAAC,GACI,OACIC,EAAA,QAAAC,IAAA,4C"}

package/dist/wcs/{p-2305f257.entry.js → p-16dd21cf.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,f as s,h as t,H as a,g as i}from"./p-32e583ea.js";import{i as n,a as r,s as o}from"./p-a3aece7a.js";import{E as c,I as d,N as l}from"./p-3abf8a42.js";const h=':host{--wcs-breadcrumb-icon-color:var(--wcs-semantic-color-foreground-brand);--wcs-breadcrumb-icon-font-size:0.5rem;--wcs-breadcrumb-gap:var(--wcs-semantic-spacing-base)}nav.wcs-breadcrumb-container slot[name=hidden-items]{display:none}nav.wcs-breadcrumb-container.show-hidden-items slot[name=hidden-items]{display:contents}nav.wcs-breadcrumb-container div[role=list]{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}nav.wcs-breadcrumb-container div[role=list] ::slotted(wcs-breadcrumb-item){margin-right:var(--wcs-breadcrumb-gap)}nav.wcs-breadcrumb-container div[role=list] ::slotted(wcs-breadcrumb-item:last-child){margin-right:0}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted{display:flex;align-items:center;margin-right:var(--wcs-breadcrumb-gap)}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted wcs-button[size=s]{--wcs-button-min-width:24px;--wcs-button-height:20px;--wcs-button-border-radius:2px;transform:translateY(2px)}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted .item-icon{margin-left:calc(var(--wcs-breadcrumb-gap) - 1px);font-family:"icons";font-size:var(--wcs-breadcrumb-icon-font-size);color:var(--wcs-breadcrumb-icon-color);transform:translateY(1px)}';const b=h;const m=[];const f=class{constructor(s){e(this,s);this.inheritedAttributes={};this.maxItems=undefined;this.itemsBeforeCollapse=1;this.itemsAfterCollapse=2;this.ariaLabelExpandButton=c;this.showHiddenItems=false}handleCollapsePropsChange(){this.updateCollapsedViewMode()}handleAriaLabelExpandBtnChange(e){var s;(s=this.expandBtnEl)===null||s===void 0?void 0:s.setAriaAttribute("aria-label",e)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),r(this.el,m));this.updateCollapsedViewMode()}componentDidLoad(){var e;(e=this.expandBtnEl)===null||e===void 0?void 0:e.setAriaAttribute("aria-label",this.ariaLabelExpandButton)}async setAriaAttribute(e,s){o(this.navEl,e,s)}getBreadcrumbItems(){return Array.from(this.el.querySelectorAll("wcs-breadcrumb-item"))}shouldCollapseItems(){return!!this.maxItems&&this.getBreadcrumbItems().length>this.maxItems&&this.itemsBeforeCollapse+this.itemsAfterCollapse<=this.maxItems}updateCollapsedViewMode(){if(this.shouldCollapseItems()){this.assignSlotNamesForCollapsedViewMode()}else{this.assignSlotNamesForNonCollapsedViewMode()}}assignSlotNamesForCollapsedViewMode(){const e=this.getBreadcrumbItems();const s=this.itemsBeforeCollapse-1;const t=e.length-this.itemsAfterCollapse;e.forEach(((a,i)=>{if(i<=s){a.slot="items-before-expand-btn";a.last=false}else if(i>s&&i<t){a.slot="hidden-items";a.last=false}else{a.slot="items-after-expand-btn";a.last=i===e.length-1}}))}assignSlotNamesForNonCollapsedViewMode(){const e=this.getBreadcrumbItems();e.forEach(((s,t)=>{s.slot="non-collapsed";s.last=t===e.length-1}))}handleSlotChange(){this.updateCollapsedViewMode();this.showHiddenItems=false;s(this)}handleOnExpandBtnClick(){this.showHiddenItems=true;requestAnimationFrame((()=>this.setFocusToFirstHiddenItem()))}setFocusToFirstHiddenItem(){const e=this.getBreadcrumbItems();const s=this.itemsBeforeCollapse;const t=e[s];const a=t.shadowRoot.querySelector("slot");const i=a.assignedElements()[0];i===null||i===void 0?void 0:i.focus()}renderExpandAllButton(){const e=this.itemsAfterCollapse===0;return t("div",{role:"listitem",class:"item-not-slotted"},t("wcs-button",{mode:"clear",shape:"square",size:"s",onClick:this.handleOnExpandBtnClick.bind(this),ref:e=>this.expandBtnEl=e},t("wcs-mat-icon",{icon:"more_horiz"})),!e&&t("span",{class:"item-icon","aria-hidden":"true"},d))}render(){const e=this.shouldCollapseItems()&&!this.showHiddenItems;return t(a,{key:"944e877808887ad3933072e35d0760df00e5ab68"},t("nav",Object.assign({key:"210476d38cf668330fa9ce0f6ab009499d6afe8d",class:`wcs-breadcrumb-container${this.showHiddenItems?" show-hidden-items":""}`,"aria-label":l},this.inheritedAttributes,{ref:e=>this.navEl=e}),t("div",{key:"882146b18d16c9fe5033a6677a6a3281696af183",role:"list"},t("slot",{key:"14491fd9df9d3901ae3c5f4473ddf2ebfe36a1fb",onSlotchange:this.handleSlotChange.bind(this)}),t("slot",{key:"b077183b3a4abec4f40cd87974dac248b743fa13",name:"non-collapsed"}),t("slot",{key:"fb3cb5779492c275cb47619766df150da71f4daa",name:"items-before-expand-btn"}),t("slot",{key:"86889f6be0e843b55cc8868df6abd9d7af4cf7d9",name:"hidden-items"}),e&&this.renderExpandAllButton(),t("slot",{key:"b5c680f8c61d7491ab5f180d566b2718d1fd684a",name:"items-after-expand-btn"}))))}get el(){return i(this)}static get watchers(){return{maxItems:["handleCollapsePropsChange"],itemsBeforeCollapse:["handleCollapsePropsChange"],itemsAfterCollapse:["handleCollapsePropsChange"],ariaLabelExpandButton:["handleAriaLabelExpandBtnChange"]}}};f.style=b;export{f as wcs_breadcrumb};
-//# sourceMappingURL=p-2305f257.entry.js.map
+import{r as e,f as s,h as t,H as a,g as i}from"./p-32e583ea.js";import{i as n,a as r,s as o}from"./p-52d77e1f.js";import{E as c,I as d,N as l}from"./p-3abf8a42.js";const h=':host{--wcs-breadcrumb-icon-color:var(--wcs-semantic-color-foreground-brand);--wcs-breadcrumb-icon-font-size:0.5rem;--wcs-breadcrumb-gap:var(--wcs-semantic-spacing-base)}nav.wcs-breadcrumb-container slot[name=hidden-items]{display:none}nav.wcs-breadcrumb-container.show-hidden-items slot[name=hidden-items]{display:contents}nav.wcs-breadcrumb-container div[role=list]{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}nav.wcs-breadcrumb-container div[role=list] ::slotted(wcs-breadcrumb-item){margin-right:var(--wcs-breadcrumb-gap)}nav.wcs-breadcrumb-container div[role=list] ::slotted(wcs-breadcrumb-item:last-child){margin-right:0}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted{display:flex;align-items:center;margin-right:var(--wcs-breadcrumb-gap)}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted wcs-button[size=s]{--wcs-button-min-width:24px;--wcs-button-height:20px;--wcs-button-border-radius:2px;transform:translateY(2px)}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted .item-icon{margin-left:calc(var(--wcs-breadcrumb-gap) - 1px);font-family:"icons";font-size:var(--wcs-breadcrumb-icon-font-size);color:var(--wcs-breadcrumb-icon-color);transform:translateY(1px)}';const b=h;const m=[];const f=class{constructor(s){e(this,s);this.inheritedAttributes={};this.maxItems=undefined;this.itemsBeforeCollapse=1;this.itemsAfterCollapse=2;this.ariaLabelExpandButton=c;this.showHiddenItems=false}handleCollapsePropsChange(){this.updateCollapsedViewMode()}handleAriaLabelExpandBtnChange(e){var s;(s=this.expandBtnEl)===null||s===void 0?void 0:s.setAriaAttribute("aria-label",e)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),r(this.el,m));this.updateCollapsedViewMode()}componentDidLoad(){var e;(e=this.expandBtnEl)===null||e===void 0?void 0:e.setAriaAttribute("aria-label",this.ariaLabelExpandButton)}async setAriaAttribute(e,s){o(this.navEl,e,s)}getBreadcrumbItems(){return Array.from(this.el.querySelectorAll("wcs-breadcrumb-item"))}shouldCollapseItems(){return!!this.maxItems&&this.getBreadcrumbItems().length>this.maxItems&&this.itemsBeforeCollapse+this.itemsAfterCollapse<=this.maxItems}updateCollapsedViewMode(){if(this.shouldCollapseItems()){this.assignSlotNamesForCollapsedViewMode()}else{this.assignSlotNamesForNonCollapsedViewMode()}}assignSlotNamesForCollapsedViewMode(){const e=this.getBreadcrumbItems();const s=this.itemsBeforeCollapse-1;const t=e.length-this.itemsAfterCollapse;e.forEach(((a,i)=>{if(i<=s){a.slot="items-before-expand-btn";a.last=false}else if(i>s&&i<t){a.slot="hidden-items";a.last=false}else{a.slot="items-after-expand-btn";a.last=i===e.length-1}}))}assignSlotNamesForNonCollapsedViewMode(){const e=this.getBreadcrumbItems();e.forEach(((s,t)=>{s.slot="non-collapsed";s.last=t===e.length-1}))}handleSlotChange(){this.updateCollapsedViewMode();this.showHiddenItems=false;s(this)}handleOnExpandBtnClick(){this.showHiddenItems=true;requestAnimationFrame((()=>this.setFocusToFirstHiddenItem()))}setFocusToFirstHiddenItem(){const e=this.getBreadcrumbItems();const s=this.itemsBeforeCollapse;const t=e[s];const a=t.shadowRoot.querySelector("slot");const i=a.assignedElements()[0];i===null||i===void 0?void 0:i.focus()}renderExpandAllButton(){const e=this.itemsAfterCollapse===0;return t("div",{role:"listitem",class:"item-not-slotted"},t("wcs-button",{mode:"clear",shape:"square",size:"s",onClick:this.handleOnExpandBtnClick.bind(this),ref:e=>this.expandBtnEl=e},t("wcs-mat-icon",{icon:"more_horiz"})),!e&&t("span",{class:"item-icon","aria-hidden":"true"},d))}render(){const e=this.shouldCollapseItems()&&!this.showHiddenItems;return t(a,{key:"944e877808887ad3933072e35d0760df00e5ab68"},t("nav",Object.assign({key:"210476d38cf668330fa9ce0f6ab009499d6afe8d",class:`wcs-breadcrumb-container${this.showHiddenItems?" show-hidden-items":""}`,"aria-label":l},this.inheritedAttributes,{ref:e=>this.navEl=e}),t("div",{key:"882146b18d16c9fe5033a6677a6a3281696af183",role:"list"},t("slot",{key:"14491fd9df9d3901ae3c5f4473ddf2ebfe36a1fb",onSlotchange:this.handleSlotChange.bind(this)}),t("slot",{key:"b077183b3a4abec4f40cd87974dac248b743fa13",name:"non-collapsed"}),t("slot",{key:"fb3cb5779492c275cb47619766df150da71f4daa",name:"items-before-expand-btn"}),t("slot",{key:"86889f6be0e843b55cc8868df6abd9d7af4cf7d9",name:"hidden-items"}),e&&this.renderExpandAllButton(),t("slot",{key:"b5c680f8c61d7491ab5f180d566b2718d1fd684a",name:"items-after-expand-btn"}))))}get el(){return i(this)}static get watchers(){return{maxItems:["handleCollapsePropsChange"],itemsBeforeCollapse:["handleCollapsePropsChange"],itemsAfterCollapse:["handleCollapsePropsChange"],ariaLabelExpandButton:["handleAriaLabelExpandBtnChange"]}}};f.style=b;export{f as wcs_breadcrumb};
+//# sourceMappingURL=p-16dd21cf.entry.js.map

package/dist/wcs/{p-85a5bbb7.entry.js → p-206c01d5.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,a,h as r,H as s,g as i}from"./p-32e583ea.js";import{p as o,i as c,a as n,w as d,s as l}from"./p-a3aece7a.js";const h=":host{--wcs-textarea-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-textarea-value-color:var(--wcs-semantic-color-text-primary);--wcs-textarea-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-textarea-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-textarea-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-textarea-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-textarea-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-textarea-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-textarea-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-textarea-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-textarea-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-textarea-border-style-default:solid;--wcs-textarea-border-style-error:solid;--wcs-textarea-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-internal-textarea-border-radius-left:var(--wcs-textarea-border-radius-left, var(--wcs-semantic-border-radius-base));--wcs-internal-textarea-border-radius-right:var(--wcs-textarea-border-radius-right, var(--wcs-semantic-border-radius-base));--wcs-textarea-border-width:var(--wcs-semantic-border-width-default);--wcs-textarea-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-textarea-gap:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-top:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-internal-textarea-padding-left:var(--wcs-textarea-padding-left, var(--wcs-semantic-spacing-large));--wcs-internal-textarea-padding-right:var(--wcs-textarea-padding-right, var(--wcs-semantic-spacing-large));--wcs-textarea-min-height:var(--wcs-semantic-size-m);--wcs-internal-textarea-max-height:var(--wcs-textarea-max-height, unset);--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-default);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-textarea-gap);width:100%;border-radius:var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);background-color:var(--wcs-textarea-background-color);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-default);outline-offset:calc(-1 * var(--wcs-textarea-border-width));background-clip:padding-box;box-sizing:border-box}:host textarea{box-sizing:border-box;font-family:inherit;overflow:auto;flex:1;width:100%;min-height:var(--wcs-textarea-min-height);max-height:var(--wcs-internal-textarea-max-height);background-color:transparent;color:var(--wcs-textarea-value-color);font-weight:var(--wcs-textarea-value-font-weight) !important;border:none;padding-top:var(--wcs-textarea-padding-top);padding-bottom:var(--wcs-textarea-padding-bottom);padding-left:var(--wcs-internal-textarea-padding-left);padding-right:var(--wcs-internal-textarea-padding-right);font-size:1rem;line-height:1.5}:host textarea::placeholder{color:var(--wcs-textarea-placeholder-color);opacity:1;font-weight:var(--wcs-textarea-placeholder-font-weight);font-style:var(--wcs-textarea-placeholder-font-style)}:host textarea:focus{box-shadow:none;outline:0}:host wcs-mat-icon{margin-left:var(--wcs-internal-textarea-padding-left);color:var(--wcs-textarea-icon-color-default)}:host([disabled]){--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-disabled);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-disabled)}:host([disabled]) textarea{color:var(--wcs-textarea-text-color-disabled);cursor:not-allowed}:host([disabled]) textarea::placeholder{color:var(--wcs-textarea-text-color-disabled)}:host([disabled]) wcs-mat-icon{color:var(--wcs-textarea-icon-color-disabled)}:host([icon]) textarea{padding-left:0}:host([state=error]){outline-color:var(--wcs-textarea-border-color-error) !important}:host(:focus-within){outline:var(--wcs-textarea-border-style-focus) var(--wcs-textarea-border-width-focus) var(--wcs-textarea-border-color-focus);outline-offset:calc(var(--wcs-textarea-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-textarea-icon-color-focus)}";const w=h;const u=["tabindex","title"];const x=class{constructor(a){t(this,a);this.wcsChange=e(this,"wcsChange",7);this.wcsInput=e(this,"wcsInput",7);this.wcsBlur=e(this,"wcsBlur",7);this.wcsFocus=e(this,"wcsFocus",7);this.inputId=`wcs-textarea-${b++}`;this.inheritedAttributes={};this.onInput=t=>{if(this.nativeInput){this.value=this.nativeInput.value}this.wcsInput.emit(t)};this.onChange=t=>{this.wcsChange.emit({value:this.nativeInput.value})};this.onFocus=t=>{if(this.fireFocusEvents){this.wcsFocus.emit(t)}};this.onBlur=t=>{if(this.fireFocusEvents){this.wcsBlur.emit(t)}};this.fireFocusEvents=true;this.autocapitalize="none";this.autofocus=false;this.debounce=0;this.disabled=false;this.icon=undefined;this.inputmode=undefined;this.enterkeyhint=undefined;this.maxlength=undefined;this.minlength=undefined;this.name=this.inputId;this.placeholder=undefined;this.readonly=false;this.required=false;this.spellcheck=false;this.state="initial";this.cols=undefined;this.rows=undefined;this.wrap=undefined;this.autoGrow=false;this.value="";this.resize=undefined}debounceChanged(){this.wcsInput=o(this.wcsInput,this.debounce)}valueChanged(){const t=this.nativeInput;const e=this.getValue();if(t&&t.value!==e){t.value=e}this.runAutoGrow()}connectedCallback(){this.debounceChanged();{document.dispatchEvent(new CustomEvent("wcsInputDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("wcsInputDidUnload",{detail:this.el}))}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),n(this.el,u))}componentDidLoad(){d((()=>this.runAutoGrow()))}runAutoGrow(){const t=this.nativeInput;if(t&&this.autoGrow){a((()=>{t.style.height="auto";t.style.height=t.scrollHeight+"px"}))}}async setAriaAttribute(t,e){l(this.nativeInput,t,e)}async fitContent(){d((()=>this.runAutoGrow()))}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}getValue(){return this.value||""}render(){const t=this.getValue();const e=Object.assign({},this.resize&&{resize:this.resize});return r(s,{key:"1d7fc40452ef3499c548ead8966d565f69464c7e","aria-disabled":this.disabled?"true":null},this.icon?r("wcs-mat-icon",{icon:this.icon,size:"m"}):null,r("textarea",Object.assign({key:"5d1ee380bf9e0ddd60864210b337de4bb4ec1e80",class:"native-textarea",ref:t=>this.nativeInput=t,autoCapitalize:this.autocapitalize,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,disabled:this.disabled,maxLength:this.maxlength,minLength:this.minlength,name:this.name,placeholder:this.placeholder||"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,cols:this.cols,rows:this.rows,wrap:this.wrap,onInput:this.onInput,onChange:this.onChange,onBlur:this.onBlur,onFocus:this.onFocus,style:e},this.inheritedAttributes),t))}static get delegatesFocus(){return true}get el(){return i(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"]}}};let b=0;x.style=w;export{x as wcs_textarea};
-//# sourceMappingURL=p-85a5bbb7.entry.js.map
+import{r as t,c as e,a,h as r,H as s,g as i}from"./p-32e583ea.js";import{r as o,i as c,a as n,y as d,s as l}from"./p-52d77e1f.js";const h=":host{--wcs-textarea-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-textarea-value-color:var(--wcs-semantic-color-text-primary);--wcs-textarea-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-textarea-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-textarea-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-textarea-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-textarea-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-textarea-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-textarea-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-textarea-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-textarea-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-textarea-border-style-default:solid;--wcs-textarea-border-style-error:solid;--wcs-textarea-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-internal-textarea-border-radius-left:var(--wcs-textarea-border-radius-left, var(--wcs-semantic-border-radius-base));--wcs-internal-textarea-border-radius-right:var(--wcs-textarea-border-radius-right, var(--wcs-semantic-border-radius-base));--wcs-textarea-border-width:var(--wcs-semantic-border-width-default);--wcs-textarea-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-textarea-gap:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-top:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-internal-textarea-padding-left:var(--wcs-textarea-padding-left, var(--wcs-semantic-spacing-large));--wcs-internal-textarea-padding-right:var(--wcs-textarea-padding-right, var(--wcs-semantic-spacing-large));--wcs-textarea-min-height:var(--wcs-semantic-size-m);--wcs-internal-textarea-max-height:var(--wcs-textarea-max-height, unset);--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-default);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-textarea-gap);width:100%;border-radius:var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);background-color:var(--wcs-textarea-background-color);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-default);outline-offset:calc(-1 * var(--wcs-textarea-border-width));background-clip:padding-box;box-sizing:border-box}:host textarea{box-sizing:border-box;font-family:inherit;overflow:auto;flex:1;width:100%;min-height:var(--wcs-textarea-min-height);max-height:var(--wcs-internal-textarea-max-height);background-color:transparent;color:var(--wcs-textarea-value-color);font-weight:var(--wcs-textarea-value-font-weight) !important;border:none;padding-top:var(--wcs-textarea-padding-top);padding-bottom:var(--wcs-textarea-padding-bottom);padding-left:var(--wcs-internal-textarea-padding-left);padding-right:var(--wcs-internal-textarea-padding-right);font-size:1rem;line-height:1.5}:host textarea::placeholder{color:var(--wcs-textarea-placeholder-color);opacity:1;font-weight:var(--wcs-textarea-placeholder-font-weight);font-style:var(--wcs-textarea-placeholder-font-style)}:host textarea:focus{box-shadow:none;outline:0}:host wcs-mat-icon{margin-left:var(--wcs-internal-textarea-padding-left);color:var(--wcs-textarea-icon-color-default)}:host([disabled]){--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-disabled);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-disabled)}:host([disabled]) textarea{color:var(--wcs-textarea-text-color-disabled);cursor:not-allowed}:host([disabled]) textarea::placeholder{color:var(--wcs-textarea-text-color-disabled)}:host([disabled]) wcs-mat-icon{color:var(--wcs-textarea-icon-color-disabled)}:host([icon]) textarea{padding-left:0}:host([state=error]){outline-color:var(--wcs-textarea-border-color-error) !important}:host(:focus-within){outline:var(--wcs-textarea-border-style-focus) var(--wcs-textarea-border-width-focus) var(--wcs-textarea-border-color-focus);outline-offset:calc(var(--wcs-textarea-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-textarea-icon-color-focus)}";const w=h;const u=["tabindex","title"];const x=class{constructor(a){t(this,a);this.wcsChange=e(this,"wcsChange",7);this.wcsInput=e(this,"wcsInput",7);this.wcsBlur=e(this,"wcsBlur",7);this.wcsFocus=e(this,"wcsFocus",7);this.inputId=`wcs-textarea-${b++}`;this.inheritedAttributes={};this.onInput=t=>{if(this.nativeInput){this.value=this.nativeInput.value}this.wcsInput.emit(t)};this.onChange=t=>{this.wcsChange.emit({value:this.nativeInput.value})};this.onFocus=t=>{if(this.fireFocusEvents){this.wcsFocus.emit(t)}};this.onBlur=t=>{if(this.fireFocusEvents){this.wcsBlur.emit(t)}};this.fireFocusEvents=true;this.autocapitalize="none";this.autofocus=false;this.debounce=0;this.disabled=false;this.icon=undefined;this.inputmode=undefined;this.enterkeyhint=undefined;this.maxlength=undefined;this.minlength=undefined;this.name=this.inputId;this.placeholder=undefined;this.readonly=false;this.required=false;this.spellcheck=false;this.state="initial";this.cols=undefined;this.rows=undefined;this.wrap=undefined;this.autoGrow=false;this.value="";this.resize=undefined}debounceChanged(){this.wcsInput=o(this.wcsInput,this.debounce)}valueChanged(){const t=this.nativeInput;const e=this.getValue();if(t&&t.value!==e){t.value=e}this.runAutoGrow()}connectedCallback(){this.debounceChanged();{document.dispatchEvent(new CustomEvent("wcsInputDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("wcsInputDidUnload",{detail:this.el}))}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),n(this.el,u))}componentDidLoad(){d((()=>this.runAutoGrow()))}runAutoGrow(){const t=this.nativeInput;if(t&&this.autoGrow){a((()=>{t.style.height="auto";t.style.height=t.scrollHeight+"px"}))}}async setAriaAttribute(t,e){l(this.nativeInput,t,e)}async fitContent(){d((()=>this.runAutoGrow()))}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}getValue(){return this.value||""}render(){const t=this.getValue();const e=Object.assign({},this.resize&&{resize:this.resize});return r(s,{key:"d2f0cea260f9745f49f4aa259004b704af492c33","aria-disabled":this.disabled?"true":null},this.icon?r("wcs-mat-icon",{icon:this.icon,size:"m"}):null,r("textarea",Object.assign({key:"a5c87bbb2888132fd62f26df0f36e5d4e003ad84",class:"native-textarea",ref:t=>this.nativeInput=t,autoCapitalize:this.autocapitalize,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,disabled:this.disabled,maxLength:this.maxlength,minLength:this.minlength,name:this.name,placeholder:this.placeholder||"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,cols:this.cols,rows:this.rows,wrap:this.wrap,onInput:this.onInput,onChange:this.onChange,onBlur:this.onBlur,onFocus:this.onFocus,style:e},this.inheritedAttributes),t))}static get delegatesFocus(){return true}get el(){return i(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"]}}};let b=0;x.style=w;export{x as wcs_textarea};
+//# sourceMappingURL=p-206c01d5.entry.js.map