wcs-core 7.2.2 → 7.3.0

package/dist/types/components/chip/chip-interface.d.ts

@@ -0,0 +1,4 @@
+import { WcsSize } from '../../shared-types';
+export type WcsChipMode = 'selectable' | 'dismissible';
+export type WcsChipSize = Extract<WcsSize, 's'>;
+export type WcsChipVariant = 'primary' | 'secondary';

package/dist/types/components/chip/chip.d.ts

@@ -0,0 +1,132 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { WcsChipMode, WcsChipVariant } from './chip-interface';
+/**
+ * The chip component is a small, interactive element that can be used to represent an input, filter, or tag.
+ * It can be in one of two modes: 'selectable' or 'dismissible'.
+ * - In 'selectable' mode, the chip can be selected or deselected, and emits an event when clicked.
+ * - In 'dismissible' mode, the chip can be dismissed (removed) by clicking a dismiss icon, and emits an event when the dismiss icon is clicked.
+ *
+ * @cssprop --wcs-chip-height - Height of the chip
+ * @cssprop --wcs-chip-font-size - Font size of the chip text
+ * @cssprop --wcs-chip-font-weight - Font weight of the chip text
+ *
+ * @cssprop --wcs-chip-focus-outline-border-width - Border width of the chip focus outline
+ *
+ * @cssprop --wcs-chip-padding-vertical - Vertical padding (top - bottom) of the chip
+ * @cssprop --wcs-chip-padding-horizontal - Horizontal padding (left - right) of the chip
+ * @cssprop --wcs-chip-padding-horizontal-dismissible - Horizontal padding (left - right) of the chip with 'dismissible' mode
+ *
+ * @cssprop --wcs-chip-selectable-background-color - Background color of the chip with 'selectable' mode in default state
+ * @cssprop --wcs-chip-selectable-background-color-pressed - Background color of the chip with 'selectable' mode when pressed
+ * @cssprop --wcs-chip-selectable-background-color-hover - Background color of the chip with 'selectable' mode when hovered
+ * @cssprop --wcs-chip-selectable-background-color-selected - Background color of the chip with 'selectable' mode when selected
+ * @cssprop --wcs-chip-selectable-background-color-selected-hover - Background color of the chip with 'selectable' mode when selected and hovered
+ * @cssprop --wcs-chip-selectable-background-color-selected-pressed - Background color of the chip with 'selectable' mode when selected and pressed
+ * @cssprop --wcs-chip-selectable-background-color-selected-disabled - Background color of the chip with 'selectable' mode when selected and disabled
+ *
+ * @cssprop --wcs-chip-selectable-color - Text color of the chip with 'selectable' mode in default state
+ * @cssprop --wcs-chip-selectable-color-hover - Text color of the chip with 'selectable' mode when hovered
+ * @cssprop --wcs-chip-selectable-color-pressed - Text color of the chip with 'selectable' mode when pressed
+ * @cssprop --wcs-chip-selectable-color-disabled - Text color of the chip with 'selectable' mode when disabled
+ * @cssprop --wcs-chip-selectable-color-selected - Text color of the chip with 'selectable' mode when selected
+ * @cssprop --wcs-chip-selectable-color-selected-hover - Text color of the chip with 'selectable' mode when selected and hovered
+ * @cssprop --wcs-chip-selectable-color-selected-pressed - Text color of the chip with 'selectable' mode when selected and pressed
+ *
+ * @cssprop --wcs-chip-border-radius - Border radius of the chip
+ * @cssprop --wcs-chip-border-line-width - Border line width of the chip
+ * @cssprop --wcs-chip-selectable-border-color - Border color of the chip with 'selectable' mode in default state
+ * @cssprop --wcs-chip-selectable-border-color-hover - Border color of the chip with 'selectable' mode when hovered
+ * @cssprop --wcs-chip-selectable-border-color-pressed - Border color of the chip with 'selectable' mode when pressed
+ * @cssprop --wcs-chip-selectable-border-color-disabled - Border color of the chip with 'selectable' mode when disabled
+ *
+ * @cssprop --wcs-chip-selectable-content-gap - Gap between content elements in chip with 'selectable' mode
+ * @cssprop --wcs-chip-selectable-focus-outline-color - Focus outline color of the chip with 'selectable' mode
+ *
+ * @cssprop --wcs-chip-dismissible-content-gap - Gap between content elements in chip with 'dismissible' mode
+ * @cssprop --wcs-chip-dismissible-padding-right - Right padding of the chip with 'dismissible' mode
+ * @cssprop --wcs-chip-dismissible-button-outline-radius - Outline radius of the button for the chip with 'dismissible' mode
+ *
+ * @cssprop --wcs-chip-dismissible-primary-focus-outline-color - Focus outline color of the chip with 'dismissible' mode and 'primary' variant
+ * @cssprop --wcs-chip-dismissible-primary-border-color - Border color of the chip with 'dismissible' mode and 'primary' variant
+ * @cssprop --wcs-chip-dismissible-primary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'primary' variant when disabled
+ * @cssprop --wcs-chip-dismissible-primary-color - Text color of the chip with 'dismissible' mode and 'primary' variant
+ * @cssprop --wcs-chip-dismissible-primary-color-hover - Text color of the chip with 'dismissible' mode and 'primary' variant when hovered
+ * @cssprop --wcs-chip-dismissible-primary-color-pressed - Text color of the chip with 'dismissible' mode and 'primary' variant when pressed
+ * @cssprop --wcs-chip-dismissible-primary-color-disabled - Text color of the chip with 'dismissible' mode and 'primary' variant when disabled
+ * @cssprop --wcs-chip-dismissible-primary-background-color - Background color of the chip with 'dismissible' mode and 'primary' variant
+ * @cssprop --wcs-chip-dismissible-primary-background-color-hover - Background color of the chip with 'dismissible' mode and 'primary' variant when hovered
+ * @cssprop --wcs-chip-dismissible-primary-background-color-pressed - Background color of the chip with 'dismissible' mode and 'primary' variant when pressed
+ * @cssprop --wcs-chip-dismissible-primary-background-color-disabled - Background color of the chip with 'dismissible' mode and 'primary' variant when disabled
+ *
+ * @cssprop --wcs-chip-dismissible-secondary-button-focus-outline-color - Button focus outline color of the chip with 'dismissible' mode and 'secondary' variant
+ * @cssprop --wcs-chip-dismissible-secondary-border-color - Border color of the chip with 'dismissible' mode and 'secondary' variant
+ * @cssprop --wcs-chip-dismissible-secondary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+ * @cssprop --wcs-chip-dismissible-secondary-color - Text color of the chip with 'dismissible' mode and 'secondary' variant
+ * @cssprop --wcs-chip-dismissible-secondary-color-disabled - Text color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+ * @cssprop --wcs-chip-dismissible-secondary-background-color - Background color of the chip with 'dismissible' mode and 'secondary' variant
+ * @cssprop --wcs-chip-dismissible-secondary-button-background-color - Button background color of the chip with 'dismissible' mode and 'secondary' variant
+ * @cssprop --wcs-chip-dismissible-secondary-button-background-color-hover - Button background color of the chip with 'dismissible' mode and 'secondary' variant when hovered
+ * @cssprop --wcs-chip-dismissible-secondary-button-background-color-pressed - Button background color of the chip with 'dismissible' mode and 'secondary' variant when pressed
+ * @cssprop --wcs-chip-dismissible-secondary-button-background-color-disabled - Button background color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+ */
+export declare class Chip implements ComponentInterface {
+    el: HTMLWcsChipElement;
+    /**
+     * Unique value representing the chip identifier in events.
+     */
+    value: string;
+    /**
+     * Text label displayed on the chip.
+     */
+    label: string;
+    /**
+     * If `true`, the chip is selected.
+     * This property is only used in 'selectable' mode.
+     */
+    selected: boolean;
+    /**
+     * If `true`, the chip is open.
+     * This property is used to control the visibility of the chip in the dismissible mode.
+     * When the user clicks the dismiss icon, this property automatically becomes `false`, hiding the chip.
+     */
+    open: boolean;
+    /**
+     * If `true`, the chip is disabled.
+     * The chip will not respond to click events and will not emit any events.
+     * This property is used in both 'selectable' and 'dismissible' modes.
+     */
+    disabled: boolean;
+    /**
+     * Defines the visual style of the chip for the dismissible mode.
+     */
+    variant: WcsChipVariant;
+    /**
+     * Defines the mode of the chip.
+     * Can be 'selectable' or 'dismissible'.
+     * - 'selectable': The chip can be selected and emits an event when clicked.
+     * - 'dismissible': The chip can be dismissed (removed) and emits an event when the dismiss icon is clicked.
+     */
+    mode: WcsChipMode;
+    /**
+     * Emitted when the chip is clicked in 'selectable' mode.
+     */
+    wcsChipSelectChange: EventEmitter<{
+        value: string;
+        selected: boolean;
+    }>;
+    /**
+     * Emitted when the dismiss icon is clicked in 'dismissible' mode.
+     */
+    wcsChipDismiss: EventEmitter<{
+        value: string;
+    }>;
+    private select;
+    private dismiss;
+    private focusNextChip;
+    private isActionableChip;
+    private focusChip;
+    private handleClick;
+    private handleDismiss;
+    private handleKeydown;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -12,6 +12,7 @@ import { BadgeColor, BadgeShape, BadgeSize } from "./components/badge/badge-inte
 import { WcsButtonMode, WcsButtonShape, WcsButtonSize, WcsButtonType } from "./components/button/button-interface";
 import { CardMode, CardOrientation } from "./components/card/card-interface";
 import { CheckboxChangeEventDetail, CheckboxLabelAlignment } from "./components/checkbox/checkbox-interface";
+import { WcsChipMode, WcsChipVariant } from "./components/chip/chip-interface";
 import { CategoryOpenedEventDetail, MenuOpenedEventDetail } from "./components/com-nav/com-nav-interface";
 import { CounterChangeEventDetail, WcsCounterSize } from "./components/counter/counter-interface";
 import { WcsDropdownPlacement } from "./components/dropdown/dropdown-interface";
@@ -40,6 +41,7 @@ export { BadgeColor, BadgeShape, BadgeSize } from "./components/badge/badge-inte
 export { WcsButtonMode, WcsButtonShape, WcsButtonSize, WcsButtonType } from "./components/button/button-interface";
 export { CardMode, CardOrientation } from "./components/card/card-interface";
 export { CheckboxChangeEventDetail, CheckboxLabelAlignment } from "./components/checkbox/checkbox-interface";
+export { WcsChipMode, WcsChipVariant } from "./components/chip/chip-interface";
 export { CategoryOpenedEventDetail, MenuOpenedEventDetail } from "./components/com-nav/com-nav-interface";
 export { CounterChangeEventDetail, WcsCounterSize } from "./components/counter/counter-interface";
 export { WcsDropdownPlacement } from "./components/dropdown/dropdown-interface";
@@ -534,8 +536,101 @@ export namespace Components {
          */
         "labelAlignment": CheckboxLabelAlignment;
         "name": string;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
         "setAriaAttribute": (attr: AriaAttributeName, value: string | null | undefined) => Promise<void>;
     }
+    /**
+     * The chip component is a small, interactive element that can be used to represent an input, filter, or tag.
+     * It can be in one of two modes: 'selectable' or 'dismissible'.
+     * - In 'selectable' mode, the chip can be selected or deselected, and emits an event when clicked.
+     * - In 'dismissible' mode, the chip can be dismissed (removed) by clicking a dismiss icon, and emits an event when the dismiss icon is clicked.
+     * @cssprop --wcs-chip-height - Height of the chip
+     * @cssprop --wcs-chip-font-size - Font size of the chip text
+     * @cssprop --wcs-chip-font-weight - Font weight of the chip text
+     * @cssprop --wcs-chip-focus-outline-border-width - Border width of the chip focus outline
+     * @cssprop --wcs-chip-padding-vertical - Vertical padding (top - bottom) of the chip
+     * @cssprop --wcs-chip-padding-horizontal - Horizontal padding (left - right) of the chip
+     * @cssprop --wcs-chip-padding-horizontal-dismissible - Horizontal padding (left - right) of the chip with 'dismissible' mode
+     * @cssprop --wcs-chip-selectable-background-color - Background color of the chip with 'selectable' mode in default state
+     * @cssprop --wcs-chip-selectable-background-color-pressed - Background color of the chip with 'selectable' mode when pressed
+     * @cssprop --wcs-chip-selectable-background-color-hover - Background color of the chip with 'selectable' mode when hovered
+     * @cssprop --wcs-chip-selectable-background-color-selected - Background color of the chip with 'selectable' mode when selected
+     * @cssprop --wcs-chip-selectable-background-color-selected-hover - Background color of the chip with 'selectable' mode when selected and hovered
+     * @cssprop --wcs-chip-selectable-background-color-selected-pressed - Background color of the chip with 'selectable' mode when selected and pressed
+     * @cssprop --wcs-chip-selectable-background-color-selected-disabled - Background color of the chip with 'selectable' mode when selected and disabled
+     * @cssprop --wcs-chip-selectable-color - Text color of the chip with 'selectable' mode in default state
+     * @cssprop --wcs-chip-selectable-color-hover - Text color of the chip with 'selectable' mode when hovered
+     * @cssprop --wcs-chip-selectable-color-pressed - Text color of the chip with 'selectable' mode when pressed
+     * @cssprop --wcs-chip-selectable-color-disabled - Text color of the chip with 'selectable' mode when disabled
+     * @cssprop --wcs-chip-selectable-color-selected - Text color of the chip with 'selectable' mode when selected
+     * @cssprop --wcs-chip-selectable-color-selected-hover - Text color of the chip with 'selectable' mode when selected and hovered
+     * @cssprop --wcs-chip-selectable-color-selected-pressed - Text color of the chip with 'selectable' mode when selected and pressed
+     * @cssprop --wcs-chip-border-radius - Border radius of the chip
+     * @cssprop --wcs-chip-border-line-width - Border line width of the chip
+     * @cssprop --wcs-chip-selectable-border-color - Border color of the chip with 'selectable' mode in default state
+     * @cssprop --wcs-chip-selectable-border-color-hover - Border color of the chip with 'selectable' mode when hovered
+     * @cssprop --wcs-chip-selectable-border-color-pressed - Border color of the chip with 'selectable' mode when pressed
+     * @cssprop --wcs-chip-selectable-border-color-disabled - Border color of the chip with 'selectable' mode when disabled
+     * @cssprop --wcs-chip-selectable-content-gap - Gap between content elements in chip with 'selectable' mode
+     * @cssprop --wcs-chip-selectable-focus-outline-color - Focus outline color of the chip with 'selectable' mode
+     * @cssprop --wcs-chip-dismissible-content-gap - Gap between content elements in chip with 'dismissible' mode
+     * @cssprop --wcs-chip-dismissible-padding-right - Right padding of the chip with 'dismissible' mode
+     * @cssprop --wcs-chip-dismissible-button-outline-radius - Outline radius of the button for the chip with 'dismissible' mode
+     * @cssprop --wcs-chip-dismissible-primary-focus-outline-color - Focus outline color of the chip with 'dismissible' mode and 'primary' variant
+     * @cssprop --wcs-chip-dismissible-primary-border-color - Border color of the chip with 'dismissible' mode and 'primary' variant
+     * @cssprop --wcs-chip-dismissible-primary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'primary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-primary-color - Text color of the chip with 'dismissible' mode and 'primary' variant
+     * @cssprop --wcs-chip-dismissible-primary-color-hover - Text color of the chip with 'dismissible' mode and 'primary' variant when hovered
+     * @cssprop --wcs-chip-dismissible-primary-color-pressed - Text color of the chip with 'dismissible' mode and 'primary' variant when pressed
+     * @cssprop --wcs-chip-dismissible-primary-color-disabled - Text color of the chip with 'dismissible' mode and 'primary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-primary-background-color - Background color of the chip with 'dismissible' mode and 'primary' variant
+     * @cssprop --wcs-chip-dismissible-primary-background-color-hover - Background color of the chip with 'dismissible' mode and 'primary' variant when hovered
+     * @cssprop --wcs-chip-dismissible-primary-background-color-pressed - Background color of the chip with 'dismissible' mode and 'primary' variant when pressed
+     * @cssprop --wcs-chip-dismissible-primary-background-color-disabled - Background color of the chip with 'dismissible' mode and 'primary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-secondary-button-focus-outline-color - Button focus outline color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-border-color - Border color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-secondary-color - Text color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-color-disabled - Text color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-secondary-background-color - Background color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-button-background-color - Button background color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-button-background-color-hover - Button background color of the chip with 'dismissible' mode and 'secondary' variant when hovered
+     * @cssprop --wcs-chip-dismissible-secondary-button-background-color-pressed - Button background color of the chip with 'dismissible' mode and 'secondary' variant when pressed
+     * @cssprop --wcs-chip-dismissible-secondary-button-background-color-disabled - Button background color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+     */
+    interface WcsChip {
+        /**
+          * If `true`, the chip is disabled. The chip will not respond to click events and will not emit any events. This property is used in both 'selectable' and 'dismissible' modes.
+         */
+        "disabled": boolean;
+        /**
+          * Text label displayed on the chip.
+         */
+        "label": string;
+        /**
+          * Defines the mode of the chip. Can be 'selectable' or 'dismissible'. - 'selectable': The chip can be selected and emits an event when clicked. - 'dismissible': The chip can be dismissed (removed) and emits an event when the dismiss icon is clicked.
+         */
+        "mode": WcsChipMode;
+        /**
+          * If `true`, the chip is open. This property is used to control the visibility of the chip in the dismissible mode. When the user clicks the dismiss icon, this property automatically becomes `false`, hiding the chip.
+         */
+        "open": boolean;
+        /**
+          * If `true`, the chip is selected. This property is only used in 'selectable' mode.
+         */
+        "selected": boolean;
+        /**
+          * Unique value representing the chip identifier in events.
+         */
+        "value": string;
+        /**
+          * Defines the visual style of the chip for the dismissible mode.
+         */
+        "variant": WcsChipVariant;
+    }
     /**
      * *Part of communication design system*
      * The com-nav component is a container for navigation links to external or internal pages of the website.
@@ -2484,6 +2579,10 @@ export interface WcsCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLWcsCheckboxElement;
 }
+export interface WcsChipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLWcsChipElement;
+}
 export interface WcsComNavCategoryCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLWcsComNavCategoryElement;
@@ -2991,6 +3090,83 @@ declare global {
         prototype: HTMLWcsCheckboxElement;
         new (): HTMLWcsCheckboxElement;
     };
+    interface HTMLWcsChipElementEventMap {
+        "wcsChipSelectChange": { value: string; selected: boolean };
+        "wcsChipDismiss": { value: string };
+    }
+    /**
+     * The chip component is a small, interactive element that can be used to represent an input, filter, or tag.
+     * It can be in one of two modes: 'selectable' or 'dismissible'.
+     * - In 'selectable' mode, the chip can be selected or deselected, and emits an event when clicked.
+     * - In 'dismissible' mode, the chip can be dismissed (removed) by clicking a dismiss icon, and emits an event when the dismiss icon is clicked.
+     * @cssprop --wcs-chip-height - Height of the chip
+     * @cssprop --wcs-chip-font-size - Font size of the chip text
+     * @cssprop --wcs-chip-font-weight - Font weight of the chip text
+     * @cssprop --wcs-chip-focus-outline-border-width - Border width of the chip focus outline
+     * @cssprop --wcs-chip-padding-vertical - Vertical padding (top - bottom) of the chip
+     * @cssprop --wcs-chip-padding-horizontal - Horizontal padding (left - right) of the chip
+     * @cssprop --wcs-chip-padding-horizontal-dismissible - Horizontal padding (left - right) of the chip with 'dismissible' mode
+     * @cssprop --wcs-chip-selectable-background-color - Background color of the chip with 'selectable' mode in default state
+     * @cssprop --wcs-chip-selectable-background-color-pressed - Background color of the chip with 'selectable' mode when pressed
+     * @cssprop --wcs-chip-selectable-background-color-hover - Background color of the chip with 'selectable' mode when hovered
+     * @cssprop --wcs-chip-selectable-background-color-selected - Background color of the chip with 'selectable' mode when selected
+     * @cssprop --wcs-chip-selectable-background-color-selected-hover - Background color of the chip with 'selectable' mode when selected and hovered
+     * @cssprop --wcs-chip-selectable-background-color-selected-pressed - Background color of the chip with 'selectable' mode when selected and pressed
+     * @cssprop --wcs-chip-selectable-background-color-selected-disabled - Background color of the chip with 'selectable' mode when selected and disabled
+     * @cssprop --wcs-chip-selectable-color - Text color of the chip with 'selectable' mode in default state
+     * @cssprop --wcs-chip-selectable-color-hover - Text color of the chip with 'selectable' mode when hovered
+     * @cssprop --wcs-chip-selectable-color-pressed - Text color of the chip with 'selectable' mode when pressed
+     * @cssprop --wcs-chip-selectable-color-disabled - Text color of the chip with 'selectable' mode when disabled
+     * @cssprop --wcs-chip-selectable-color-selected - Text color of the chip with 'selectable' mode when selected
+     * @cssprop --wcs-chip-selectable-color-selected-hover - Text color of the chip with 'selectable' mode when selected and hovered
+     * @cssprop --wcs-chip-selectable-color-selected-pressed - Text color of the chip with 'selectable' mode when selected and pressed
+     * @cssprop --wcs-chip-border-radius - Border radius of the chip
+     * @cssprop --wcs-chip-border-line-width - Border line width of the chip
+     * @cssprop --wcs-chip-selectable-border-color - Border color of the chip with 'selectable' mode in default state
+     * @cssprop --wcs-chip-selectable-border-color-hover - Border color of the chip with 'selectable' mode when hovered
+     * @cssprop --wcs-chip-selectable-border-color-pressed - Border color of the chip with 'selectable' mode when pressed
+     * @cssprop --wcs-chip-selectable-border-color-disabled - Border color of the chip with 'selectable' mode when disabled
+     * @cssprop --wcs-chip-selectable-content-gap - Gap between content elements in chip with 'selectable' mode
+     * @cssprop --wcs-chip-selectable-focus-outline-color - Focus outline color of the chip with 'selectable' mode
+     * @cssprop --wcs-chip-dismissible-content-gap - Gap between content elements in chip with 'dismissible' mode
+     * @cssprop --wcs-chip-dismissible-padding-right - Right padding of the chip with 'dismissible' mode
+     * @cssprop --wcs-chip-dismissible-button-outline-radius - Outline radius of the button for the chip with 'dismissible' mode
+     * @cssprop --wcs-chip-dismissible-primary-focus-outline-color - Focus outline color of the chip with 'dismissible' mode and 'primary' variant
+     * @cssprop --wcs-chip-dismissible-primary-border-color - Border color of the chip with 'dismissible' mode and 'primary' variant
+     * @cssprop --wcs-chip-dismissible-primary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'primary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-primary-color - Text color of the chip with 'dismissible' mode and 'primary' variant
+     * @cssprop --wcs-chip-dismissible-primary-color-hover - Text color of the chip with 'dismissible' mode and 'primary' variant when hovered
+     * @cssprop --wcs-chip-dismissible-primary-color-pressed - Text color of the chip with 'dismissible' mode and 'primary' variant when pressed
+     * @cssprop --wcs-chip-dismissible-primary-color-disabled - Text color of the chip with 'dismissible' mode and 'primary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-primary-background-color - Background color of the chip with 'dismissible' mode and 'primary' variant
+     * @cssprop --wcs-chip-dismissible-primary-background-color-hover - Background color of the chip with 'dismissible' mode and 'primary' variant when hovered
+     * @cssprop --wcs-chip-dismissible-primary-background-color-pressed - Background color of the chip with 'dismissible' mode and 'primary' variant when pressed
+     * @cssprop --wcs-chip-dismissible-primary-background-color-disabled - Background color of the chip with 'dismissible' mode and 'primary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-secondary-button-focus-outline-color - Button focus outline color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-border-color - Border color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-secondary-color - Text color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-color-disabled - Text color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-secondary-background-color - Background color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-button-background-color - Button background color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-button-background-color-hover - Button background color of the chip with 'dismissible' mode and 'secondary' variant when hovered
+     * @cssprop --wcs-chip-dismissible-secondary-button-background-color-pressed - Button background color of the chip with 'dismissible' mode and 'secondary' variant when pressed
+     * @cssprop --wcs-chip-dismissible-secondary-button-background-color-disabled - Button background color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+     */
+    interface HTMLWcsChipElement extends Components.WcsChip, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLWcsChipElementEventMap>(type: K, listener: (this: HTMLWcsChipElement, ev: WcsChipCustomEvent<HTMLWcsChipElementEventMap[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 HTMLWcsChipElementEventMap>(type: K, listener: (this: HTMLWcsChipElement, ev: WcsChipCustomEvent<HTMLWcsChipElementEventMap[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 HTMLWcsChipElement: {
+        prototype: HTMLWcsChipElement;
+        new (): HTMLWcsChipElement;
+    };
     /**
      * *Part of communication design system*
      * The com-nav component is a container for navigation links to external or internal pages of the website.
@@ -4536,6 +4712,7 @@ declare global {
         "wcs-card-header": HTMLWcsCardHeaderElement;
         "wcs-card-media": HTMLWcsCardMediaElement;
         "wcs-checkbox": HTMLWcsCheckboxElement;
+        "wcs-chip": HTMLWcsChipElement;
         "wcs-com-nav": HTMLWcsComNavElement;
         "wcs-com-nav-category": HTMLWcsComNavCategoryElement;
         "wcs-com-nav-item": HTMLWcsComNavItemElement;
@@ -4662,6 +4839,9 @@ declare namespace LocalJSX {
           * Specifies whether the component should highlight when open with primary color. if true, the background color will be the primary color. if false, the background color will be wcs-light.
          */
         "highlight"?: boolean;
+        /**
+          * Emitted when the open property changes.   Note that this event is stopped from propagating when using the component inside a wcs-accordion as the  accordion handles the open state of its accordion-panel children.
+         */
         "onWcsOpenChange"?: (event: WcsAccordionPanelCustomEvent<boolean>) => void;
         "open"?: boolean;
     }
@@ -5059,6 +5239,107 @@ declare namespace LocalJSX {
           * Emitted when the checkbox has focus.
          */
         "onWcsFocus"?: (event: WcsCheckboxCustomEvent<FocusEvent>) => void;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
+    }
+    /**
+     * The chip component is a small, interactive element that can be used to represent an input, filter, or tag.
+     * It can be in one of two modes: 'selectable' or 'dismissible'.
+     * - In 'selectable' mode, the chip can be selected or deselected, and emits an event when clicked.
+     * - In 'dismissible' mode, the chip can be dismissed (removed) by clicking a dismiss icon, and emits an event when the dismiss icon is clicked.
+     * @cssprop --wcs-chip-height - Height of the chip
+     * @cssprop --wcs-chip-font-size - Font size of the chip text
+     * @cssprop --wcs-chip-font-weight - Font weight of the chip text
+     * @cssprop --wcs-chip-focus-outline-border-width - Border width of the chip focus outline
+     * @cssprop --wcs-chip-padding-vertical - Vertical padding (top - bottom) of the chip
+     * @cssprop --wcs-chip-padding-horizontal - Horizontal padding (left - right) of the chip
+     * @cssprop --wcs-chip-padding-horizontal-dismissible - Horizontal padding (left - right) of the chip with 'dismissible' mode
+     * @cssprop --wcs-chip-selectable-background-color - Background color of the chip with 'selectable' mode in default state
+     * @cssprop --wcs-chip-selectable-background-color-pressed - Background color of the chip with 'selectable' mode when pressed
+     * @cssprop --wcs-chip-selectable-background-color-hover - Background color of the chip with 'selectable' mode when hovered
+     * @cssprop --wcs-chip-selectable-background-color-selected - Background color of the chip with 'selectable' mode when selected
+     * @cssprop --wcs-chip-selectable-background-color-selected-hover - Background color of the chip with 'selectable' mode when selected and hovered
+     * @cssprop --wcs-chip-selectable-background-color-selected-pressed - Background color of the chip with 'selectable' mode when selected and pressed
+     * @cssprop --wcs-chip-selectable-background-color-selected-disabled - Background color of the chip with 'selectable' mode when selected and disabled
+     * @cssprop --wcs-chip-selectable-color - Text color of the chip with 'selectable' mode in default state
+     * @cssprop --wcs-chip-selectable-color-hover - Text color of the chip with 'selectable' mode when hovered
+     * @cssprop --wcs-chip-selectable-color-pressed - Text color of the chip with 'selectable' mode when pressed
+     * @cssprop --wcs-chip-selectable-color-disabled - Text color of the chip with 'selectable' mode when disabled
+     * @cssprop --wcs-chip-selectable-color-selected - Text color of the chip with 'selectable' mode when selected
+     * @cssprop --wcs-chip-selectable-color-selected-hover - Text color of the chip with 'selectable' mode when selected and hovered
+     * @cssprop --wcs-chip-selectable-color-selected-pressed - Text color of the chip with 'selectable' mode when selected and pressed
+     * @cssprop --wcs-chip-border-radius - Border radius of the chip
+     * @cssprop --wcs-chip-border-line-width - Border line width of the chip
+     * @cssprop --wcs-chip-selectable-border-color - Border color of the chip with 'selectable' mode in default state
+     * @cssprop --wcs-chip-selectable-border-color-hover - Border color of the chip with 'selectable' mode when hovered
+     * @cssprop --wcs-chip-selectable-border-color-pressed - Border color of the chip with 'selectable' mode when pressed
+     * @cssprop --wcs-chip-selectable-border-color-disabled - Border color of the chip with 'selectable' mode when disabled
+     * @cssprop --wcs-chip-selectable-content-gap - Gap between content elements in chip with 'selectable' mode
+     * @cssprop --wcs-chip-selectable-focus-outline-color - Focus outline color of the chip with 'selectable' mode
+     * @cssprop --wcs-chip-dismissible-content-gap - Gap between content elements in chip with 'dismissible' mode
+     * @cssprop --wcs-chip-dismissible-padding-right - Right padding of the chip with 'dismissible' mode
+     * @cssprop --wcs-chip-dismissible-button-outline-radius - Outline radius of the button for the chip with 'dismissible' mode
+     * @cssprop --wcs-chip-dismissible-primary-focus-outline-color - Focus outline color of the chip with 'dismissible' mode and 'primary' variant
+     * @cssprop --wcs-chip-dismissible-primary-border-color - Border color of the chip with 'dismissible' mode and 'primary' variant
+     * @cssprop --wcs-chip-dismissible-primary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'primary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-primary-color - Text color of the chip with 'dismissible' mode and 'primary' variant
+     * @cssprop --wcs-chip-dismissible-primary-color-hover - Text color of the chip with 'dismissible' mode and 'primary' variant when hovered
+     * @cssprop --wcs-chip-dismissible-primary-color-pressed - Text color of the chip with 'dismissible' mode and 'primary' variant when pressed
+     * @cssprop --wcs-chip-dismissible-primary-color-disabled - Text color of the chip with 'dismissible' mode and 'primary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-primary-background-color - Background color of the chip with 'dismissible' mode and 'primary' variant
+     * @cssprop --wcs-chip-dismissible-primary-background-color-hover - Background color of the chip with 'dismissible' mode and 'primary' variant when hovered
+     * @cssprop --wcs-chip-dismissible-primary-background-color-pressed - Background color of the chip with 'dismissible' mode and 'primary' variant when pressed
+     * @cssprop --wcs-chip-dismissible-primary-background-color-disabled - Background color of the chip with 'dismissible' mode and 'primary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-secondary-button-focus-outline-color - Button focus outline color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-border-color - Border color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-secondary-color - Text color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-color-disabled - Text color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+     * @cssprop --wcs-chip-dismissible-secondary-background-color - Background color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-button-background-color - Button background color of the chip with 'dismissible' mode and 'secondary' variant
+     * @cssprop --wcs-chip-dismissible-secondary-button-background-color-hover - Button background color of the chip with 'dismissible' mode and 'secondary' variant when hovered
+     * @cssprop --wcs-chip-dismissible-secondary-button-background-color-pressed - Button background color of the chip with 'dismissible' mode and 'secondary' variant when pressed
+     * @cssprop --wcs-chip-dismissible-secondary-button-background-color-disabled - Button background color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+     */
+    interface WcsChip {
+        /**
+          * If `true`, the chip is disabled. The chip will not respond to click events and will not emit any events. This property is used in both 'selectable' and 'dismissible' modes.
+         */
+        "disabled"?: boolean;
+        /**
+          * Text label displayed on the chip.
+         */
+        "label"?: string;
+        /**
+          * Defines the mode of the chip. Can be 'selectable' or 'dismissible'. - 'selectable': The chip can be selected and emits an event when clicked. - 'dismissible': The chip can be dismissed (removed) and emits an event when the dismiss icon is clicked.
+         */
+        "mode"?: WcsChipMode;
+        /**
+          * Emitted when the dismiss icon is clicked in 'dismissible' mode.
+         */
+        "onWcsChipDismiss"?: (event: WcsChipCustomEvent<{ value: string }>) => void;
+        /**
+          * Emitted when the chip is clicked in 'selectable' mode.
+         */
+        "onWcsChipSelectChange"?: (event: WcsChipCustomEvent<{ value: string; selected: boolean }>) => void;
+        /**
+          * If `true`, the chip is open. This property is used to control the visibility of the chip in the dismissible mode. When the user clicks the dismiss icon, this property automatically becomes `false`, hiding the chip.
+         */
+        "open"?: boolean;
+        /**
+          * If `true`, the chip is selected. This property is only used in 'selectable' mode.
+         */
+        "selected"?: boolean;
+        /**
+          * Unique value representing the chip identifier in events.
+         */
+        "value"?: string;
+        /**
+          * Defines the visual style of the chip for the dismissible mode.
+         */
+        "variant"?: WcsChipVariant;
     }
     /**
      * *Part of communication design system*
@@ -7025,6 +7306,7 @@ declare namespace LocalJSX {
         "wcs-card-header": WcsCardHeader;
         "wcs-card-media": WcsCardMedia;
         "wcs-checkbox": WcsCheckbox;
+        "wcs-chip": WcsChip;
         "wcs-com-nav": WcsComNav;
         "wcs-com-nav-category": WcsComNavCategory;
         "wcs-com-nav-item": WcsComNavItem;
@@ -7379,6 +7661,66 @@ declare module "@stencil/core" {
              * @cssprop --wcs-checkbox-transition-duration - Duration of the transition
              */
             "wcs-checkbox": LocalJSX.WcsCheckbox & JSXBase.HTMLAttributes<HTMLWcsCheckboxElement>;
+            /**
+             * The chip component is a small, interactive element that can be used to represent an input, filter, or tag.
+             * It can be in one of two modes: 'selectable' or 'dismissible'.
+             * - In 'selectable' mode, the chip can be selected or deselected, and emits an event when clicked.
+             * - In 'dismissible' mode, the chip can be dismissed (removed) by clicking a dismiss icon, and emits an event when the dismiss icon is clicked.
+             * @cssprop --wcs-chip-height - Height of the chip
+             * @cssprop --wcs-chip-font-size - Font size of the chip text
+             * @cssprop --wcs-chip-font-weight - Font weight of the chip text
+             * @cssprop --wcs-chip-focus-outline-border-width - Border width of the chip focus outline
+             * @cssprop --wcs-chip-padding-vertical - Vertical padding (top - bottom) of the chip
+             * @cssprop --wcs-chip-padding-horizontal - Horizontal padding (left - right) of the chip
+             * @cssprop --wcs-chip-padding-horizontal-dismissible - Horizontal padding (left - right) of the chip with 'dismissible' mode
+             * @cssprop --wcs-chip-selectable-background-color - Background color of the chip with 'selectable' mode in default state
+             * @cssprop --wcs-chip-selectable-background-color-pressed - Background color of the chip with 'selectable' mode when pressed
+             * @cssprop --wcs-chip-selectable-background-color-hover - Background color of the chip with 'selectable' mode when hovered
+             * @cssprop --wcs-chip-selectable-background-color-selected - Background color of the chip with 'selectable' mode when selected
+             * @cssprop --wcs-chip-selectable-background-color-selected-hover - Background color of the chip with 'selectable' mode when selected and hovered
+             * @cssprop --wcs-chip-selectable-background-color-selected-pressed - Background color of the chip with 'selectable' mode when selected and pressed
+             * @cssprop --wcs-chip-selectable-background-color-selected-disabled - Background color of the chip with 'selectable' mode when selected and disabled
+             * @cssprop --wcs-chip-selectable-color - Text color of the chip with 'selectable' mode in default state
+             * @cssprop --wcs-chip-selectable-color-hover - Text color of the chip with 'selectable' mode when hovered
+             * @cssprop --wcs-chip-selectable-color-pressed - Text color of the chip with 'selectable' mode when pressed
+             * @cssprop --wcs-chip-selectable-color-disabled - Text color of the chip with 'selectable' mode when disabled
+             * @cssprop --wcs-chip-selectable-color-selected - Text color of the chip with 'selectable' mode when selected
+             * @cssprop --wcs-chip-selectable-color-selected-hover - Text color of the chip with 'selectable' mode when selected and hovered
+             * @cssprop --wcs-chip-selectable-color-selected-pressed - Text color of the chip with 'selectable' mode when selected and pressed
+             * @cssprop --wcs-chip-border-radius - Border radius of the chip
+             * @cssprop --wcs-chip-border-line-width - Border line width of the chip
+             * @cssprop --wcs-chip-selectable-border-color - Border color of the chip with 'selectable' mode in default state
+             * @cssprop --wcs-chip-selectable-border-color-hover - Border color of the chip with 'selectable' mode when hovered
+             * @cssprop --wcs-chip-selectable-border-color-pressed - Border color of the chip with 'selectable' mode when pressed
+             * @cssprop --wcs-chip-selectable-border-color-disabled - Border color of the chip with 'selectable' mode when disabled
+             * @cssprop --wcs-chip-selectable-content-gap - Gap between content elements in chip with 'selectable' mode
+             * @cssprop --wcs-chip-selectable-focus-outline-color - Focus outline color of the chip with 'selectable' mode
+             * @cssprop --wcs-chip-dismissible-content-gap - Gap between content elements in chip with 'dismissible' mode
+             * @cssprop --wcs-chip-dismissible-padding-right - Right padding of the chip with 'dismissible' mode
+             * @cssprop --wcs-chip-dismissible-button-outline-radius - Outline radius of the button for the chip with 'dismissible' mode
+             * @cssprop --wcs-chip-dismissible-primary-focus-outline-color - Focus outline color of the chip with 'dismissible' mode and 'primary' variant
+             * @cssprop --wcs-chip-dismissible-primary-border-color - Border color of the chip with 'dismissible' mode and 'primary' variant
+             * @cssprop --wcs-chip-dismissible-primary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'primary' variant when disabled
+             * @cssprop --wcs-chip-dismissible-primary-color - Text color of the chip with 'dismissible' mode and 'primary' variant
+             * @cssprop --wcs-chip-dismissible-primary-color-hover - Text color of the chip with 'dismissible' mode and 'primary' variant when hovered
+             * @cssprop --wcs-chip-dismissible-primary-color-pressed - Text color of the chip with 'dismissible' mode and 'primary' variant when pressed
+             * @cssprop --wcs-chip-dismissible-primary-color-disabled - Text color of the chip with 'dismissible' mode and 'primary' variant when disabled
+             * @cssprop --wcs-chip-dismissible-primary-background-color - Background color of the chip with 'dismissible' mode and 'primary' variant
+             * @cssprop --wcs-chip-dismissible-primary-background-color-hover - Background color of the chip with 'dismissible' mode and 'primary' variant when hovered
+             * @cssprop --wcs-chip-dismissible-primary-background-color-pressed - Background color of the chip with 'dismissible' mode and 'primary' variant when pressed
+             * @cssprop --wcs-chip-dismissible-primary-background-color-disabled - Background color of the chip with 'dismissible' mode and 'primary' variant when disabled
+             * @cssprop --wcs-chip-dismissible-secondary-button-focus-outline-color - Button focus outline color of the chip with 'dismissible' mode and 'secondary' variant
+             * @cssprop --wcs-chip-dismissible-secondary-border-color - Border color of the chip with 'dismissible' mode and 'secondary' variant
+             * @cssprop --wcs-chip-dismissible-secondary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+             * @cssprop --wcs-chip-dismissible-secondary-color - Text color of the chip with 'dismissible' mode and 'secondary' variant
+             * @cssprop --wcs-chip-dismissible-secondary-color-disabled - Text color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+             * @cssprop --wcs-chip-dismissible-secondary-background-color - Background color of the chip with 'dismissible' mode and 'secondary' variant
+             * @cssprop --wcs-chip-dismissible-secondary-button-background-color - Button background color of the chip with 'dismissible' mode and 'secondary' variant
+             * @cssprop --wcs-chip-dismissible-secondary-button-background-color-hover - Button background color of the chip with 'dismissible' mode and 'secondary' variant when hovered
+             * @cssprop --wcs-chip-dismissible-secondary-button-background-color-pressed - Button background color of the chip with 'dismissible' mode and 'secondary' variant when pressed
+             * @cssprop --wcs-chip-dismissible-secondary-button-background-color-disabled - Button background color of the chip with 'dismissible' mode and 'secondary' variant when disabled
+             */
+            "wcs-chip": LocalJSX.WcsChip & JSXBase.HTMLAttributes<HTMLWcsChipElement>;
             /**
              * *Part of communication design system*
              * The com-nav component is a container for navigation links to external or internal pages of the website.

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

@@ -5,3 +5,10 @@ export declare const wcsFocusableElements: string[];
  */
 export declare function isWcsFocusableElement(element: any): boolean;
 export declare function isFocusable(element: any): boolean;
+/**
+ * Finds the next focusable element after the given startElement.
+ * It checks the next siblings of the startElement and returns the first focusable element found.
+ * If no focusable element is found, it returns null.
+ * @param startElement The element from which to start searching for the next focusable element.
+ */
+export declare function findNextFocusableElement(startElement: HTMLElement): HTMLElement | null;

package/dist/wcs/p-828b45b4.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as s,g as i}from"./p-32e583ea.js";const a=":host{--wcs-accordion-gap:var(--wcs-semantic-spacing-base);display:flex;flex-direction:column;gap:var(--wcs-accordion-gap)}";const c=a;const n=class{constructor(e){t(this,e);this.accordionPanels=[];this.hideActionText=true;this.highlight=false;this.groupContentWithHeader=false}componentWillLoad(){this.accordionPanels=this.getAllAccordionPanelsFromHostElement();this.updateHideActiontextOnPanel();this.updateHighlightOnPanel();this.updateGroupContentWithHeader()}wcsOpenChangeHandler(t){t.stopImmediatePropagation();if(t.detail){this.closeAllAccordionsExcept(t.target)}}updateHideActiontextOnPanel(){this.accordionPanels.forEach((t=>{t.hideActionText=this.hideActionText}))}updateHighlightOnPanel(){this.accordionPanels.forEach((t=>{t.highlight=this.highlight}))}updateGroupContentWithHeader(){this.accordionPanels.forEach((t=>{t.groupContentWithHeader=this.groupContentWithHeader}))}render(){return e(s,{key:"0f1933aeff3cc2d73e6fc5051bac74656e418a02"},e("slot",{key:"effc61fd6ac1edcb598d9bc4053363030a1fc2e9"}))}getAllAccordionPanelsFromHostElement(){return Array.from(this.el.children).filter((t=>t.tagName==="WCS-ACCORDION-PANEL"))}closeAllAccordionsExcept(t){this.accordionPanels.filter((e=>e!==t)).forEach((t=>t.close()))}get el(){return i(this)}static get watchers(){return{hideActionText:["updateHideActiontextOnPanel"],highlight:["updateHighlightOnPanel"],groupContentWithHeader:["updateGroupContentWithHeader"]}}};n.style=c;export{n as wcs_accordion};
+//# sourceMappingURL=p-828b45b4.entry.js.map

package/dist/wcs/p-828b45b4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["accordionCss","WcsAccordionStyle0","Accordion","this","accordionPanels","componentWillLoad","getAllAccordionPanelsFromHostElement","updateHideActiontextOnPanel","updateHighlightOnPanel","updateGroupContentWithHeader","wcsOpenChangeHandler","event","stopImmediatePropagation","detail","closeAllAccordionsExcept","target","forEach","opt","hideActionText","highlight","groupContentWithHeader","render","h","Host","key","Array","from","el","children","filter","tagName","eventTarget","a","close"],"sources":["src/components/accordion/accordion.scss?tag=wcs-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":[":host {\n    --wcs-accordion-gap: var(--wcs-semantic-spacing-base);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-accordion-gap);\n}\n","import { Component, Element, h, Host, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * The accordion component is a vertical stack of interactive headings used to toggle the display of further information.\n * \n * @cssprop --wcs-accordion-gap - Gap between accordion panels\n */\n@Component({\n    tag: 'wcs-accordion',\n    styleUrl: 'accordion.scss',\n    shadow: true\n})\nexport class Accordion {\n    @Element() private el!: HTMLWcsAccordionElement;\n    private accordionPanels: HTMLWcsAccordionPanelElement[] = [];\n\n    /**\n     * Specifies whether accordion-panel components should display the open/close text.\n     * if false, it won't show the open/close text in all accordion-panel.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = true;\n\n    /**\n     * Specifies whether accordion-panel components should highlight when open with primary color.\n     * if true, the background color of the accordion-panel will be the primary color.\n     * if false, the background color of the accordion-panel will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * @deprecated **The content is now always grouped with the panel header**\n     * \n     * ~~Specifies whether accordion-panel components should group the content with header in one card~~\n     * ~~if true, there will be only one card with the header and the content~~\n     * ~~Nothing change when the panel is close~~\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.accordionPanels = this.getAllAccordionPanelsFromHostElement();\n\n        this.updateHideActiontextOnPanel();\n        this.updateHighlightOnPanel();\n        this.updateGroupContentWithHeader();\n    }\n\n    @Listen('wcsOpenChange')\n    wcsOpenChangeHandler(event: CustomEvent<boolean>) {\n        event.stopImmediatePropagation();\n        if (event.detail) {\n            this.closeAllAccordionsExcept(event.target);\n        }\n    }\n\n    @Watch('hideActionText')\n    private updateHideActiontextOnPanel() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.hideActionText = this.hideActionText;\n        })\n    }\n\n    @Watch('highlight')\n    private updateHighlightOnPanel() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.highlight = this.highlight;\n        })\n    }\n    @Watch('groupContentWithHeader')\n    private updateGroupContentWithHeader() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.groupContentWithHeader = this.groupContentWithHeader;\n        })\n    }\n\n\n    render() {\n        return (\n            <Host>\n                <slot/>\n            </Host>\n        );\n    }\n\n    private getAllAccordionPanelsFromHostElement(): HTMLWcsAccordionPanelElement[] {\n        return Array.from(this.el.children)\n            .filter(el => el.tagName === 'WCS-ACCORDION-PANEL') as HTMLWcsAccordionPanelElement[];\n    }\n\n    /**\n     * Close all accordion panels except the one that match the eventTarget reference\n     */\n    private closeAllAccordionsExcept(eventTarget: EventTarget): void {\n        this.accordionPanels.filter(a => a !== eventTarget).forEach(a => a.close());\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,8HACrB,MAAAC,EAAeD,E,MCWFE,EAAS,M,yBAEVC,KAAAC,gBAAkD,G,oBAMT,K,eAOL,M,4BASa,K,CAEzD,iBAAAC,GACIF,KAAKC,gBAAkBD,KAAKG,uCAE5BH,KAAKI,8BACLJ,KAAKK,yBACLL,KAAKM,8B,CAIT,oBAAAC,CAAqBC,GACjBA,EAAMC,2BACN,GAAID,EAAME,OAAQ,CACdV,KAAKW,yBAAyBH,EAAMI,O,EAKpC,2BAAAR,GACJJ,KAAKC,gBAAgBY,SAASC,IAC1BA,EAAIC,eAAiBf,KAAKe,cAAc,G,CAKxC,sBAAAV,GACJL,KAAKC,gBAAgBY,SAASC,IAC1BA,EAAIE,UAAYhB,KAAKgB,SAAS,G,CAI9B,4BAAAV,GACJN,KAAKC,gBAAgBY,SAASC,IAC1BA,EAAIG,uBAAyBjB,KAAKiB,sBAAsB,G,CAKhE,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,QAAAE,IAAA,6C,CAKJ,oCAAAlB,GACJ,OAAOmB,MAAMC,KAAKvB,KAAKwB,GAAGC,UACrBC,QAAOF,GAAMA,EAAGG,UAAY,uB,CAM7B,wBAAAhB,CAAyBiB,GAC7B5B,KAAKC,gBAAgByB,QAAOG,GAAKA,IAAMD,IAAaf,SAAQgB,GAAKA,EAAEC,S"}