wcs-core 7.2.2 → 7.4.0

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.
@@ -1215,6 +1310,9 @@ export namespace Components {
     }
     /**
      * The horizontal-stepper is a representation of a user’s progress through a series of discrete steps.
+     * ## Accessibility guidelines 💡
+     * > - The `ariaLabel` property is available for every step to provide a more descriptive label for screen readers.
+     * > - It is **mandatory** in `linear` mode if the step's content is not descriptive enough (e.g., only a number).
      * @cssprop --wcs-horizontal-step-text-color-default - Text color of the step by default
      * @cssprop --wcs-horizontal-step-text-color-active - Text color of the step when active
      * @cssprop --wcs-horizontal-step-text-color-disabled - Text color of step when disabled
@@ -2484,6 +2582,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 +3093,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.
@@ -3635,6 +3814,9 @@ declare global {
     }
     /**
      * The horizontal-stepper is a representation of a user’s progress through a series of discrete steps.
+     * ## Accessibility guidelines 💡
+     * > - The `ariaLabel` property is available for every step to provide a more descriptive label for screen readers.
+     * > - It is **mandatory** in `linear` mode if the step's content is not descriptive enough (e.g., only a number).
      * @cssprop --wcs-horizontal-step-text-color-default - Text color of the step by default
      * @cssprop --wcs-horizontal-step-text-color-active - Text color of the step when active
      * @cssprop --wcs-horizontal-step-text-color-disabled - Text color of step when disabled
@@ -4536,6 +4718,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 +4845,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 +5245,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*
@@ -5751,6 +6038,9 @@ declare namespace LocalJSX {
     }
     /**
      * The horizontal-stepper is a representation of a user’s progress through a series of discrete steps.
+     * ## Accessibility guidelines 💡
+     * > - The `ariaLabel` property is available for every step to provide a more descriptive label for screen readers.
+     * > - It is **mandatory** in `linear` mode if the step's content is not descriptive enough (e.g., only a number).
      * @cssprop --wcs-horizontal-step-text-color-default - Text color of the step by default
      * @cssprop --wcs-horizontal-step-text-color-active - Text color of the step when active
      * @cssprop --wcs-horizontal-step-text-color-disabled - Text color of step when disabled
@@ -7025,6 +7315,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 +7670,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.
@@ -7791,6 +8142,9 @@ declare module "@stencil/core" {
             "wcs-hint": LocalJSX.WcsHint & JSXBase.HTMLAttributes<HTMLWcsHintElement>;
             /**
              * The horizontal-stepper is a representation of a user’s progress through a series of discrete steps.
+             * ## Accessibility guidelines 💡
+             * > - The `ariaLabel` property is available for every step to provide a more descriptive label for screen readers.
+             * > - It is **mandatory** in `linear` mode if the step's content is not descriptive enough (e.g., only a number).
              * @cssprop --wcs-horizontal-step-text-color-default - Text color of the step by default
              * @cssprop --wcs-horizontal-step-text-color-active - Text color of the step when active
              * @cssprop --wcs-horizontal-step-text-color-disabled - Text color of step when disabled

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/types/utils/playwright/test-expect.d.ts

@@ -0,0 +1,33 @@
+interface CustomMatchers<R = unknown> {
+    /**
+     * Will check if the event spy received the expected event.
+     */
+    toHaveReceivedEvent(): R;
+    /**
+     * Will check if the event spy received the expected event with the expected detail.
+     * @param eventDetail The expected detail of the event.
+     */
+    toHaveReceivedEventDetail(eventDetail: any): R;
+    /**
+     * Will check if the event spy received the expected event at the given index with the expected detail.
+     * @param index position of the event in the received events array.
+     * @param eventDetail The expected detail of the event.
+     */
+    toHaveNthReceivedEventDetail(index: number, eventDetail: any): R;
+    /**
+     * Will check if the event spy received the expected event with the expected detail on the first received event.
+     * @param eventDetail The expected detail of the event.
+     */
+    toHaveFirstReceivedEventDetail(eventDetail: any): R;
+    /**
+     * Will check how many times the event has been received.
+     */
+    toHaveReceivedEventTimes(count: number): R;
+}
+declare global {
+    namespace PlaywrightTest {
+        interface Matchers<R> extends CustomMatchers<R> {
+        }
+    }
+}
+export {};

package/dist/types/utils/playwright/test.d.ts

@@ -0,0 +1,7 @@
+import { E2EPage } from '@stencil/playwright';
+/**
+ * @see stencil.config.ts expose dev web server
+ * @param page
+ * @param content
+ */
+export declare function setWcsContent(page: E2EPage, content: string): Promise<void>;

package/dist/wcs/{p-8e9bd0f1.entry.js → p-0326f834.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-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 m=h;const b=[];const p=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,b));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:"f1c0ed14b8806df5c1ba717f6354d2e4c201dcd1"},t("nav",Object.assign({key:"ae39ce6d5af6868105c1cb349d70d04da9931274",class:`wcs-breadcrumb-container${this.showHiddenItems?" show-hidden-items":""}`,"aria-label":l},this.inheritedAttributes,{ref:e=>this.navEl=e}),t("div",{key:"82f4a76da057076e5d7299df7972bb918220b6ac",role:"list"},t("slot",{key:"e3180e059e1467c9821e5d10b0694f39194ce4f4",onSlotchange:this.handleSlotChange.bind(this)}),t("slot",{key:"e865695a1082a503321d519193f47c54f2d86ba5",name:"non-collapsed"}),t("slot",{key:"53a846e67fe320236a8f0b80216c72fa676304bb",name:"items-before-expand-btn"}),t("slot",{key:"a6f9243e94d5f4e05e6e3ca89a574ac37128689a",name:"hidden-items"}),e&&this.renderExpandAllButton(),t("slot",{key:"0ca62fc184565b82a12d1314bdfb51161934775b",name:"items-after-expand-btn"}))))}get el(){return i(this)}static get watchers(){return{maxItems:["handleCollapsePropsChange"],itemsBeforeCollapse:["handleCollapsePropsChange"],itemsAfterCollapse:["handleCollapsePropsChange"],ariaLabelExpandButton:["handleAriaLabelExpandBtnChange"]}}};p.style=m;export{p as wcs_breadcrumb};
-//# sourceMappingURL=p-8e9bd0f1.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 m=h;const b=[];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,b));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:"1707e6c3ee0cc621c75f85f927b543dea1af4342"},t("nav",Object.assign({key:"b326c58b86feed5092f8a6c5d46c3cf2dd06a783",class:`wcs-breadcrumb-container${this.showHiddenItems?" show-hidden-items":""}`,"aria-label":l},this.inheritedAttributes,{ref:e=>this.navEl=e}),t("div",{key:"9a4395f63e0895bca1918d7236a01dd9d0437f26",role:"list"},t("slot",{key:"b74aa1fc77ddfc892f0ba79bceffceab10e49c1f",onSlotchange:this.handleSlotChange.bind(this)}),t("slot",{key:"c616f6281282a7088073ceb131f12f93d1126c8b",name:"non-collapsed"}),t("slot",{key:"0db22f440bc3956219c343e4dac60bfe09581d73",name:"items-before-expand-btn"}),t("slot",{key:"a29809c5122d539d11c1e53e591ed4342c338810",name:"hidden-items"}),e&&this.renderExpandAllButton(),t("slot",{key:"aa906ec3b5805f78136b39e5d56937cdca7a7f38",name:"items-after-expand-btn"}))))}get el(){return i(this)}static get watchers(){return{maxItems:["handleCollapsePropsChange"],itemsBeforeCollapse:["handleCollapsePropsChange"],itemsAfterCollapse:["handleCollapsePropsChange"],ariaLabelExpandButton:["handleAriaLabelExpandBtnChange"]}}};f.style=m;export{f as wcs_breadcrumb};
+//# sourceMappingURL=p-0326f834.entry.js.map