wcs-core 7.6.0 → 7.7.0

package/dist/cjs/wcs-chip.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-chip.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/chip/chip.scss?tag=wcs-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    // #region CSS Variables\n    --wcs-chip-height: var(--wcs-semantic-size-s);\n    --wcs-chip-font-size: var(--wcs-semantic-font-size-base);\n    --wcs-chip-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-chip-focus-outline-border-width: var(--wcs-semantic-border-width-large);\n\n    --wcs-chip-padding-vertical: var(--wcs-semantic-spacing-base);\n    --wcs-chip-padding-horizontal: var(--wcs-semantic-spacing-base-150);\n    --wcs-chip-padding-horizontal-dismissible: var(--wcs-semantic-spacing-base);\n\n    --wcs-chip-selectable-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-selectable-background-color-pressed: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-chip-selectable-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-chip-selectable-background-color-selected: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-selectable-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-chip-selectable-background-color-selected-pressed: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-chip-selectable-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-chip-selectable-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-chip-selectable-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-chip-selectable-color-pressed: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-chip-selectable-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-chip-selectable-color-selected: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-chip-selectable-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-chip-selectable-color-selected-pressed: var(--wcs-semantic-color-foreground-action-primary-press);\n\n    --wcs-chip-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-chip-border-line-width: var(--wcs-semantic-border-width-default);\n    --wcs-chip-selectable-border-color: var(--wcs-semantic-color-border-action-secondary-default);\n    --wcs-chip-selectable-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-chip-selectable-border-color-pressed: var(--wcs-semantic-color-border-action-secondary-press);\n    --wcs-chip-selectable-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);\n\n    --wcs-chip-selectable-content-gap: var(--wcs-semantic-spacing-base);\n    --wcs-chip-selectable-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-chip-dismissible-content-gap: var(--wcs-semantic-spacing-base-05);\n    --wcs-chip-dismissible-padding-right: var(--wcs-semantic-spacing-base-05);\n    --wcs-chip-dismissible-button-outline-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-chip-dismissible-primary-focus-outline-color: var(--wcs-semantic-color-border-focus-base-on-secondary);\n    --wcs-chip-dismissible-primary-border-color: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-dismissible-primary-border-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-chip-dismissible-primary-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-chip-dismissible-primary-color-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-chip-dismissible-primary-color-pressed: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-chip-dismissible-primary-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-chip-dismissible-primary-background-color: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-dismissible-primary-background-color-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-chip-dismissible-primary-background-color-pressed: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-chip-dismissible-primary-background-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-chip-dismissible-secondary-button-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n    --wcs-chip-dismissible-secondary-border-color: var(--wcs-semantic-color-border-action-secondary-default);\n    --wcs-chip-dismissible-secondary-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);\n    --wcs-chip-dismissible-secondary-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-chip-dismissible-secondary-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n    --wcs-chip-dismissible-secondary-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-dismissible-secondary-button-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-dismissible-secondary-button-background-color-hover: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-chip-dismissible-secondary-button-background-color-pressed: var(--wcs-semantic-color-background-surface-accent-light);\n    --wcs-chip-dismissible-secondary-button-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-disabled);\n\n    // #endregion\n\n    display: inline-flex;\n    // we set a 100% line-height to center the children text vertically\n    align-items: center;\n    // Prevents extra space below the line caused by baseline alignment of inline-flex elements when a component contains an inline SVG\n    vertical-align: middle;\n    overflow: hidden;\n    box-sizing: border-box;\n    height: var(--wcs-chip-height);\n    border-radius: var(--wcs-chip-border-radius);\n    font-size: var(--wcs-chip-font-size);\n    font-weight: var(--wcs-chip-font-weight);\n\n    // Default styles (selectable, not selected, not disabled)\n    padding: var(--wcs-chip-padding-vertical) var(--wcs-chip-padding-horizontal);\n    cursor: pointer;\n    user-select: none;\n\n    transition-property: color, background-color;\n    transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n    transition-timing-function: ease-out;\n}\n\n// SELECTABLE MODE\n:host([mode=selectable]) {\n    gap: var(--wcs-chip-selectable-content-gap);\n    border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-selectable-border-color);\n    background-color: var(--wcs-chip-selectable-background-color);\n    color: var(--wcs-chip-selectable-color);\n\n    &:host(:focus-visible) {\n        @include focus-outline(\n            $outline-color: var(--wcs-chip-selectable-focus-outline-color),\n            $border-radius: var(--wcs-chip-border-radius),\n            $border-width: var(--wcs-chip-focus-outline-border-width)\n        );\n    }\n\n    &:host(:not([disabled])) {\n        &:host(:not([selected])) {\n            &:host(:hover) {\n                background-color: var(--wcs-chip-selectable-background-color-hover);\n                color: var(--wcs-chip-selectable-color-hover);\n                border-color: var(--wcs-chip-selectable-border-color-hover);\n            }\n\n            &:host(:active) {\n                background-color: var(--wcs-chip-selectable-background-color-pressed);\n                color: var(--wcs-chip-selectable-color-pressed);\n                border-color: var(--wcs-chip-selectable-border-color-pressed);\n            }\n        }\n\n        &:host([selected]) {\n            color: var(--wcs-chip-selectable-color-selected);\n            background-color: var(--wcs-chip-selectable-background-color-selected);\n            border-color: transparent;\n\n            svg path {\n                fill: var(--wcs-chip-selectable-color-selected);\n                // todo: check this issue with designers\n                // We optically lift the check icon a bit to center it better\n                transform: translateY(-1.5px);\n            }\n\n            &:host(:hover) {\n                background-color: var(--wcs-chip-selectable-background-color-selected-hover);\n                color: var(--wcs-chip-selectable-color-selected-hover);\n\n                svg path {\n                    fill: var(--wcs-chip-selectable-color-selected-hover);\n                }\n            }\n\n            &:host(:active) {\n                background-color: var(--wcs-chip-selectable-background-color-selected-pressed);\n                color: var(--wcs-chip-selectable-color-selected-pressed);\n\n                svg path {\n                    fill: var(--wcs-chip-selectable-color-selected-pressed);\n                }\n            }\n        }\n    }\n\n    &:host([disabled]) {\n        color: var(--wcs-chip-selectable-color-disabled);\n        cursor: not-allowed;\n\n        svg {\n            path {\n                fill: var(--wcs-chip-selectable-color-disabled);\n            }\n        }\n\n        &:host(:not([selected])) {\n            border-color: var(--wcs-chip-selectable-border-color-disabled);\n        }\n\n        &:host([selected]) {\n            background-color: var(--wcs-chip-selectable-background-color-selected-disabled);\n            border: 0;\n        }\n    }\n}\n\n// DISMISSIBLE MODE\n:host([mode=dismissible]) {\n    cursor: initial;\n    border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color);\n    color: var(--wcs-chip-dismissible-primary-color);\n    background-color: var(--wcs-chip-dismissible-primary-background-color);\n    gap: var(--wcs-chip-dismissible-content-gap);\n    padding-right: var(--wcs-chip-dismissible-padding-right);\n\n    button {\n        background: transparent;\n        border: none;\n        margin: 0;\n        padding: 0;\n        border-radius: var(--wcs-semantic-border-radius-full);\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        color: inherit;\n        width: var(--wcs-semantic-size-xs);\n        height: var(--wcs-semantic-size-xs);\n\n        &:focus {\n            outline: none;\n\n            svg {\n                @include focus-outline(\n                    $outline-color: var(--wcs-chip-dismissible-primary-focus-outline-color),\n                    $border-radius: var(--wcs-chip-dismissible-button-outline-radius),\n                    $border-width: var(--wcs-chip-focus-outline-border-width)\n                );\n            }\n        }\n    }\n\n    &:host(:not([open])) {\n        display: none;\n        margin: 0;\n    }\n\n    &:host(:not([disabled])) {\n        button:hover {\n            background-color: var(--wcs-chip-dismissible-primary-background-color-hover);\n            color: var(--wcs-chip-dismissible-primary-color-hover);\n        }\n\n        button:active {\n            background-color: var(--wcs-chip-dismissible-primary-background-color-pressed);\n            color: var(--wcs-chip-dismissible-primary-color-pressed);\n        }\n    }\n\n    &:host([disabled]) {\n        color: var(--wcs-chip-dismissible-primary-color-disabled);\n        background-color: var(--wcs-chip-dismissible-primary-background-color-disabled);\n        cursor: not-allowed;\n        border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color-disabled);\n\n        svg {\n            cursor: not-allowed;\n\n            path {\n                fill: var(--wcs-chip-dismissible-primary-color-disabled);\n            }\n        }\n    }\n\n    // secondary override (colors only), based on the code above for the primary variant\n    &:host([variant=secondary]) {\n        color: var(--wcs-chip-dismissible-secondary-color);\n        background-color: var(--wcs-chip-dismissible-secondary-background-color);\n        border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color);\n\n        button {\n            background: var(--wcs-chip-dismissible-secondary-button-background-color);\n\n            &:focus {\n                outline: none;\n\n                svg {\n                    @include focus-outline(\n                        $outline-color: var(--wcs-chip-dismissible-secondary-button-focus-outline-color),\n                        $border-radius: var(--wcs-chip-dismissible-button-outline-radius),\n                        $border-width: var(--wcs-chip-focus-outline-border-width)\n                    );\n                }\n            }\n        }\n\n        &:host(:not([disabled])) {\n            button:hover {\n                background-color: var(--wcs-chip-dismissible-secondary-button-background-color-hover);\n                color: var(--wcs-chip-dismissible-secondary-button-color-hover);\n            }\n\n            button:active {\n                background-color: var(--wcs-chip-dismissible-secondary-button-background-color-pressed);\n                color: var(--wcs-chip-dismissible-secondary-button-color-pressed);\n            }\n        }\n\n        &:host([disabled]) {\n            color: var(--wcs-chip-dismissible-secondary-color-disabled);\n            background-color: var(--wcs-chip-dismissible-secondary-background-color-disabled);\n            border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color-disabled);\n\n            svg {\n                path {\n                    fill: var(--wcs-chip-dismissible-secondary-color-disabled);\n                }\n            }\n        }\n    }\n}\n","import { Component, ComponentInterface, EventEmitter, Prop, Event, Element, Host, h } from '@stencil/core';\nimport { WcsChipMode, WcsChipVariant } from './chip-interface';\n\n/**\n * The chip component is a small, interactive element that can be used to represent an input, filter, or tag.\n * It can be in one of two modes: 'selectable' or 'dismissible'.\n * - In 'selectable' mode, the chip can be selected or deselected, and emits an event when clicked.\n * - In 'dismissible' mode, the chip can be dismissed (removed) by clicking a dismiss icon, and emits an event when the dismiss icon is clicked.\n *\n * @cssprop --wcs-chip-height - Height of the chip\n * @cssprop --wcs-chip-font-size - Font size of the chip text\n * @cssprop --wcs-chip-font-weight - Font weight of the chip text\n *\n * @cssprop --wcs-chip-focus-outline-border-width - Border width of the chip focus outline\n *\n * @cssprop --wcs-chip-padding-vertical - Vertical padding (top - bottom) of the chip\n * @cssprop --wcs-chip-padding-horizontal - Horizontal padding (left - right) of the chip\n * @cssprop --wcs-chip-padding-horizontal-dismissible - Horizontal padding (left - right) of the chip with 'dismissible' mode\n *\n * @cssprop --wcs-chip-selectable-background-color - Background color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-background-color-pressed - Background color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-background-color-hover - Background color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-background-color-selected - Background color of the chip with 'selectable' mode when selected\n * @cssprop --wcs-chip-selectable-background-color-selected-hover - Background color of the chip with 'selectable' mode when selected and hovered\n * @cssprop --wcs-chip-selectable-background-color-selected-pressed - Background color of the chip with 'selectable' mode when selected and pressed\n * @cssprop --wcs-chip-selectable-background-color-selected-disabled - Background color of the chip with 'selectable' mode when selected and disabled\n *\n * @cssprop --wcs-chip-selectable-color - Text color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-color-hover - Text color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-color-pressed - Text color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-color-disabled - Text color of the chip with 'selectable' mode when disabled\n * @cssprop --wcs-chip-selectable-color-selected - Text color of the chip with 'selectable' mode when selected\n * @cssprop --wcs-chip-selectable-color-selected-hover - Text color of the chip with 'selectable' mode when selected and hovered\n * @cssprop --wcs-chip-selectable-color-selected-pressed - Text color of the chip with 'selectable' mode when selected and pressed\n *\n * @cssprop --wcs-chip-border-radius - Border radius of the chip\n * @cssprop --wcs-chip-border-line-width - Border line width of the chip\n * @cssprop --wcs-chip-selectable-border-color - Border color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-border-color-hover - Border color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-border-color-pressed - Border color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-border-color-disabled - Border color of the chip with 'selectable' mode when disabled\n *\n * @cssprop --wcs-chip-selectable-content-gap - Gap between content elements in chip with 'selectable' mode\n * @cssprop --wcs-chip-selectable-focus-outline-color - Focus outline color of the chip with 'selectable' mode\n *\n * @cssprop --wcs-chip-dismissible-content-gap - Gap between content elements in chip with 'dismissible' mode\n * @cssprop --wcs-chip-dismissible-padding-right - Right padding of the chip with 'dismissible' mode\n * @cssprop --wcs-chip-dismissible-button-outline-radius - Outline radius of the button for the chip with 'dismissible' mode\n *\n * @cssprop --wcs-chip-dismissible-primary-focus-outline-color - Focus outline color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-border-color - Border color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'primary' variant when disabled\n * @cssprop --wcs-chip-dismissible-primary-color - Text color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-color-hover - Text color of the chip with 'dismissible' mode and 'primary' variant when hovered\n * @cssprop --wcs-chip-dismissible-primary-color-pressed - Text color of the chip with 'dismissible' mode and 'primary' variant when pressed\n * @cssprop --wcs-chip-dismissible-primary-color-disabled - Text color of the chip with 'dismissible' mode and 'primary' variant when disabled\n * @cssprop --wcs-chip-dismissible-primary-background-color - Background color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-background-color-hover - Background color of the chip with 'dismissible' mode and 'primary' variant when hovered\n * @cssprop --wcs-chip-dismissible-primary-background-color-pressed - Background color of the chip with 'dismissible' mode and 'primary' variant when pressed\n * @cssprop --wcs-chip-dismissible-primary-background-color-disabled - Background color of the chip with 'dismissible' mode and 'primary' variant when disabled\n *\n * @cssprop --wcs-chip-dismissible-secondary-button-focus-outline-color - Button focus outline color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-border-color - Border color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n * @cssprop --wcs-chip-dismissible-secondary-color - Text color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-color-disabled - Text color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n * @cssprop --wcs-chip-dismissible-secondary-background-color - Background color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color - Button background color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-hover - Button background color of the chip with 'dismissible' mode and 'secondary' variant when hovered\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-pressed - Button background color of the chip with 'dismissible' mode and 'secondary' variant when pressed\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-disabled - Button background color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n */\n@Component({\n    tag: 'wcs-chip',\n    styleUrl: 'chip.scss',\n    shadow: true\n})\nexport class Chip implements ComponentInterface {\n    @Element() el!: HTMLWcsChipElement;\n    /**\n     * Unique value representing the chip identifier in events.\n     */\n    @Prop() value: string;\n\n    /**\n     * Text label displayed on the chip.\n     */\n    @Prop() label: string;\n\n    /**\n     * If `true`, the chip is selected.\n     * This property is only used in 'selectable' mode.\n     */\n    @Prop({ reflect: true }) selected = false;\n\n    /**\n     * If `true`, the chip is open.\n     * This property is used to control the visibility of the chip in the dismissible mode.\n     * When the user clicks the dismiss icon, this property automatically becomes `false`, hiding the chip.\n     */\n    @Prop({ reflect: true }) open = true;\n\n    /**\n     * If `true`, the chip is disabled.\n     * The chip will not respond to click events and will not emit any events.\n     * This property is used in both 'selectable' and 'dismissible' modes.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Defines the visual style of the chip for the dismissible mode.\n     */\n    @Prop({ reflect: true }) variant: WcsChipVariant = 'primary';\n\n    /**\n     * Defines the mode of the chip.\n     * Can be 'selectable' or 'dismissible'.\n     * - 'selectable': The chip can be selected and emits an event when clicked.\n     * - 'dismissible': The chip can be dismissed (removed) and emits an event when the dismiss icon is clicked.\n     */\n    @Prop({ reflect: true }) mode: WcsChipMode = 'selectable';\n\n    /**\n     * Emitted when the chip is clicked in 'selectable' mode.\n     */\n    @Event() wcsChipSelectChange: EventEmitter<{ value: string; selected: boolean }>;\n\n    /**\n     * Emitted when the dismiss icon is clicked in 'dismissible' mode.\n     */\n    @Event() wcsChipDismiss: EventEmitter<{ value: string }>;\n\n\n    private select() {\n        this.selected = !this.selected; // Toggle the selected state\n        this.wcsChipSelectChange.emit({ value: this.value, selected: this.selected });\n    }\n\n    private dismiss() {\n        this.open = false;\n        this.wcsChipDismiss.emit({ value: this.value });\n        this.focusNextChip();\n    }\n\n    private focusNextChip(): void {\n        let currentElement = this.el.nextElementSibling;\n\n        while (currentElement) {\n            if (this.isActionableChip(currentElement)) {\n                this.focusChip(currentElement as HTMLWcsChipElement);\n                return;\n            }\n            currentElement = currentElement.nextElementSibling;\n        }\n    }\n\n    private isActionableChip(element: Element | null): element is HTMLWcsChipElement {\n        return element instanceof HTMLElement\n            && element.tagName === 'WCS-CHIP'\n            && !(element as HTMLWcsChipElement).disabled;\n    }\n\n    private focusChip(chip: HTMLWcsChipElement): void {\n        if (chip.mode === 'selectable') {\n            chip.focus();\n        } else if (chip.mode === 'dismissible') {\n            chip.shadowRoot?.querySelector('button')?.focus();\n        }\n    }\n\n    private handleClick() {\n        if (this.disabled || this.mode !== 'selectable') {\n            return;\n        }\n        this.select();\n    };\n\n    private handleDismiss = (event: Event) => {\n        if (this.disabled || this.mode !== 'dismissible') {\n            return;\n        }\n        event.stopPropagation(); // Prevent the click event from bubbling up to the chip click handler\n        this.dismiss();\n    };\n\n    private handleKeydown(ev) {\n        if (this.disabled) {\n            return;\n        }\n        if (this.mode === 'selectable') {\n            if (ev.key === 'Enter' || ev.key === ' ') {\n                this.select();\n            }\n        } else if (this.mode === 'dismissible') {\n            if (ev.key === 'Delete' || ev.key === 'Backspace') {\n                this.dismiss();\n            }\n        }\n    }\n\n    render() {\n        const commonProps = {\n            'aria-disabled': this.disabled ? 'true' : null\n        };\n\n        if (this.mode === 'selectable') {\n            return (\n                <Host\n                    {...commonProps}\n                    role=\"checkbox\"\n                    aria-checked={this.selected ? 'true' : 'false'}\n                    tabindex={this.disabled ? -1 : 0}\n                    onClick={this.handleClick.bind(this)}\n                    onKeyDown={this.handleKeydown.bind(this)}\n                >\n                    {this.selected && (\n                        <svg class=\"check-icon\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"\n                             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M23.712 8.3011L8.0292 23.7157C7.6356 24.095 6.9984 24.095 6.6264 23.7157L0.288 17.4955C-0.096 17.1226 -0.096 16.496 0.288 16.1192L2.1552 14.2739C2.5536 13.9036 3.1776 13.9036 3.5532 14.2739L6.6264 17.2764C6.9984 17.6583 7.6356 17.6583 8.0292 17.2764L20.4384 5.08081C20.8236 4.70662 21.4536 4.70662 21.8364 5.08081L23.712 6.91841C24.096 7.29516 24.096 7.91923 23.712 8.3011Z\"\n                                fill=\"white\" />\n                        </svg>\n                    )}\n                    <span>{this.label}</span>\n                </Host>\n            );\n        } else {\n            return (\n                <Host\n                    {...commonProps}\n                >\n                    <span>{this.label}</span>\n                    <button\n                        aria-label={`Supprimer ${this.label}`}\n                        disabled={this.disabled}\n                        onClick={this.handleDismiss.bind(this)}\n                        onKeyDown={this.handleKeydown.bind(this)}\n                    >\n                        <svg class=\"dismiss-icon\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"\n                             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M14.2656 12.0298L19.588 6.72176C20.1908 6.12119 20.1061 5.05213 19.5034 4.45043C18.9006 3.84986 17.914 3.84986 17.3112 4.45043L11.9887 9.7596L6.66743 4.45043C6.06351 3.84986 5.07691 3.84986 4.47412 4.45043C3.87132 5.05213 3.82843 6.07942 4.43122 6.68112L9.75365 11.9892L4.43122 17.2983C3.82843 17.8989 3.87132 18.9262 4.47412 19.5279C5.07691 20.1296 6.10527 20.1702 6.70807 19.5685L12.0305 14.2605L17.3112 19.5279C17.914 20.1296 18.9006 20.1296 19.5034 19.5279C20.1061 18.9262 20.149 17.8989 19.5462 17.2983L14.2656 12.0298Z\"\n                                fill=\"currentColor\" />\n                        </svg>\n                    </button>\n                </Host>\n            );\n        }\n    }\n}\n\n"],"version":3}
+{"file":"wcs-chip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,k/WAAk/W,CAAC;AACngX,sBAAe,OAAO;;MC8ET,IAAI;;;;;QAkHL,kBAAa,GAAG,CAAC,KAAY;YACjC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;gBAC9C,OAAO;aACV;YACD,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,OAAO,EAAE,CAAC;SAClB,CAAC;;;wBAxGkC,KAAK;oBAOT,IAAI;wBAOA,KAAK;uBAKU,SAAS;oBAQf,YAAY;;IAajD,MAAM;QACV,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;KACjF;IAEO,OAAO;QACX,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAEhD,MAAM,QAAQ,GAAG,IAAI,CAAC,0BAA0B,CAAC,MAAM,CAAC,CAAC;QACzD,IAAI,QAAQ,EAAE;YACV,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;SAC5B;aAAM;YACH,MAAM,YAAY,GAAG,IAAI,CAAC,0BAA0B,CAAC,UAAU,CAAC,CAAC;YACjE,IAAI,YAAY,EAAE;gBACd,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA;aAC/B;SACJ;KACJ;IAEO,0BAA0B,CAAC,SAA6B;QAC5D,MAAM,UAAU,GAAG,CAAC,EAAW,KAAK,SAAS,KAAK,MAAM;cAClD,EAAE,CAAC,kBAAkB;cACrB,EAAE,CAAC,sBAAsB,CAAC;QAEhC,IAAI,cAAc,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEzC,OAAO,cAAc,EAAE;YACnB,IAAI,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE;gBACvC,OAAO,cAAc,CAAC;aACzB;YACD,cAAc,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;SAC/C;QAED,OAAO,IAAI,CAAC;KACf;IAEO,gBAAgB,CAAC,OAAuB;QAC5C,OAAO,OAAO,YAAY,WAAW;eAC9B,OAAO,CAAC,OAAO,KAAK,UAAU;eAC9B,CAAE,OAA8B,CAAC,QAAQ,CAAC;KACpD;IAEO,SAAS,CAAC,IAAwB;;QACtC,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,EAAE;YAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;SAChB;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;YACpC,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,QAAQ,CAAC,0CAAE,KAAK,EAAE,CAAC;SACrD;KACJ;IAEO,WAAW;QACf,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,EAAE;YAC7C,OAAO;SACV;QACD,IAAI,CAAC,MAAM,EAAE,CAAC;KACjB;;IAUO,aAAa,CAAC,EAAE;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO;SACV;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,EAAE;YAC5B,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;gBACtC,IAAI,CAAC,MAAM,EAAE,CAAC;aACjB;SACJ;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;YACpC,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,EAAE;gBAC/C,IAAI,CAAC,OAAO,EAAE,CAAC;aAClB;SACJ;KACJ;IAED,MAAM;QACF,MAAM,WAAW,GAAG;YAChB,eAAe,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI;SACjD,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,EAAE;YAC5B,QACIA,QAACC,UAAI,oBACG,WAAW,IACf,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAEvC,IAAI,CAAC,QAAQ,KACVD,iBAAK,KAAK,EAAC,YAAY,iBAAa,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAChF,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC/CA,kBACI,CAAC,EAAC,uXAAuX,EACzX,IAAI,EAAC,OAAO,GAAG,CACjB,CACT,EACDA,sBAAO,IAAI,CAAC,KAAK,CAAQ,CACtB,EACT;SACL;aAAM;YACH,QACIA,QAACC,UAAI,oBACG,WAAW,GAEfD,sBAAO,IAAI,CAAC,KAAK,CAAQ,EACzBA,kCACgB,aAAa,IAAI,CAAC,KAAK,EAAE,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACtC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IAExCA,iBAAK,KAAK,EAAC,cAAc,iBAAa,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAClF,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC/CA,kBACI,CAAC,EAAC,8gBAA8gB,EAChhB,IAAI,EAAC,cAAc,GAAG,CACxB,CACD,CACN,EACT;SACL;KACJ;;;;;;;","names":["h","Host"],"sources":["src/components/chip/chip.scss?tag=wcs-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    // #region CSS Variables\n    --wcs-chip-height: var(--wcs-semantic-size-s);\n    --wcs-chip-font-size: var(--wcs-semantic-font-size-base);\n    --wcs-chip-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-chip-focus-outline-border-width: var(--wcs-semantic-border-width-large);\n\n    --wcs-chip-padding-vertical: var(--wcs-semantic-spacing-base);\n    --wcs-chip-padding-horizontal: var(--wcs-semantic-spacing-base-150);\n    --wcs-chip-padding-horizontal-dismissible: var(--wcs-semantic-spacing-base);\n\n    --wcs-chip-selectable-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-selectable-background-color-pressed: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-chip-selectable-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-chip-selectable-background-color-selected: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-selectable-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-chip-selectable-background-color-selected-pressed: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-chip-selectable-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-chip-selectable-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-chip-selectable-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-chip-selectable-color-pressed: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-chip-selectable-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-chip-selectable-color-selected: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-chip-selectable-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-chip-selectable-color-selected-pressed: var(--wcs-semantic-color-foreground-action-primary-press);\n\n    --wcs-chip-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-chip-border-line-width: var(--wcs-semantic-border-width-default);\n    --wcs-chip-selectable-border-color: var(--wcs-semantic-color-border-action-secondary-default);\n    --wcs-chip-selectable-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-chip-selectable-border-color-pressed: var(--wcs-semantic-color-border-action-secondary-press);\n    --wcs-chip-selectable-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);\n\n    --wcs-chip-selectable-content-gap: var(--wcs-semantic-spacing-base);\n    --wcs-chip-selectable-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-chip-dismissible-content-gap: var(--wcs-semantic-spacing-base-05);\n    --wcs-chip-dismissible-padding-right: var(--wcs-semantic-spacing-base-05);\n    --wcs-chip-dismissible-button-outline-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-chip-dismissible-primary-focus-outline-color: var(--wcs-semantic-color-border-focus-base-on-secondary);\n    --wcs-chip-dismissible-primary-border-color: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-dismissible-primary-border-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-chip-dismissible-primary-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-chip-dismissible-primary-color-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-chip-dismissible-primary-color-pressed: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-chip-dismissible-primary-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-chip-dismissible-primary-background-color: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-dismissible-primary-background-color-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-chip-dismissible-primary-background-color-pressed: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-chip-dismissible-primary-background-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-chip-dismissible-secondary-button-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n    --wcs-chip-dismissible-secondary-border-color: var(--wcs-semantic-color-border-action-secondary-default);\n    --wcs-chip-dismissible-secondary-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);\n    --wcs-chip-dismissible-secondary-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-chip-dismissible-secondary-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n    --wcs-chip-dismissible-secondary-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-dismissible-secondary-button-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-dismissible-secondary-button-background-color-hover: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-chip-dismissible-secondary-button-background-color-pressed: var(--wcs-semantic-color-background-surface-accent-light);\n    --wcs-chip-dismissible-secondary-button-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-disabled);\n\n    // #endregion\n\n    display: inline-flex;\n    // we set a 100% line-height to center the children text vertically\n    align-items: center;\n    // Prevents extra space below the line caused by baseline alignment of inline-flex elements when a component contains an inline SVG\n    vertical-align: middle;\n    overflow: hidden;\n    box-sizing: border-box;\n    height: var(--wcs-chip-height);\n    border-radius: var(--wcs-chip-border-radius);\n    font-size: var(--wcs-chip-font-size);\n    font-weight: var(--wcs-chip-font-weight);\n\n    // Default styles (selectable, not selected, not disabled)\n    padding: var(--wcs-chip-padding-vertical) var(--wcs-chip-padding-horizontal);\n    cursor: pointer;\n    user-select: none;\n\n    transition-property: color, background-color;\n    transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n    transition-timing-function: ease-out;\n}\n\n// SELECTABLE MODE\n:host([mode=selectable]) {\n    gap: var(--wcs-chip-selectable-content-gap);\n    border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-selectable-border-color);\n    background-color: var(--wcs-chip-selectable-background-color);\n    color: var(--wcs-chip-selectable-color);\n\n    &:host(:focus-visible) {\n        @include focus-outline(\n            $outline-color: var(--wcs-chip-selectable-focus-outline-color),\n            $border-radius: var(--wcs-chip-border-radius),\n            $border-width: var(--wcs-chip-focus-outline-border-width)\n        );\n    }\n\n    &:host(:not([disabled])) {\n        &:host(:not([selected])) {\n            &:host(:hover) {\n                background-color: var(--wcs-chip-selectable-background-color-hover);\n                color: var(--wcs-chip-selectable-color-hover);\n                border-color: var(--wcs-chip-selectable-border-color-hover);\n            }\n\n            &:host(:active) {\n                background-color: var(--wcs-chip-selectable-background-color-pressed);\n                color: var(--wcs-chip-selectable-color-pressed);\n                border-color: var(--wcs-chip-selectable-border-color-pressed);\n            }\n        }\n\n        &:host([selected]) {\n            color: var(--wcs-chip-selectable-color-selected);\n            background-color: var(--wcs-chip-selectable-background-color-selected);\n            border-color: transparent;\n\n            svg path {\n                fill: var(--wcs-chip-selectable-color-selected);\n                // todo: check this issue with designers\n                // We optically lift the check icon a bit to center it better\n                transform: translateY(-1.5px);\n            }\n\n            &:host(:hover) {\n                background-color: var(--wcs-chip-selectable-background-color-selected-hover);\n                color: var(--wcs-chip-selectable-color-selected-hover);\n\n                svg path {\n                    fill: var(--wcs-chip-selectable-color-selected-hover);\n                }\n            }\n\n            &:host(:active) {\n                background-color: var(--wcs-chip-selectable-background-color-selected-pressed);\n                color: var(--wcs-chip-selectable-color-selected-pressed);\n\n                svg path {\n                    fill: var(--wcs-chip-selectable-color-selected-pressed);\n                }\n            }\n        }\n    }\n\n    &:host([disabled]) {\n        color: var(--wcs-chip-selectable-color-disabled);\n        cursor: not-allowed;\n\n        svg {\n            path {\n                fill: var(--wcs-chip-selectable-color-disabled);\n            }\n        }\n\n        &:host(:not([selected])) {\n            border-color: var(--wcs-chip-selectable-border-color-disabled);\n        }\n\n        &:host([selected]) {\n            background-color: var(--wcs-chip-selectable-background-color-selected-disabled);\n            border: 0;\n        }\n    }\n}\n\n// DISMISSIBLE MODE\n:host([mode=dismissible]) {\n    cursor: initial;\n    border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color);\n    color: var(--wcs-chip-dismissible-primary-color);\n    background-color: var(--wcs-chip-dismissible-primary-background-color);\n    gap: var(--wcs-chip-dismissible-content-gap);\n    padding-right: var(--wcs-chip-dismissible-padding-right);\n\n    button {\n        background: transparent;\n        border: none;\n        margin: 0;\n        padding: 0;\n        border-radius: var(--wcs-semantic-border-radius-full);\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        color: inherit;\n        width: var(--wcs-semantic-size-xs);\n        height: var(--wcs-semantic-size-xs);\n\n        &:focus {\n            outline: none;\n\n            svg {\n                @include focus-outline(\n                    $outline-color: var(--wcs-chip-dismissible-primary-focus-outline-color),\n                    $border-radius: var(--wcs-chip-dismissible-button-outline-radius),\n                    $border-width: var(--wcs-chip-focus-outline-border-width)\n                );\n            }\n        }\n    }\n\n    &:host(:not([open])) {\n        display: none;\n        margin: 0;\n    }\n\n    &:host(:not([disabled])) {\n        button:hover {\n            background-color: var(--wcs-chip-dismissible-primary-background-color-hover);\n            color: var(--wcs-chip-dismissible-primary-color-hover);\n        }\n\n        button:active {\n            background-color: var(--wcs-chip-dismissible-primary-background-color-pressed);\n            color: var(--wcs-chip-dismissible-primary-color-pressed);\n        }\n    }\n\n    &:host([disabled]) {\n        color: var(--wcs-chip-dismissible-primary-color-disabled);\n        background-color: var(--wcs-chip-dismissible-primary-background-color-disabled);\n        cursor: not-allowed;\n        border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color-disabled);\n\n        svg {\n            cursor: not-allowed;\n\n            path {\n                fill: var(--wcs-chip-dismissible-primary-color-disabled);\n            }\n        }\n    }\n\n    // secondary override (colors only), based on the code above for the primary variant\n    &:host([variant=secondary]) {\n        color: var(--wcs-chip-dismissible-secondary-color);\n        background-color: var(--wcs-chip-dismissible-secondary-background-color);\n        border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color);\n\n        button {\n            background: var(--wcs-chip-dismissible-secondary-button-background-color);\n\n            &:focus {\n                outline: none;\n\n                svg {\n                    @include focus-outline(\n                        $outline-color: var(--wcs-chip-dismissible-secondary-button-focus-outline-color),\n                        $border-radius: var(--wcs-chip-dismissible-button-outline-radius),\n                        $border-width: var(--wcs-chip-focus-outline-border-width)\n                    );\n                }\n            }\n        }\n\n        &:host(:not([disabled])) {\n            button:hover {\n                background-color: var(--wcs-chip-dismissible-secondary-button-background-color-hover);\n                color: var(--wcs-chip-dismissible-secondary-button-color-hover);\n            }\n\n            button:active {\n                background-color: var(--wcs-chip-dismissible-secondary-button-background-color-pressed);\n                color: var(--wcs-chip-dismissible-secondary-button-color-pressed);\n            }\n        }\n\n        &:host([disabled]) {\n            color: var(--wcs-chip-dismissible-secondary-color-disabled);\n            background-color: var(--wcs-chip-dismissible-secondary-background-color-disabled);\n            border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color-disabled);\n\n            svg {\n                path {\n                    fill: var(--wcs-chip-dismissible-secondary-color-disabled);\n                }\n            }\n        }\n    }\n}\n","import { Component, ComponentInterface, EventEmitter, Prop, Event, Element, Host, h } from '@stencil/core';\nimport { WcsChipMode, WcsChipVariant } from './chip-interface';\n\ntype ChipFocusDirection = 'previous' | 'next';\n\n/**\n * The chip component is a small, interactive element that can be used to represent an input, filter, or tag.\n * It can be in one of two modes: 'selectable' or 'dismissible'.\n * - In 'selectable' mode, the chip can be selected or deselected, and emits an event when clicked.\n * - In 'dismissible' mode, the chip can be dismissed (removed) by clicking a dismiss icon, and emits an event when the dismiss icon is clicked.\n *\n * @cssprop --wcs-chip-height - Height of the chip\n * @cssprop --wcs-chip-font-size - Font size of the chip text\n * @cssprop --wcs-chip-font-weight - Font weight of the chip text\n *\n * @cssprop --wcs-chip-focus-outline-border-width - Border width of the chip focus outline\n *\n * @cssprop --wcs-chip-padding-vertical - Vertical padding (top - bottom) of the chip\n * @cssprop --wcs-chip-padding-horizontal - Horizontal padding (left - right) of the chip\n * @cssprop --wcs-chip-padding-horizontal-dismissible - Horizontal padding (left - right) of the chip with 'dismissible' mode\n *\n * @cssprop --wcs-chip-selectable-background-color - Background color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-background-color-pressed - Background color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-background-color-hover - Background color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-background-color-selected - Background color of the chip with 'selectable' mode when selected\n * @cssprop --wcs-chip-selectable-background-color-selected-hover - Background color of the chip with 'selectable' mode when selected and hovered\n * @cssprop --wcs-chip-selectable-background-color-selected-pressed - Background color of the chip with 'selectable' mode when selected and pressed\n * @cssprop --wcs-chip-selectable-background-color-selected-disabled - Background color of the chip with 'selectable' mode when selected and disabled\n *\n * @cssprop --wcs-chip-selectable-color - Text color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-color-hover - Text color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-color-pressed - Text color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-color-disabled - Text color of the chip with 'selectable' mode when disabled\n * @cssprop --wcs-chip-selectable-color-selected - Text color of the chip with 'selectable' mode when selected\n * @cssprop --wcs-chip-selectable-color-selected-hover - Text color of the chip with 'selectable' mode when selected and hovered\n * @cssprop --wcs-chip-selectable-color-selected-pressed - Text color of the chip with 'selectable' mode when selected and pressed\n *\n * @cssprop --wcs-chip-border-radius - Border radius of the chip\n * @cssprop --wcs-chip-border-line-width - Border line width of the chip\n * @cssprop --wcs-chip-selectable-border-color - Border color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-border-color-hover - Border color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-border-color-pressed - Border color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-border-color-disabled - Border color of the chip with 'selectable' mode when disabled\n *\n * @cssprop --wcs-chip-selectable-content-gap - Gap between content elements in chip with 'selectable' mode\n * @cssprop --wcs-chip-selectable-focus-outline-color - Focus outline color of the chip with 'selectable' mode\n *\n * @cssprop --wcs-chip-dismissible-content-gap - Gap between content elements in chip with 'dismissible' mode\n * @cssprop --wcs-chip-dismissible-padding-right - Right padding of the chip with 'dismissible' mode\n * @cssprop --wcs-chip-dismissible-button-outline-radius - Outline radius of the button for the chip with 'dismissible' mode\n *\n * @cssprop --wcs-chip-dismissible-primary-focus-outline-color - Focus outline color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-border-color - Border color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'primary' variant when disabled\n * @cssprop --wcs-chip-dismissible-primary-color - Text color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-color-hover - Text color of the chip with 'dismissible' mode and 'primary' variant when hovered\n * @cssprop --wcs-chip-dismissible-primary-color-pressed - Text color of the chip with 'dismissible' mode and 'primary' variant when pressed\n * @cssprop --wcs-chip-dismissible-primary-color-disabled - Text color of the chip with 'dismissible' mode and 'primary' variant when disabled\n * @cssprop --wcs-chip-dismissible-primary-background-color - Background color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-background-color-hover - Background color of the chip with 'dismissible' mode and 'primary' variant when hovered\n * @cssprop --wcs-chip-dismissible-primary-background-color-pressed - Background color of the chip with 'dismissible' mode and 'primary' variant when pressed\n * @cssprop --wcs-chip-dismissible-primary-background-color-disabled - Background color of the chip with 'dismissible' mode and 'primary' variant when disabled\n *\n * @cssprop --wcs-chip-dismissible-secondary-button-focus-outline-color - Button focus outline color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-border-color - Border color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n * @cssprop --wcs-chip-dismissible-secondary-color - Text color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-color-disabled - Text color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n * @cssprop --wcs-chip-dismissible-secondary-background-color - Background color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color - Button background color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-hover - Button background color of the chip with 'dismissible' mode and 'secondary' variant when hovered\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-pressed - Button background color of the chip with 'dismissible' mode and 'secondary' variant when pressed\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-disabled - Button background color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n */\n@Component({\n    tag: 'wcs-chip',\n    styleUrl: 'chip.scss',\n    shadow: true\n})\nexport class Chip implements ComponentInterface {\n    @Element() el!: HTMLWcsChipElement;\n    /**\n     * Unique value representing the chip identifier in events.\n     */\n    @Prop() value: string;\n\n    /**\n     * Text label displayed on the chip.\n     */\n    @Prop() label: string;\n\n    /**\n     * If `true`, the chip is selected.\n     * This property is only used in 'selectable' mode.\n     */\n    @Prop({ reflect: true }) selected = false;\n\n    /**\n     * If `true`, the chip is open.\n     * This property is used to control the visibility of the chip in the dismissible mode.\n     * When the user clicks the dismiss icon, this property automatically becomes `false`, hiding the chip.\n     */\n    @Prop({ reflect: true }) open = true;\n\n    /**\n     * If `true`, the chip is disabled.\n     * The chip will not respond to click events and will not emit any events.\n     * This property is used in both 'selectable' and 'dismissible' modes.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Defines the visual style of the chip for the dismissible mode.\n     */\n    @Prop({ reflect: true }) variant: WcsChipVariant = 'primary';\n\n    /**\n     * Defines the mode of the chip.\n     * Can be 'selectable' or 'dismissible'.\n     * - 'selectable': The chip can be selected and emits an event when clicked.\n     * - 'dismissible': The chip can be dismissed (removed) and emits an event when the dismiss icon is clicked.\n     */\n    @Prop({ reflect: true }) mode: WcsChipMode = 'selectable';\n\n    /**\n     * Emitted when the chip is clicked in 'selectable' mode.\n     */\n    @Event() wcsChipSelectChange: EventEmitter<{ value: string; selected: boolean }>;\n\n    /**\n     * Emitted when the dismiss icon is clicked in 'dismissible' mode.\n     */\n    @Event() wcsChipDismiss: EventEmitter<{ value: string }>;\n\n\n    private select() {\n        this.selected = !this.selected; // Toggle the selected state\n        this.wcsChipSelectChange.emit({ value: this.value, selected: this.selected });\n    }\n\n    private dismiss() {\n        this.open = false;\n        this.wcsChipDismiss.emit({ value: this.value });\n\n        const nextChip = this.findAdjacentActionableChip('next');\n        if (nextChip) {\n            this.focusChip(nextChip);\n        } else {\n            const previousChip = this.findAdjacentActionableChip('previous');\n            if (previousChip) {\n                this.focusChip(previousChip)\n            };\n        }\n    }\n\n    private findAdjacentActionableChip(direction: ChipFocusDirection): HTMLWcsChipElement | null {\n        const getSibling = (el: Element) => direction === 'next' \n            ? el.nextElementSibling \n            : el.previousElementSibling;\n\n        let currentElement = getSibling(this.el);\n\n        while (currentElement) {\n            if (this.isActionableChip(currentElement)) {\n                return currentElement;\n            }\n            currentElement = getSibling(currentElement);\n        }\n\n        return null;\n    }\n\n    private isActionableChip(element: Element | null): element is HTMLWcsChipElement {\n        return element instanceof HTMLElement\n            && element.tagName === 'WCS-CHIP'\n            && !(element as HTMLWcsChipElement).disabled;\n    }\n\n    private focusChip(chip: HTMLWcsChipElement): void {\n        if (chip.mode === 'selectable') {\n            chip.focus();\n        } else if (chip.mode === 'dismissible') {\n            chip.shadowRoot?.querySelector('button')?.focus();\n        }\n    }\n\n    private handleClick() {\n        if (this.disabled || this.mode !== 'selectable') {\n            return;\n        }\n        this.select();\n    };\n\n    private handleDismiss = (event: Event) => {\n        if (this.disabled || this.mode !== 'dismissible') {\n            return;\n        }\n        event.stopPropagation(); // Prevent the click event from bubbling up to the chip click handler\n        this.dismiss();\n    };\n\n    private handleKeydown(ev) {\n        if (this.disabled) {\n            return;\n        }\n        if (this.mode === 'selectable') {\n            if (ev.key === 'Enter' || ev.key === ' ') {\n                this.select();\n            }\n        } else if (this.mode === 'dismissible') {\n            if (ev.key === 'Delete' || ev.key === 'Backspace') {\n                this.dismiss();\n            }\n        }\n    }\n\n    render() {\n        const commonProps = {\n            'aria-disabled': this.disabled ? 'true' : null\n        };\n\n        if (this.mode === 'selectable') {\n            return (\n                <Host\n                    {...commonProps}\n                    role=\"checkbox\"\n                    aria-checked={this.selected ? 'true' : 'false'}\n                    tabindex={this.disabled ? -1 : 0}\n                    onClick={this.handleClick.bind(this)}\n                    onKeyDown={this.handleKeydown.bind(this)}\n                >\n                    {this.selected && (\n                        <svg class=\"check-icon\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"\n                             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M23.712 8.3011L8.0292 23.7157C7.6356 24.095 6.9984 24.095 6.6264 23.7157L0.288 17.4955C-0.096 17.1226 -0.096 16.496 0.288 16.1192L2.1552 14.2739C2.5536 13.9036 3.1776 13.9036 3.5532 14.2739L6.6264 17.2764C6.9984 17.6583 7.6356 17.6583 8.0292 17.2764L20.4384 5.08081C20.8236 4.70662 21.4536 4.70662 21.8364 5.08081L23.712 6.91841C24.096 7.29516 24.096 7.91923 23.712 8.3011Z\"\n                                fill=\"white\" />\n                        </svg>\n                    )}\n                    <span>{this.label}</span>\n                </Host>\n            );\n        } else {\n            return (\n                <Host\n                    {...commonProps}\n                >\n                    <span>{this.label}</span>\n                    <button\n                        aria-label={`Supprimer ${this.label}`}\n                        disabled={this.disabled}\n                        onClick={this.handleDismiss.bind(this)}\n                        onKeyDown={this.handleKeydown.bind(this)}\n                    >\n                        <svg class=\"dismiss-icon\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"\n                             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M14.2656 12.0298L19.588 6.72176C20.1908 6.12119 20.1061 5.05213 19.5034 4.45043C18.9006 3.84986 17.914 3.84986 17.3112 4.45043L11.9887 9.7596L6.66743 4.45043C6.06351 3.84986 5.07691 3.84986 4.47412 4.45043C3.87132 5.05213 3.82843 6.07942 4.43122 6.68112L9.75365 11.9892L4.43122 17.2983C3.82843 17.8989 3.87132 18.9262 4.47412 19.5279C5.07691 20.1296 6.10527 20.1702 6.70807 19.5685L12.0305 14.2605L17.3112 19.5279C17.914 20.1296 18.9006 20.1296 19.5034 19.5279C20.1061 18.9262 20.149 17.8989 19.5462 17.2983L14.2656 12.0298Z\"\n                                fill=\"currentColor\" />\n                        </svg>\n                    </button>\n                </Host>\n            );\n        }\n    }\n}\n\n"],"version":3}

package/dist/cjs/wcs-com-nav-category.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-2f1a8ddc.js');
-const comNavUtils = require('./com-nav-utils-ff4f0bef.js');
+const helpers = require('./helpers-eaafd588.js');
+const comNavUtils = require('./com-nav-utils-e081e998.js');
 
 const comNavCategoryCss = ":host{--wcs-com-nav-category-label-mobile-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-category-label-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-label-font-size:var(--wcs-semantic-font-size-label-1);--wcs-com-nav-category-label-desktop-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-label-desktop-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-label-desktop-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-category-label-desktop-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-category-item-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-item-mobile-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-item-mobile-spacing-top:var(--wcs-semantic-spacing-large);--wcs-com-nav-category-item-mobile-spacing-left:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-category-item-mobile-gap:calc(var(--wcs-semantic-spacing-base) * 1.5);--wcs-com-nav-category-desktop-menu-background-color:transparent;--wcs-com-nav-category-desktop-menu-border-left-width:var(--wcs-semantic-border-width-default);--wcs-com-nav-category-desktop-menu-border-left-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-category-desktop-menu-background-indicator-color:transparent;--wcs-com-nav-category-desktop-menu-gap:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-category-item-desktop-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-item-desktop-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-desktop-menu-padding-top:50px;--wcs-com-nav-category-desktop-menu-padding-bottom:50px;--wcs-com-nav-category-desktop-menu-padding-left:50px;--wcs-com-nav-category-desktop-menu-padding-right:0;display:block;height:fit-content}:host button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:initial}:host .label-container{margin:0;font-size:var(--wcs-com-nav-category-label-font-size);font-weight:var(--wcs-com-nav-category-label-mobile-font-weight);display:block;color:var(--wcs-com-nav-category-label-mobile-color)}:host .label-container .arrow-container{display:none}:host .label-container .arrow-icon{display:none}:host .item-container{display:flex;flex-direction:column;gap:var(--wcs-com-nav-category-item-mobile-gap);margin-left:var(--wcs-com-nav-category-item-mobile-spacing-left);margin-top:var(--wcs-com-nav-category-item-mobile-spacing-top)}:host .item-container ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-category-item-mobile-color);font-weight:var(--wcs-com-nav-category-item-mobile-font-weight)}@media (min-width: 576px){:host{padding-bottom:unset}:host .item-container:not([data-open]){display:none}:host button{cursor:pointer}:host .label-container{display:flex;align-items:center;gap:var(--wcs-com-nav-category-label-desktop-gap);font-weight:var(--wcs-com-nav-category-label-desktop-font-weight);cursor:pointer;user-select:none;padding-left:unset;color:var(--wcs-com-nav-category-label-desktop-color)}:host .label-container .arrow-icon{display:inline-block;font-family:icons;font-size:0.6rem;line-height:1;box-sizing:border-box}:host .label-container .arrow-container{display:unset}:host .label-container:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-label-desktop-focus-outline-color);outline-offset:0.1rem;border-radius:5px}@supports not selector(.label-container:focus-visible){:host .label-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-label-desktop-focus-outline-color);outline-offset:0.1rem;border-radius:5px}}:host button.label-container[aria-expanded=true]:after{position:absolute;left:calc(50% + var(--wcs-com-content-max-width) / 8 - 0.5625rem);z-index:2;display:block;width:1.125rem;height:1.125rem;content:\"\";background-color:var(--wcs-com-nav-category-desktop-menu-background-indicator-color);transform:rotate(45deg)}:host .item-container[data-open]{position:absolute;border-left:solid var(--wcs-com-nav-category-desktop-menu-border-left-width) var(--wcs-com-nav-category-desktop-menu-border-left-color);left:calc(50% + var(--wcs-com-content-max-width) / 8);top:0;right:0;padding:var(--wcs-com-nav-category-desktop-menu-padding-top) var(--wcs-com-nav-category-desktop-menu-padding-right) var(--wcs-com-nav-category-desktop-menu-padding-bottom) var(--wcs-com-nav-category-desktop-menu-padding-left);background-blend-mode:multiply;background-color:var(--wcs-com-nav-category-desktop-menu-background-color);box-sizing:border-box;height:100%;margin-left:unset;margin-top:unset;display:flex;flex-direction:column;gap:var(--wcs-com-nav-category-desktop-menu-gap);align-items:start}:host .item-container[data-open] ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-category-item-desktop-color);font-weight:var(--wcs-com-nav-category-item-desktop-font-weight)}:host .item-container[data-open] ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-item-desktop-color);outline-offset:0.1rem;border-radius:2px}}";
 const WcsComNavCategoryStyle0 = comNavCategoryCss;
@@ -86,9 +86,9 @@ const ComNavCategory = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: '0b5d69d30228c1585c17d74bf8183f6fe91c1696', role: "listitem", onClick: evt => this.onClick(evt) }, this.currentActiveSizing === 'mobile' ?
+        return (index.h(index.Host, { key: 'cab005c22a1390a75127cc8ee4691a90fb06443c', role: "listitem", onClick: evt => this.onClick(evt) }, this.currentActiveSizing === 'mobile' ?
             index.h("h3", { role: "presentation", class: "label-container" }, index.h("span", { class: "label" }, this.label))
-            : index.h("button", Object.assign({ class: "label-container", "aria-controls": this.categoryItemsId, "aria-expanded": this.categoryOpen ? 'true' : 'false', ref: (el) => (this.nativeButton = el), onClick: _ => this.categoryOpen = !this.categoryOpen }, this.inheritedAttributes), index.h("span", { class: "label" }, this.label), index.h("span", { class: "arrow-container" }, index.h("span", { "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))), index.h("div", { key: '8269a3a8eb304343e6beef3cfde1e20976e02bbb', class: "item-container", role: "list", "aria-label": this.label, id: this.categoryItemsId, tabIndex: -1, "data-open": this.categoryOpen, onKeyDown: evt => this.handleCategoryItemsKeyDown(evt), onClick: (evt) => this.handleItemClick(evt) }, index.h("slot", { key: '0cd3f5916499f4e14d554e7fe963a2a384c4b39d' }))));
+            : index.h("button", Object.assign({ class: "label-container", "aria-controls": this.categoryItemsId, "aria-expanded": this.categoryOpen ? 'true' : 'false', ref: (el) => (this.nativeButton = el), onClick: _ => this.categoryOpen = !this.categoryOpen }, this.inheritedAttributes), index.h("span", { class: "label" }, this.label), index.h("span", { class: "arrow-container" }, index.h("span", { "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))), index.h("div", { key: '2e6b6e969a0fff4bc6e9ce70ffeb0dc0cb599865', class: "item-container", role: "list", "aria-label": this.label, id: this.categoryItemsId, tabIndex: -1, "data-open": this.categoryOpen, onKeyDown: evt => this.handleCategoryItemsKeyDown(evt), onClick: (evt) => this.handleItemClick(evt) }, index.h("slot", { key: 'ee841a45fa5d9ec6a80c8015246551c4eb793dcf' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/wcs-com-nav-item.cjs.entry.js

@@ -16,7 +16,7 @@ const ComNavItem = class {
         this.wcsClickOnFinalAction.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '25690c3eecac76d2b29b0aeda90f5e1bf5fd0b22', role: "listitem" }, index.h("slot", { key: '236d67ffd9fefb7650d2b67cee685852030adb4b' }), index.h("span", { key: '2ef478d77dc28d169817500145c8d9df525bd439', class: "arrow-container" }, index.h("span", { key: '0fafbba11e817663ad7e18ff6947cdbd07494f69', "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))));
+        return (index.h(index.Host, { key: 'f99424e8faebbae16b206f49c003a34bd6824b6a', role: "listitem" }, index.h("slot", { key: 'f6b8dc69ba05d1c9ca8785b2905218612e9e6b8e' }), index.h("span", { key: 'b24f65c8fd58dcccca47d55ed18ab74f6572b122', class: "arrow-container" }, index.h("span", { key: '7f7e3cabd2006d703474969edfca277d0fc6ce0c', "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))));
     }
 };
 ComNavItem.style = WcsComNavItemStyle0;

package/dist/cjs/wcs-com-nav-submenu.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-2f1a8ddc.js');
-const comNavUtils = require('./com-nav-utils-ff4f0bef.js');
+const helpers = require('./helpers-eaafd588.js');
+const comNavUtils = require('./com-nav-utils-e081e998.js');
 
 const comNavSubmenuCss = ":host{--wcs-com-nav-submenu-button-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-button-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-submenu-button-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-submenu-button-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-submenu-desktop-menu-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-submenu-desktop-menu-text-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-desktop-menu-link-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-desktop-menu-heading-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-submenu-desktop-menu-description-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-desktop-menu-description-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-submenu-desktop-menu-padding:50px;--wcs-com-nav-submenu-desktop-menu-items-padding-left:50px;--wcs-com-nav-submenu-desktop-menu-items-padding-right:80px;--wcs-com-nav-submenu-mobile-text-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-mobile-link-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-mobile-spacing-top:var(--wcs-semantic-spacing-large);--wcs-com-nav-submenu-mobile-spacing-bottom:var(--wcs-semantic-spacing-large);--wcs-com-nav-submenu-mobile-spacing-left:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-submenu-mobile-gap:calc(var(--wcs-semantic-spacing-base) * 3);display:block;padding-bottom:var(--wcs-com-nav-submenu-mobile-spacing-bottom)}:host button{display:block;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host .arrow-icon{display:none}:host .arrow-container{display:none}:host .label{text-transform:uppercase;font-size:16px;cursor:unset;font-weight:var(--wcs-com-nav-submenu-button-font-weight);color:var(--wcs-com-nav-submenu-button-color);text-decoration:none}:host .drawer{display:contents}:host .drawer-container{display:contents}:host .drawer-description{display:none}:host .menu-items{display:flex;flex-direction:column;gap:var(--wcs-com-nav-submenu-mobile-gap)}:host .menu-items ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-submenu-mobile-text-color);font-weight:var(--wcs-com-nav-submenu-mobile-link-font-weight)}@media (max-width: 575px){:host .menu-button{margin:0}:host .menu-items{margin-top:var(--wcs-com-nav-submenu-mobile-spacing-top);margin-left:var(--wcs-com-nav-submenu-mobile-spacing-left)}}@media (min-width: 576px){:host{height:100%;padding-bottom:unset}:host .menu-button{display:flex;align-items:center;height:100%;cursor:pointer;user-select:none;font-weight:unset;padding-left:unset}:host .menu-button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-button-focus-outline-color);outline-offset:0.1rem;border-radius:2px}@supports not selector(.menu-button:focus-visible){:host{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-button-focus-outline-color);outline-offset:0.1rem;border-radius:2px}}:host .label{text-transform:unset;cursor:pointer}:host .arrow-icon{display:inline-block;font-family:icons;font-size:0.6rem;line-height:1;box-sizing:border-box}:host .arrow-container{display:unset;margin-left:var(--wcs-com-nav-submenu-button-gap)}:host .arrow-icon:not([data-open]){transform:rotate(90deg)}:host .arrow-icon[data-open]{transform:rotate(-90deg)}:host .drawer{display:none;position:absolute;top:calc(var(--wcs-com-nav-menu-bar-height) + var(--wcs-com-nav-border-width));z-index:8888;left:0;width:100%;box-sizing:border-box;padding:var(--wcs-com-nav-submenu-desktop-menu-padding);background-color:var(--wcs-com-nav-submenu-desktop-menu-background-color);color:var(--wcs-com-nav-submenu-desktop-menu-text-color);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.08)}:host .drawer-content{display:flex;justify-content:space-between;max-width:62.5%;flex:1}:host .drawer-content div:first-child{flex:0.8}:host .drawer-content div{max-width:260px}:host .menu-items{padding:0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-right) 0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-left);display:flex;flex-direction:column;align-items:flex-end}:host .menu-items ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-submenu-desktop-menu-text-color);font-weight:var(--wcs-com-nav-submenu-desktop-menu-link-font-weight)}:host .menu-items ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-desktop-menu-text-color);outline-offset:0.1rem;border-radius:2px}:host .drawer-container{display:flex;max-width:var(--wcs-com-content-max-width);margin:0 auto}:host .drawer-container h3{margin:0 0 var(--wcs-com-nav-submenu-desktop-menu-description-gap) 0;font-size:1.5rem;line-height:1.25;font-weight:var(--wcs-com-nav-submenu-desktop-menu-heading-font-weight)}:host .drawer-container p{margin-top:0;margin-bottom:1rem;font-weight:var(--wcs-com-nav-submenu-desktop-menu-description-font-weight);font-size:1rem;line-height:1.375}:host .drawer[data-open]{display:block}:host .drawer-description{display:block}}";
 const WcsComNavSubmenuStyle0 = comNavSubmenuCss;
@@ -108,9 +108,9 @@ const ComNavSubmenu = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: '935e78a3daf751160c21e7375e86be186bcfdec9', onClick: evt => this.onClick(evt), role: "listitem", "data-open": this.menuOpen }, this.currentActiveSizing === 'mobile' ?
+        return (index.h(index.Host, { key: 'e6de47cc3e8d11be47b32229dc74a58aaf2f23c4', onClick: evt => this.onClick(evt), role: "listitem", "data-open": this.menuOpen }, this.currentActiveSizing === 'mobile' ?
             index.h("h2", { role: "presentation", class: "menu-button" }, index.h("span", { class: "label" }, this.label), index.h("span", { class: "arrow-container" }, index.h("span", { class: "arrow-icon", "data-open": this.menuOpen }, "\uF107")))
-            : index.h("button", Object.assign({ onClick: _ => this.menuOpen = !this.menuOpen, "aria-expanded": this.menuOpen ? 'true' : 'false', "aria-controls": this.menuItemsId, class: "menu-button", ref: (el) => (this.nativeButton = el) }, this.inheritedAttributes), index.h("span", { class: "label" }, this.label), index.h("span", { class: "arrow-container" }, index.h("span", { "aria-hidden": "true", class: "arrow-icon", "data-open": this.menuOpen }, "\uF107"))), index.h("div", { key: '1e654c7f9a74f3e6bb92e9cd3589ea3b7ee9ed99', class: "drawer", "data-open": this.menuOpen, tabIndex: -1 }, index.h("div", { key: '1c2d8a56d7e91071fcb43f537173850ecf62fb28', class: "drawer-container" }, index.h("div", { key: '4880e09bcf8e06464db2984ac43dbd01ee9a0af3', class: "drawer-content" }, index.h("div", { key: 'd2e6e97442a73ff8d24ba4165587fd544b2ff853', class: "drawer-description" }, index.h("h3", { key: '04b20b11befc1dc63e719fda8dda51fe248e93cd' }, this.panelTitle), index.h("p", { key: '69810728510063a77b97845d91f684fe2abfa347' }, this.panelDescription)), index.h("div", { key: 'ed35406cc3a5ced0155181239dc96b4afcaa2871', role: "list", "aria-label": this.label, id: this.menuItemsId, class: "menu-items", onClick: (evt) => this.handleMenuItemsClick(evt), onKeyDown: evt => this.handleMenuItemsKeyDown(evt) }, index.h("slot", { key: '3059b3ccbef8b9483e05e4d400b1643d9ab23273' })))))));
+            : index.h("button", Object.assign({ onClick: _ => this.menuOpen = !this.menuOpen, "aria-expanded": this.menuOpen ? 'true' : 'false', "aria-controls": this.menuItemsId, class: "menu-button", ref: (el) => (this.nativeButton = el) }, this.inheritedAttributes), index.h("span", { class: "label" }, this.label), index.h("span", { class: "arrow-container" }, index.h("span", { "aria-hidden": "true", class: "arrow-icon", "data-open": this.menuOpen }, "\uF107"))), index.h("div", { key: '99667d527d33591f69d9591ca039a8b416322bc5', class: "drawer", "data-open": this.menuOpen, tabIndex: -1 }, index.h("div", { key: 'cece9395bfb103342f9f54fc89bc207ccb18db9c', class: "drawer-container" }, index.h("div", { key: '19482a5a7393852da570431292c0f0cde86cfdcd', class: "drawer-content" }, index.h("div", { key: '85387b5371209178cb451065ddd9124143bb0112', class: "drawer-description" }, index.h("h3", { key: '4692b2d757408142da7357cddcfb55f8efa154e7' }, this.panelTitle), index.h("p", { key: 'e21e9eda294bac55a85e16e82178e9ad127907f4' }, this.panelDescription)), index.h("div", { key: '984f302624daf4341fbb3236cde16ff7e640f458', role: "list", "aria-label": this.label, id: this.menuItemsId, class: "menu-items", onClick: (evt) => this.handleMenuItemsClick(evt), onKeyDown: evt => this.handleMenuItemsKeyDown(evt) }, index.h("slot", { key: '286906e6ab84bed9d990eb4cbb10fea119a9d060' })))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/wcs-com-nav.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const comNavUtils = require('./com-nav-utils-ff4f0bef.js');
-const helpers = require('./helpers-2f1a8ddc.js');
+const comNavUtils = require('./com-nav-utils-e081e998.js');
+const helpers = require('./helpers-eaafd588.js');
 
 const comNavCss = ":host{--wcs-com-nav-menu-bar-height:calc(var(--wcs-semantic-size-base) * 8);--wcs-com-nav-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-border-width:var(--wcs-semantic-border-width-default);--wcs-com-nav-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-app-name-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-app-name-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-app-name-font-size:var(--wcs-semantic-font-size-heading-5);--wcs-com-nav-app-name-line-height:var(--wcs-semantic-font-line-height-large);--wcs-com-nav-item-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-vertical-padding:0;--wcs-com-nav-horizontal-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-gap:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-menu-icon-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-mobile-menu-icon-gap:calc(var(--wcs-semantic-spacing-base) * 2);--wcs-com-nav-mobile-menu-icon-margin-left:var(--wcs-semantic-spacing-base);--wcs-com-nav-mobile-menu-icon-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-com-nav-menu-bar-gap:calc(var(--wcs-semantic-spacing-base) * 5);--wcs-com-nav-menu-bar-margin-left:calc(var(--wcs-semantic-spacing-base) * 6.25);display:block;position:relative;height:var(--wcs-com-nav-menu-bar-height);border-bottom:var(--wcs-com-nav-border-width) solid var(--wcs-com-nav-border-color)}:host .container{padding:var(--wcs-com-nav-vertical-padding) var(--wcs-com-nav-horizontal-padding);height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between}:host .container nav{display:flex;align-items:center}:host .container-left{display:flex;height:100%;align-items:center;flex-direction:row}:host .container-right{display:flex;align-items:center}:host .app-name{font-weight:var(--wcs-com-nav-app-name-font-weight);font-size:var(--wcs-com-nav-app-name-font-size);line-height:var(--wcs-com-nav-app-name-line-height);color:var(--wcs-com-nav-app-name-color)}:host .app-name ::slotted(a){user-select:none;cursor:pointer;text-decoration:none;color:inherit;font-weight:inherit}:host .app-name ::slotted(a:focus-visible){outline:none}:host .app-name:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}:host .menu-bar{display:none}:host #mobile-menu-icon{display:flex;align-items:center;flex-wrap:nowrap;color:var(--wcs-com-nav-mobile-menu-icon-color);padding-left:var(--wcs-com-nav-mobile-menu-icon-gap);margin-left:var(--wcs-com-nav-mobile-menu-icon-margin-left);border-left:solid 1px var(--wcs-com-nav-mobile-menu-icon-border-color)}:host #mobile-menu-icon:focus{outline:none}:host #mobile-menu-icon:focus-visible::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(#mobile-menu-icon:focus-visible::after){:host #mobile-menu-icon:focus::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}:host button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host #mobile-menu-icon:after{font-family:icons;font-size:18px;cursor:pointer;content:\"\\f198\";line-height:1;box-sizing:border-box}:host #mobile-menu-icon[aria-expanded=true]:after{content:\"\\f129\"}:host .mobile-overlay{display:none}:host .mobile-overlay[data-mobile-open]{padding:var(--wcs-com-nav-mobile-overlay-padding);position:absolute;top:var(--wcs-com-nav-menu-bar-height);left:0;right:0;display:flex;flex-direction:column;gap:var(--wcs-com-nav-mobile-overlay-gap);z-index:9999;background-color:var(--wcs-com-nav-background-color)}:host .mobile-overlay[data-mobile-open] ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}@media (min-width: 576px){:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width)}:host nav{height:100%}:host .menu-bar{display:flex;align-items:center;height:100%;margin-left:var(--wcs-com-nav-menu-bar-margin-left)}:host .menu-bar ::slotted(*:not(:first-child)){margin-left:var(--wcs-com-nav-menu-bar-gap)}:host .menu-bar ::slotted(wcs-com-nav-item){height:100%;color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}:host .menu-bar ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:0.1rem;border-radius:2px}:host #mobile-menu-icon{display:none}:host .mobile-overlay{display:none !important}}";
 const WcsComNavStyle0 = comNavCss;
@@ -57,11 +57,11 @@ const ComNav = class {
     }
     render() {
         const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;
-        return (index.h(index.Host, { key: 'b39ff3dbd6d304ad0252e0fcfd2e0c5716b666db' }, index.h("div", { key: 'f84b73c9cee6295a7776576afeb61b65b71ea34e', class: "container" }, index.h("div", { key: 'a39b867e9d102abb4e4c13503a544681cd9b7fd8', class: "container-left" }, index.h("div", { key: '49db5dd80f097a9b2ccaf39fc64be9f6100108be', class: "app-name" }, this.appName, index.h("slot", { key: '3cfe05e6e510826ffd2168e6edc3380bc92ad459', name: "app-name" })), this.currentActiveSizing === 'desktop' ?
+        return (index.h(index.Host, { key: '0ad6128d41f1a09da5bfc1668a9c5ca88e0a10dc' }, index.h("div", { key: '3c6fc5016fe04299461271e9d7ee5d52198e0e94', class: "container" }, index.h("div", { key: '229cb6d60903fd5d7998db5079589a67af95f87c', class: "container-left" }, index.h("div", { key: '59d5ece9de29819279b2601646e5a95e48f5113d', class: "app-name" }, this.appName, index.h("slot", { key: '4b205236b381eb02b8aeaf7149f00c2ccf24f1a0', name: "app-name" })), this.currentActiveSizing === 'desktop' ?
             index.h("nav", Object.assign({ role: "navigation" }, this.inheritedAttributes), index.h("div", { class: "menu-bar", role: "list" }, this.currentActiveSizing === 'desktop'
                 ? index.h("slot", null)
                 : null))
-            : null), index.h("div", { key: '83496cccd32eec07f5a508dbf36b591442e668e2', class: "container-right" }, index.h("slot", { key: 'cf68946afcefa0b77fb57019f9734e5ff1e763aa', name: "actions" }), this.currentActiveSizing === 'mobile' ?
+            : null), index.h("div", { key: '49ee0dd4b30bab8e83707380daee66220dd74117', class: "container-right" }, index.h("slot", { key: '3cf89cb129b2a59221578f5da6410965fb3f4da2', name: "actions" }), this.currentActiveSizing === 'mobile' ?
             index.h("nav", Object.assign({ id: "wcs-com-nav-mobile-menu", role: "navigation" }, this.inheritedAttributes), index.h("button", { id: "mobile-menu-icon", "aria-label": menuAriaLabel, "aria-expanded": this.mobileMenuOpen ? "true" : "false", "aria-controls": "wcs-com-nav-mobile-menu", onClick: () => this.mobileMenuIconClick() }), this.currentActiveSizing === 'mobile'
                 ? index.h("div", { class: "mobile-overlay", "data-mobile-open": this.mobileMenuOpen, role: "list" }, index.h("slot", null))
                 : null)

package/dist/cjs/wcs-counter.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-2f1a8ddc.js');
+const helpers = require('./helpers-eaafd588.js');
 
 const counterCss = "@keyframes spin-animation-up{0%{transform:translateY(0);transform-origin:center;opacity:1}50%{opacity:0.5}100%{transform:translateY(30px);transform-origin:center;opacity:1}}@keyframes spin-animation-down{0%{transform:translateY(0);transform-origin:center;opacity:1}50%{opacity:0.5}100%{transform:translateY(-30px);transform-origin:center;opacity:1}}:host{--wcs-counter-border-radius:var(--wcs-semantic-border-radius-full);--wcs-counter-value-color-default:var(--wcs-semantic-color-text-primary);--wcs-counter-value-color-disabled:var(--wcs-semantic-color-text-tertiary);--wcs-counter-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-counter-height-m:var(--wcs-semantic-size-m);--wcs-counter-height-l:var(--wcs-semantic-size-l);--wcs-counter-font-size-m:var(--wcs-semantic-font-size-m);--wcs-counter-font-size-l:var(--wcs-semantic-font-size-l);--wcs-counter-padding-m:var(--wcs-semantic-spacing-small);--wcs-counter-padding-l:var(--wcs-semantic-spacing-base);--wcs-counter-background-color:var(--wcs-semantic-color-background-surface-secondary);--wcs-counter-gap-size-m:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-counter-gap-size-l:calc(2 * var(--wcs-semantic-spacing-base));--wcs-counter-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-counter-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-counter-padding:var(--wcs-counter-padding-m);--wcs-counter-height:var(--wcs-counter-height-m);--wcs-counter-font-size:var(--wcs-counter-font-size-m);--wcs-counter-gap:var(--wcs-counter-gap-size-m);display:flex}:host .counter{box-sizing:border-box;height:var(--wcs-counter-height);font-family:var(--wcs-font-sans-serif);font-size:var(--wcs-counter-font-size);font-weight:var(--wcs-counter-font-weight);color:var(--wcs-counter-value-color-default);display:flex;align-items:center;padding:var(--wcs-counter-padding);width:fit-content;overflow:hidden;border-radius:var(--wcs-counter-border-radius);background-color:var(--wcs-counter-background-color);background-clip:padding-box;gap:var(--wcs-counter-gap)}:host .counter:focus-within{outline:none}:host .counter:has(.current-value:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);outline-offset:0;border-radius:var(--wcs-counter-border-radius)}@supports not selector(&:has(.current-value:focus-visible)){:host .counter:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);outline-offset:0;border-radius:var(--wcs-counter-border-radius)}}:host .counter-container{height:var(--wcs-counter-height);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}:host .outliers{position:absolute}:host #outlier-down{top:calc(var(--wcs-counter-height) / 2 * -1)}:host #outlier-up{bottom:calc(var(--wcs-counter-height) / 2 * -1)}:host .current-value{outline:none}:host .animate-up{animation:spin-animation-up var(--wcs-counter-transition-duration) ease-in-out}:host .animate-down{animation:spin-animation-down var(--wcs-counter-transition-duration) ease-in-out}:host [hidden]{opacity:0}:host([size=m]){--wcs-counter-padding:var(--wcs-counter-padding-m);--wcs-counter-height:var(--wcs-counter-height-m);--wcs-counter-font-size:var(--wcs-counter-font-size-m);--wcs-counter-gap:var(--wcs-counter-gap-size-m)}:host([size=l]){--wcs-counter-padding:var(--wcs-counter-padding-l);--wcs-counter-height:var(--wcs-counter-height-l);--wcs-counter-font-size:var(--wcs-counter-font-size-l);--wcs-counter-gap:var(--wcs-counter-gap-size-l)}:host([disabled]){cursor:not-allowed}:host([disabled]) .counter{color:var(--wcs-counter-value-color-disabled)}";
 const WcsCounterStyle0 = counterCss;
@@ -150,7 +150,7 @@ const Counter = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '6f1d46e231cc1f88a92a2faa0122e1ed7b9dd834' }, index.h("div", { key: 'c3ed2c944c2a8f61ab862411b1d503a84ac37ae4', class: "counter" }, index.h("wcs-button", { key: 'c0d0d41e07a99ef0730b22d029529e629ff2f8d3', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.min }, index.h("wcs-mat-icon", { key: '5003db6a007f8ede51d567a76ea18160fdb60949', icon: "remove", size: "s" })), index.h("div", { key: 'ae3b0ca61a95fe908583df73748b7e7d19242fd0', class: "counter-container", ref: input => this.counterContainer = input }, index.h("span", { key: '499a0d0ff7f38fcae6664b118991aeb39f5d6034', id: "outlier-down", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue - this.step), index.h("span", Object.assign({ key: '62cab421b796106f0b2957e4d8445266bd6ba754', tabindex: this.disabled ? -1 : 0, role: "spinbutton", ref: (el) => this.spinButton = el, class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-disabled": this.disabled ? 'true' : null, "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.inheritedAttributes), this.displayedValue), index.h("span", { key: '339b6949d2b64262085f7bda19897f9533166cb4', id: "outlier-up", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue + this.step)), index.h("wcs-button", { key: 'ee77cee6c9d08225c1844d1c4703ea6868c054da', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.max }, index.h("wcs-mat-icon", { key: 'b1b6cc395186ee871801d47ad2b9b62791f64b29', icon: "add", size: "s" })))));
+        return (index.h(index.Host, { key: '4043c155f8c67913d62318235aca68123f9746b6' }, index.h("div", { key: 'c3207a199646cba8f00ec1c942515c0888a64234', class: "counter" }, index.h("wcs-button", { key: 'ff7d18184fba7ff20fcaf59539ad379310f8ddc2', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.min }, index.h("wcs-mat-icon", { key: '6749957c0b3d7ed71552bac6e57f7b1edcc2b30a', icon: "remove", size: "s" })), index.h("div", { key: 'ed9f5e4410f0858b2ac82b5931bc8195fb98eb7f', class: "counter-container", ref: input => this.counterContainer = input }, index.h("span", { key: 'e5ec58628efa9cd02ed824eec9f1f2e9773e24f1', id: "outlier-down", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue - this.step), index.h("span", Object.assign({ key: '27100d8f18b1325dfbab458b8465ce927c21682f', tabindex: this.disabled ? -1 : 0, role: "spinbutton", ref: (el) => this.spinButton = el, class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-disabled": this.disabled ? 'true' : null, "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.inheritedAttributes), this.displayedValue), index.h("span", { key: '7129d4872e064d799dd654975e112f4200ebb141', id: "outlier-up", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue + this.step)), index.h("wcs-button", { key: '9fffb1c68e9ab63336983f368aeea7a4f41cd5db', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.max }, index.h("wcs-mat-icon", { key: '4e07a2939e4c3c24d52bd7c6ff698526de781ca4', icon: "add", size: "s" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wcs-divider.cjs.entry.js

@@ -12,7 +12,7 @@ const Divider = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'cf4452e90a52e1bb419fec0db2d9c0838ad7b134' }));
+        return (index.h(index.Host, { key: 'd0fea091e2fa4aa557e56be65dcb604cd4340309' }));
     }
 };
 Divider.style = WcsDividerStyle0;

package/dist/cjs/wcs-dropdown-divider.cjs.entry.js

@@ -12,7 +12,7 @@ const DropdownDivider = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '52d90154f003445f1d62badde51df437a38d6f19', slot: "item", tabindex: "-1", "aria-hidden": "true" }));
+        return (index.h(index.Host, { key: 'f6099eab21640cea46aaeb81b78d744416550b62', slot: "item", tabindex: "-1", "aria-hidden": "true" }));
     }
 };
 DropdownDivider.style = WcsDropdownDividerStyle0;

package/dist/cjs/wcs-dropdown-header.cjs.entry.js

@@ -12,7 +12,7 @@ const DropdownHeader = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'a9f4cf33ebcc666bd3f703c3d51d17b655f28ed8', slot: "item", tabindex: "-1" }, index.h("slot", { key: 'ccabe9a8805d48d8b2bec9326b5aaa1b6338f06b' })));
+        return (index.h(index.Host, { key: '63465bc35721ca858aeb4465f0581151f372b532', slot: "item", tabindex: "-1" }, index.h("slot", { key: '7f064837e9840499d7916fde0ff67ef98ecf649a' })));
     }
 };
 DropdownHeader.style = WcsDropdownHeaderStyle0;

package/dist/cjs/wcs-dropdown-item.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-2f1a8ddc.js');
+const helpers = require('./helpers-eaafd588.js');
 
 const dropdownItemCss = "wcs-dropdown-item{--wcs-dropdown-item-height:var(--wcs-semantic-size-m);--wcs-dropdown-item-padding-horizontal:var(--wcs-semantic-spacing-base);--wcs-dropdown-item-padding-vertical:0;--wcs-dropdown-item-text-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-dropdown-item-text-color-default:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-dropdown-item-text-color-hover:var(--wcs-semantic-color-foreground-action-neutral-hover);--wcs-dropdown-item-text-color-press:var(--wcs-semantic-color-foreground-action-neutral-press);--wcs-dropdown-item-background-color-default:var(--wcs-semantic-color-background-action-neutral-default);--wcs-dropdown-item-background-color-hover:var(--wcs-semantic-color-background-action-neutral-hover);--wcs-dropdown-item-background-color-press:var(--wcs-semantic-color-background-action-neutral-press);--wcs-dropdown-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-dropdown-item-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-item-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);padding:0 var(--wcs-dropdown-item-padding-horizontal);font-weight:var(--wcs-dropdown-item-text-font-weight);cursor:pointer;color:var(--wcs-dropdown-item-text-color-default);height:var(--wcs-dropdown-item-height);display:flex;flex-direction:row;align-items:center;border-radius:var(--wcs-dropdown-item-border-radius);transition:background-color var(--wcs-dropdown-item-transition-duration) ease-in-out}wcs-dropdown-item:hover{color:var(--wcs-dropdown-item-text-color-hover);background-color:var(--wcs-dropdown-item-background-color-hover)}wcs-dropdown-item:active{color:var(--wcs-dropdown-item-text-color-press);background-color:var(--wcs-dropdown-item-background-color-press)}wcs-dropdown-item:focus-visible{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}@supports not selector(wcs-dropdown-item:focus-visible){wcs-dropdown-item:focus-within{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}}";
 const WcsDropdownItemStyle0 = dropdownItemCss;
@@ -24,7 +24,7 @@ const DropdownItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '70e0767afe5fe295df4292e356db89d555fa71a3', slot: "item", role: "menuitem", tabindex: "-1" }, index.h("slot", { key: '11cd674f89784aec6bfa1ba4d15f0fb0f25d976e' })));
+        return (index.h(index.Host, { key: '5833a19574cfb6d128e6fb015ec2124e3d40d8ce', slot: "item", role: "menuitem", tabindex: "-1" }, index.h("slot", { key: 'c679dd4325533514ebff2934bd7d21ff2f0c3e9c' })));
     }
 };
 DropdownItem.style = WcsDropdownItemStyle0;

package/dist/cjs/wcs-dropdown.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
 const selectArrow = require('./select-arrow-a8a47fe4.js');
-const helpers = require('./helpers-2f1a8ddc.js');
-const keyboardEvent = require('./keyboard-event-40ecdc27.js');
+const helpers = require('./helpers-eaafd588.js');
+const keyboardEvent = require('./keyboard-event-4890c60e.js');
 const popper = require('./popper-1b61df21.js');
 
 /**
@@ -55,7 +55,7 @@ function getActionForKeyboardEvent(event, currentState) {
     return [];
 }
 
-const dropdownCss = ":host{display:flex;position:relative;--wcs-dropdown-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-padding-empty:var(--wcs-semantic-spacing-large);--wcs-dropdown-plain-arrow-color:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-dropdown-stroked-arrow-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-dropdown-clear-arrow-color:var(--wcs-semantic-color-foreground-action-tertiary-default);--wcs-dropdown-arrow-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-dropdown-overlay-max-height:360px;--wcs-dropdown-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-dropdown-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-dropdown-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-dropdown-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-overlay-border-color:var(--wcs-semantic-color-border-secondary)}:host wcs-button{height:fit-content}:host svg{margin-right:-0.25rem}button{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;outline:0;outline-offset:0}button:focus-visible+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}@supports not selector(button:focus-visible + wcs-button){button:focus-within+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}}.wcs-button-content-wrapper{display:flex;align-items:center}.popover{display:none;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);border-radius:var(--wcs-dropdown-overlay-border-radius);background-color:var(--wcs-dropdown-overlay-background-color);z-index:9999}.show{display:block}.container{min-width:calc(10 * var(--wcs-semantic-size-base));border-radius:inherit;overflow:hidden;padding:var(--wcs-dropdown-overlay-padding);background-color:var(--wcs-dropdown-overlay-background-color)}:host([mode=clear]) .arrow{fill:var(--wcs-dropdown-clear-arrow-color)}:host([mode=stroked]) .arrow{fill:var(--wcs-dropdown-stroked-arrow-color)}:host([mode=plain]) .arrow{fill:var(--wcs-dropdown-plain-arrow-color)}:host([disabled]) .arrow{fill:var(--wcs-dropdown-arrow-color-disabled)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color)}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}#is-empty{display:block;width:20ch;padding:0 var(--wcs-dropdown-padding-empty)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}";
+const dropdownCss = ":host{display:flex;position:relative;--wcs-dropdown-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-padding-empty:var(--wcs-semantic-spacing-large);--wcs-dropdown-plain-arrow-color:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-dropdown-stroked-arrow-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-dropdown-clear-arrow-color:var(--wcs-semantic-color-foreground-action-tertiary-default);--wcs-dropdown-arrow-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-dropdown-overlay-max-height:360px;--wcs-dropdown-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-dropdown-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-dropdown-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-dropdown-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-overlay-border-color:var(--wcs-semantic-color-border-secondary)}:host wcs-button{height:fit-content}:host svg{margin-right:-0.25rem}button{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;outline:0;outline-offset:0}button:focus-visible+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}@supports not selector(button:focus-visible + wcs-button){button:focus-within+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}}.wcs-button-content-wrapper{display:flex;align-items:center}.popover{width:max-content;display:none;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);border-radius:var(--wcs-dropdown-overlay-border-radius);background-color:var(--wcs-dropdown-overlay-background-color);z-index:9999}.show{display:block}.container{min-width:calc(10 * var(--wcs-semantic-size-base));border-radius:inherit;overflow:hidden;padding:var(--wcs-dropdown-overlay-padding);background-color:var(--wcs-dropdown-overlay-background-color)}:host([mode=clear]) .arrow{fill:var(--wcs-dropdown-clear-arrow-color)}:host([mode=stroked]) .arrow{fill:var(--wcs-dropdown-stroked-arrow-color)}:host([mode=plain]) .arrow{fill:var(--wcs-dropdown-plain-arrow-color)}:host([disabled]) .arrow{fill:var(--wcs-dropdown-arrow-color-disabled)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color)}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}#is-empty{display:block;width:20ch;padding:0 var(--wcs-dropdown-padding-empty)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}";
 const WcsDropdownStyle0 = dropdownCss;
 
 const DROPDOWN_INHERITED_ATTRS = ['tabindex'];
@@ -227,7 +227,7 @@ const Dropdown = class {
         this.inheritedAttributes = Object.assign(Object.assign({}, helpers.inheritAriaAttributes(this.el)), helpers.inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS));
     }
     render() {
-        return (index.h(index.Host, { key: '96be2f9df0a80b4d6c88cf15419ff29cb001c695' }, index.h("button", Object.assign({ key: '562456822837e6ff61ed23569335e42ad4e36df9', id: "dropdown-button", "aria-controls": "menu", disabled: this.disabled, "aria-haspopup": "true", role: "button", "aria-expanded": this.expanded ? 'true' : 'false', ref: el => this.nativeButton = el, onClick: ($event) => this.onButtonClick($event), onBlur: ($event) => $event.stopImmediatePropagation() }, this.inheritedAttributes), "Dropdown"), index.h("wcs-button", { key: '66348725409b810219dd1bd4658611c63bbb5eb8', mode: this.mode, shape: this.shape, disabled: this.disabled, size: this.size, ref: el => this.wcsButton = el, "aria-hidden": "true", tabindex: -1, onClick: ($event) => this.onButtonClick($event), onBlur: (e) => e.stopImmediatePropagation() }, index.h("div", { key: '028e06637e35ecc14b66cf74fba32dc59d58121a', class: "wcs-button-content-wrapper" }, index.h("slot", { key: '7f7e2db54f9b5d3a20588c48c1d3fd6750187017', name: "placeholder" }), this.noArrow ? null : (index.h(selectArrow.SelectArrow, { up: this.expanded })))), index.h("div", { key: '7f6f4efe22cab63033b3e7775791856ed8e1b921', class: (this.expanded ? 'show ' : '') + 'popover', id: "menu", role: "menu", "aria-labelledby": "dropdown-button", tabindex: -1, ref: el => this.popoverDiv = el }, index.h("div", { key: 'ca7ce6adea1005d7126d4ae060ada55e9d3b6d70', role: "presentation", id: "arrow", "data-popper-arrow": true }), index.h("div", { key: '0f2a9e15df898550117743f855e7ee0746157ab1', role: "presentation", class: "container" }, index.h("slot", { key: '688fd29a894bae8aee4c848a9b07380c95302ca2', name: "item" }, index.h("span", { key: 'a80c902d26d7afed58e8a17646dac92473042fa4', id: "is-empty" }))))));
+        return (index.h(index.Host, { key: '38b0312bdb316b0fb3995ac7e04b3be6f2ae80b1' }, index.h("button", Object.assign({ key: '5842016e2ccb71db7f793e0376d9cc948591b9fb', id: "dropdown-button", "aria-controls": "menu", disabled: this.disabled, "aria-haspopup": "true", role: "button", "aria-expanded": this.expanded ? 'true' : 'false', ref: el => this.nativeButton = el, onClick: ($event) => this.onButtonClick($event), onBlur: ($event) => $event.stopImmediatePropagation() }, this.inheritedAttributes), "Dropdown"), index.h("wcs-button", { key: '463316eddbafe0beaa01eca79b06aeca9768d489', mode: this.mode, shape: this.shape, disabled: this.disabled, size: this.size, ref: el => this.wcsButton = el, "aria-hidden": "true", tabindex: -1, onClick: ($event) => this.onButtonClick($event), onBlur: (e) => e.stopImmediatePropagation() }, index.h("div", { key: '49a3210683fa548f2baaebbc6319e78e864ca7a2', class: "wcs-button-content-wrapper" }, index.h("slot", { key: 'b3fb4307c73fceddfc931342dc73069dbda28835', name: "placeholder" }), this.noArrow ? null : (index.h(selectArrow.SelectArrow, { up: this.expanded })))), index.h("div", { key: '4a0eeee69519eb8a336120c976594aac191abc4d', class: (this.expanded ? 'show ' : '') + 'popover', id: "menu", role: "menu", "aria-labelledby": "dropdown-button", tabindex: -1, ref: el => this.popoverDiv = el }, index.h("div", { key: '05a7807155799f0492c4bc180d3bf998055ba148', role: "presentation", id: "arrow", "data-popper-arrow": true }), index.h("div", { key: '61bc7b3fcda2d10d83a68eb40db1e95ec9db3c6f', role: "presentation", class: "container" }, index.h("slot", { key: '30e21e28fb8c0ce46b6da18cdf67b7c567897839', name: "item" }, index.h("span", { key: 'ea05bd99cd367f7be8aacea33286e95ebbe82cd9', id: "is-empty" }))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wcs-dropdown.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-dropdown.entry.cjs.js","mappings":"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","names":["keyboardShortcutFromKeyboardEvent","createPopper","clickTargetIsElementOrChildren","setOrRemoveAttribute","inheritAriaAttributes","inheritAttributes","h","Host","SelectArrow"],"sources":["src/components/dropdown/dropdown-keyboard-event.ts","src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { keyboardShortcutFromKeyboardEvent } from \"../../utils/keyboard-event\";\n\n// Possible Shortcuts\n\n// Dropdown button\n// ENTER : open menu, move focus to first item\n// SPACE : open menu, move focus to first item\n// DOWN_ARROW : open menu, move focus to first item\n// UP_ARROW : open menu, move focus to last item\n\n// Dropdown item\n// HOME : focus first item\n// END : focus last item\n// UP_ARROW : move focus to previous item\n// DOWN_ARROW : move focus to previous item\n// ESCAPE : close menu, set focus on the dropdown button\n// ENTER : activate the item, close menu, set focus to menu button (already handled via the wcsDropdownItemClick event)\n\nexport type KeyboardEventAssociatedAction = OpenMenu\n    | CloseMenu\n    | ClearFocus\n    | FocusItem;\n\ntype OpenMenu = {kind: 'OpenMenu'};\ntype CloseMenu = {kind: 'CloseMenu'};\n\n\ntype ClearFocus = {kind: 'ClearFocus'};\ntype FocusItem = {kind: 'FocusItem', target: 'next' | 'previous' | 'first' | 'last'};\n\n/**\n * We follow this pattern https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/\n * @param event\n * @param currentState\n * @param type\n */\nexport function getActionForKeyboardEvent(event: KeyboardEvent, currentState: 'closed' | 'opened'): KeyboardEventAssociatedAction[] {\n    const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);\n\n    if(keyboardShortcut === 'UNKNOWN') {\n        return [];\n    }\n\n    switch (currentState) {\n        case 'closed':\n            // We handle every available shortcut for the closed state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'last'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                case 'SPACE':\n                case 'ENTER':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                default:\n                    break;\n            }\n            break;\n        case 'opened':\n            // We handle every available shortcut for the opened state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'FocusItem', target: 'previous'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'FocusItem', target: 'next'}];\n                case 'HOME':\n                    return [{kind: 'FocusItem', target: 'first'}];\n                case 'END':\n                    return [{kind: 'FocusItem', target: 'last'}];\n                case 'ESCAPE':\n                case 'MAJ+TAB':\n                case 'TAB':\n                    return [{kind: 'CloseMenu'}];\n                default:\n                    break;\n            }\n            break;\n        default:\n            throw Error('Unknown error');\n    }\n    return [];\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: flex;\n    /*\n    * DO NOT REMOVE:\n    * The native button is absolutely positioned.\n    * This `position: relative` makes `wcs-dropdown` its containing block.\n    * Without it, the button can be laid out relative to another ancestor higher in the DOM,\n    * so when the browser focuses the native button it may scroll the window unexpectedly.\n    */\n    position: relative;\n\n    --wcs-dropdown-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    // Padding\n    --wcs-dropdown-padding-empty: var(--wcs-semantic-spacing-large);\n\n    // Arrow color\n    --wcs-dropdown-plain-arrow-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-dropdown-stroked-arrow-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-dropdown-clear-arrow-color: var(--wcs-semantic-color-foreground-action-tertiary-default);\n\n    --wcs-dropdown-arrow-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    // Overlay\n    --wcs-dropdown-overlay-max-height: 360px;\n    --wcs-dropdown-overlay-padding: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-dropdown-overlay-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-dropdown-overlay-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-dropdown-overlay-border-color: var(--wcs-semantic-color-border-secondary);\n\n    wcs-button {\n        height: fit-content;\n    }\n\n    svg {\n        margin-right: -0.25rem;\n    }\n}\n\n/* Visually hide the native button */\nbutton {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    outline: 0;\n    outline-offset: 0;\n}\n\nbutton:focus-visible + wcs-button {\n    @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n}\n\n@supports not selector(button:focus-visible + wcs-button) {\n    button:focus-within + wcs-button {\n        @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n    align-items: center;\n}\n\n.popover {\n    display: none;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n    border-radius: var(--wcs-dropdown-overlay-border-radius);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    min-width: calc(10 * var(--wcs-semantic-size-base));\n    border-radius: inherit;\n    overflow: hidden;\n    padding: var(--wcs-dropdown-overlay-padding);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n}\n\n:host([mode=clear]) {\n    // SVG arrow inside the button, on clear background\n    .arrow {\n        fill: var(--wcs-dropdown-clear-arrow-color);\n    }\n}\n\n:host([mode=stroked]) {\n    // SVG arrow inside the button, on stroked background\n    .arrow {\n        fill: var(--wcs-dropdown-stroked-arrow-color);\n    }\n}\n\n:host([mode=plain]) {\n    // SVG arrow inside the button, on primary background\n    .arrow {\n        fill: var(--wcs-dropdown-plain-arrow-color);\n    }\n}\n\n:host([disabled]) {\n    .arrow {\n        fill: var(--wcs-dropdown-arrow-color-disabled);\n    }\n}\n\n// Popover arrow\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n#is-empty {\n    display: block;\n    width: 20ch;\n    padding: 0 var(--wcs-dropdown-padding-empty);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport {\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n} from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport {\n    clickTargetIsElementOrChildren,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { getActionForKeyboardEvent, KeyboardEventAssociatedAction } from \"./dropdown-keyboard-event\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst DROPDOWN_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\n * dropdown.\n * \n * @slot placeholder - The slot containing the placeholder displayed in button\n * @slot item - The slot container the list of `wcs-dropdown-item` elements\n * \n * @cssprop --wcs-dropdown-outline-color-focus - Outline color of dropdown when focus it\n * \n * @cssprop --wcs-dropdown-plain-arrow-color - Color of the arrow indicator when the dropdown is plain\n * @cssprop --wcs-dropdown-stroked-arrow-color - Color of the arrow indicator when the dropdown is stroked\n * @cssprop --wcs-dropdown-clear-arrow-color - Color of the arrow indicator when the dropdown is not filled\n * @cssprop --wcs-dropdown-arrow-color-disabled - Base color of the arrow indicator when the dropdown is disabled\n * \n * @cssprop --wcs-dropdown-padding-empty - Padding of and empty dropdown\n * \n * @cssprop --wcs-dropdown-overlay-padding - Defines the vertical padding inside the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-max-height - Specifies the maximum height of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-background-color - Determines the background color of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-width - Sets the border width of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-radius - Defines the border radius of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-color - Specifies the border color of the dropdown overlay\n */\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsDropdownElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * This button is visually hidden. It used to carry all aria attributes and acts as the controller of the menu.\n     * The wcs-button could not handle the aria-controls and aria-activedescendant attributes because of the IDREF\n     * not passing from a shadow-dom through another.\n     * @private\n     */\n    private nativeButton!: HTMLButtonElement;\n\n    /**\n     * This button is shown on the user interface, and visually receives focus and catch click events.  \n     * It is hidden to screen readers since the native button carries all the aria informations.\n     * @private\n     */\n    private wcsButton!: HTMLWcsButtonElement;\n\n    /**\n     * This div is shown on the user interface when the dropdown is expanded.\n     * @private\n     */\n    private popoverDiv!: HTMLDivElement;\n\n    /** Hides the arrow in the button */\n    @Prop({ reflect: true }) noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n    \n    /** Dropdown's button size */\n    @Prop() size: WcsButtonSize = 'm';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded: boolean = false;\n\n\n    private popper: Instance;\n    \n    private lastFocusedItemElement: HTMLWcsDropdownItemElement | null;\n    \n    private get items(): HTMLWcsDropdownItemElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n    }\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n    \n    @Listen('blur')\n    onBlur() {\n        this.clearLastFocusedItem();\n        this.expanded = false;\n    }\n\n    componentDidLoad() {\n        this.popper = createPopper(this.wcsButton, this.popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.clearLastFocusedItem();\n        this.expanded = !this.expanded;\n        \n        if (this.expanded) {\n            this.focusItem(0);\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n        this.nativeButton.focus();\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent): void {\n        const currentState = this.expanded ? 'opened' : 'closed';\n        const actionsFromKeyboardEvents: KeyboardEventAssociatedAction[] = getActionForKeyboardEvent(_event, currentState);\n\n        // If we have at least one associated actions, we prevent the default behavior of the event. \n        // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)\n        if (actionsFromKeyboardEvents.length != 0) {\n            _event.preventDefault();\n        }\n\n        for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {\n            this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction) {\n        switch (actionFromKeyboardEvent.kind) {\n            case 'OpenMenu':\n                this.expanded = true;\n                this.focusItem(0);\n                break;\n            case 'CloseMenu':\n                this.expanded = false;\n                this.nativeButton.focus();\n                break;\n            case 'ClearFocus':\n                this.clearLastFocusedItem();\n                break;\n            case 'FocusItem':\n                switch (actionFromKeyboardEvent.target) {\n                    case 'previous':\n                        this.focusClosestItem('previous');\n                        break;\n                    case 'next':\n                        this.focusClosestItem('next');\n                        break;\n                    case 'first':\n                        this.focusItem(0);\n                        break;\n                    case 'last':\n                        this.focusItem(this.items.length - 1);\n                        break;\n                    default:\n                        break;\n                }\n                break;\n            default:\n                break;\n        }\n    }\n\n    /**\n     * Removes the focus and tabindex 0 of the last focused item if any.\n     * @private\n     */\n    private clearLastFocusedItem() {\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = -1;\n            this.lastFocusedItemElement = null;\n        }\n    }\n    \n    private focusItem(indexToFocus: number) {\n        this.clearLastFocusedItem();\n        this.lastFocusedItemElement = this.items[indexToFocus];\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = 0;\n            requestAnimationFrame(() => {\n                this.lastFocusedItemElement?.focus();\n            });\n        }\n    }\n    \n    private focusClosestItem(direction: 'next' | 'previous'): void {\n        const indexToFocus = this.getClosestActiveItemIndexForDirection(direction);\n        if (indexToFocus === -1) return;\n        \n        this.focusItem(indexToFocus);\n    }\n    \n    private getClosestActiveItemIndexForDirection(direction: 'next' | 'previous'): number {\n        const items = this.items;\n        let currentIndex = Array.from(items).indexOf(this.lastFocusedItemElement);\n\n        const MIN_INDEX = 0;\n        const MAX_INDEX = items.length - 1;\n\n        if (direction === 'next' && currentIndex < MAX_INDEX) {\n            currentIndex++;\n        } else if (direction === 'previous' && currentIndex > MIN_INDEX) {\n            currentIndex--;\n        } else {\n            // Used to scroll through items infinitely with keyboard\n            if (direction === 'next' && currentIndex >= MAX_INDEX) {\n                currentIndex = 0;\n            }\n            if (direction === 'previous' && currentIndex === MIN_INDEX) {\n                currentIndex = MAX_INDEX;\n            }\n        }\n        \n        return currentIndex;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS),\n        };\n    }\n    \n    render() {\n        return (\n            <Host>\n                <button id=\"dropdown-button\"\n                        aria-controls=\"menu\"\n                        disabled={this.disabled}\n                        aria-haspopup=\"true\"\n                        role=\"button\"\n                        aria-expanded={this.expanded ? 'true' : 'false'}\n                        ref={el => this.nativeButton = el}\n                        onClick={($event) => this.onButtonClick($event)}\n                        onBlur={($event) => $event.stopImmediatePropagation()}\n                        {...this.inheritedAttributes}>Dropdown</button>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n                            ref={el => this.wcsButton = el}\n                            aria-hidden=\"true\"\n                            tabindex={-1}\n                            onClick={($event) => this.onButtonClick($event)}\n                            onBlur={(e) => e.stopImmediatePropagation()}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}\n                     id=\"menu\"\n                     role=\"menu\"\n                     aria-labelledby=\"dropdown-button\"\n                     tabindex={-1}\n                     ref={el => this.popoverDiv = el}>\n                    <div role=\"presentation\" id=\"arrow\" data-popper-arrow/>\n                    <div role=\"presentation\" class=\"container\">\n                        <slot name=\"item\">\n                            <span id={\"is-empty\"}></span>\n                        </slot>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"version":3}
+{"file":"wcs-dropdown.entry.cjs.js","mappings":"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","names":["keyboardShortcutFromKeyboardEvent","createPopper","clickTargetIsElementOrChildren","setOrRemoveAttribute","inheritAriaAttributes","inheritAttributes","h","Host","SelectArrow"],"sources":["src/components/dropdown/dropdown-keyboard-event.ts","src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { keyboardShortcutFromKeyboardEvent } from \"../../utils/keyboard-event\";\n\n// Possible Shortcuts\n\n// Dropdown button\n// ENTER : open menu, move focus to first item\n// SPACE : open menu, move focus to first item\n// DOWN_ARROW : open menu, move focus to first item\n// UP_ARROW : open menu, move focus to last item\n\n// Dropdown item\n// HOME : focus first item\n// END : focus last item\n// UP_ARROW : move focus to previous item\n// DOWN_ARROW : move focus to previous item\n// ESCAPE : close menu, set focus on the dropdown button\n// ENTER : activate the item, close menu, set focus to menu button (already handled via the wcsDropdownItemClick event)\n\nexport type KeyboardEventAssociatedAction = OpenMenu\n    | CloseMenu\n    | ClearFocus\n    | FocusItem;\n\ntype OpenMenu = {kind: 'OpenMenu'};\ntype CloseMenu = {kind: 'CloseMenu'};\n\n\ntype ClearFocus = {kind: 'ClearFocus'};\ntype FocusItem = {kind: 'FocusItem', target: 'next' | 'previous' | 'first' | 'last'};\n\n/**\n * We follow this pattern https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/\n * @param event\n * @param currentState\n * @param type\n */\nexport function getActionForKeyboardEvent(event: KeyboardEvent, currentState: 'closed' | 'opened'): KeyboardEventAssociatedAction[] {\n    const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);\n\n    if(keyboardShortcut === 'UNKNOWN') {\n        return [];\n    }\n\n    switch (currentState) {\n        case 'closed':\n            // We handle every available shortcut for the closed state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'last'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                case 'SPACE':\n                case 'ENTER':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                default:\n                    break;\n            }\n            break;\n        case 'opened':\n            // We handle every available shortcut for the opened state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'FocusItem', target: 'previous'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'FocusItem', target: 'next'}];\n                case 'HOME':\n                    return [{kind: 'FocusItem', target: 'first'}];\n                case 'END':\n                    return [{kind: 'FocusItem', target: 'last'}];\n                case 'ESCAPE':\n                case 'MAJ+TAB':\n                case 'TAB':\n                    return [{kind: 'CloseMenu'}];\n                default:\n                    break;\n            }\n            break;\n        default:\n            throw Error('Unknown error');\n    }\n    return [];\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: flex;\n    /*\n    * DO NOT REMOVE:\n    * The native button is absolutely positioned.\n    * This `position: relative` makes `wcs-dropdown` its containing block.\n    * Without it, the button can be laid out relative to another ancestor higher in the DOM,\n    * so when the browser focuses the native button it may scroll the window unexpectedly.\n    */\n    position: relative;\n\n    --wcs-dropdown-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    // Padding\n    --wcs-dropdown-padding-empty: var(--wcs-semantic-spacing-large);\n\n    // Arrow color\n    --wcs-dropdown-plain-arrow-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-dropdown-stroked-arrow-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-dropdown-clear-arrow-color: var(--wcs-semantic-color-foreground-action-tertiary-default);\n\n    --wcs-dropdown-arrow-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    // Overlay\n    --wcs-dropdown-overlay-max-height: 360px;\n    --wcs-dropdown-overlay-padding: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-dropdown-overlay-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-dropdown-overlay-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-dropdown-overlay-border-color: var(--wcs-semantic-color-border-secondary);\n\n    wcs-button {\n        height: fit-content;\n    }\n\n    svg {\n        margin-right: -0.25rem;\n    }\n}\n\n/* Visually hide the native button */\nbutton {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    outline: 0;\n    outline-offset: 0;\n}\n\nbutton:focus-visible + wcs-button {\n    @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n}\n\n@supports not selector(button:focus-visible + wcs-button) {\n    button:focus-within + wcs-button {\n        @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n    align-items: center;\n}\n\n.popover {\n    width: max-content; // We want the popover to shrink to fit its content, but not to grow wider than necessary\n\n    display: none;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n    border-radius: var(--wcs-dropdown-overlay-border-radius);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    min-width: calc(10 * var(--wcs-semantic-size-base));\n    border-radius: inherit;\n    overflow: hidden;\n    padding: var(--wcs-dropdown-overlay-padding);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n}\n\n:host([mode=clear]) {\n    // SVG arrow inside the button, on clear background\n    .arrow {\n        fill: var(--wcs-dropdown-clear-arrow-color);\n    }\n}\n\n:host([mode=stroked]) {\n    // SVG arrow inside the button, on stroked background\n    .arrow {\n        fill: var(--wcs-dropdown-stroked-arrow-color);\n    }\n}\n\n:host([mode=plain]) {\n    // SVG arrow inside the button, on primary background\n    .arrow {\n        fill: var(--wcs-dropdown-plain-arrow-color);\n    }\n}\n\n:host([disabled]) {\n    .arrow {\n        fill: var(--wcs-dropdown-arrow-color-disabled);\n    }\n}\n\n// Popover arrow\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n#is-empty {\n    display: block;\n    width: 20ch;\n    padding: 0 var(--wcs-dropdown-padding-empty);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport {\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n} from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport {\n    clickTargetIsElementOrChildren,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { getActionForKeyboardEvent, KeyboardEventAssociatedAction } from \"./dropdown-keyboard-event\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst DROPDOWN_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\n * dropdown.\n * \n * @slot placeholder - The slot containing the placeholder displayed in button\n * @slot item - The slot container the list of `wcs-dropdown-item` elements\n * \n * @cssprop --wcs-dropdown-outline-color-focus - Outline color of dropdown when focus it\n * \n * @cssprop --wcs-dropdown-plain-arrow-color - Color of the arrow indicator when the dropdown is plain\n * @cssprop --wcs-dropdown-stroked-arrow-color - Color of the arrow indicator when the dropdown is stroked\n * @cssprop --wcs-dropdown-clear-arrow-color - Color of the arrow indicator when the dropdown is not filled\n * @cssprop --wcs-dropdown-arrow-color-disabled - Base color of the arrow indicator when the dropdown is disabled\n * \n * @cssprop --wcs-dropdown-padding-empty - Padding of and empty dropdown\n * \n * @cssprop --wcs-dropdown-overlay-padding - Defines the vertical padding inside the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-max-height - Specifies the maximum height of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-background-color - Determines the background color of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-width - Sets the border width of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-radius - Defines the border radius of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-color - Specifies the border color of the dropdown overlay\n */\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsDropdownElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * This button is visually hidden. It used to carry all aria attributes and acts as the controller of the menu.\n     * The wcs-button could not handle the aria-controls and aria-activedescendant attributes because of the IDREF\n     * not passing from a shadow-dom through another.\n     * @private\n     */\n    private nativeButton!: HTMLButtonElement;\n\n    /**\n     * This button is shown on the user interface, and visually receives focus and catch click events.  \n     * It is hidden to screen readers since the native button carries all the aria informations.\n     * @private\n     */\n    private wcsButton!: HTMLWcsButtonElement;\n\n    /**\n     * This div is shown on the user interface when the dropdown is expanded.\n     * @private\n     */\n    private popoverDiv!: HTMLDivElement;\n\n    /** Hides the arrow in the button */\n    @Prop({ reflect: true }) noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n    \n    /** Dropdown's button size */\n    @Prop() size: WcsButtonSize = 'm';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded: boolean = false;\n\n\n    private popper: Instance;\n    \n    private lastFocusedItemElement: HTMLWcsDropdownItemElement | null;\n    \n    private get items(): HTMLWcsDropdownItemElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n    }\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n    \n    @Listen('blur')\n    onBlur() {\n        this.clearLastFocusedItem();\n        this.expanded = false;\n    }\n\n    componentDidLoad() {\n        this.popper = createPopper(this.wcsButton, this.popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.clearLastFocusedItem();\n        this.expanded = !this.expanded;\n        \n        if (this.expanded) {\n            this.focusItem(0);\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n        this.nativeButton.focus();\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent): void {\n        const currentState = this.expanded ? 'opened' : 'closed';\n        const actionsFromKeyboardEvents: KeyboardEventAssociatedAction[] = getActionForKeyboardEvent(_event, currentState);\n\n        // If we have at least one associated actions, we prevent the default behavior of the event. \n        // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)\n        if (actionsFromKeyboardEvents.length != 0) {\n            _event.preventDefault();\n        }\n\n        for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {\n            this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction) {\n        switch (actionFromKeyboardEvent.kind) {\n            case 'OpenMenu':\n                this.expanded = true;\n                this.focusItem(0);\n                break;\n            case 'CloseMenu':\n                this.expanded = false;\n                this.nativeButton.focus();\n                break;\n            case 'ClearFocus':\n                this.clearLastFocusedItem();\n                break;\n            case 'FocusItem':\n                switch (actionFromKeyboardEvent.target) {\n                    case 'previous':\n                        this.focusClosestItem('previous');\n                        break;\n                    case 'next':\n                        this.focusClosestItem('next');\n                        break;\n                    case 'first':\n                        this.focusItem(0);\n                        break;\n                    case 'last':\n                        this.focusItem(this.items.length - 1);\n                        break;\n                    default:\n                        break;\n                }\n                break;\n            default:\n                break;\n        }\n    }\n\n    /**\n     * Removes the focus and tabindex 0 of the last focused item if any.\n     * @private\n     */\n    private clearLastFocusedItem() {\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = -1;\n            this.lastFocusedItemElement = null;\n        }\n    }\n    \n    private focusItem(indexToFocus: number) {\n        this.clearLastFocusedItem();\n        this.lastFocusedItemElement = this.items[indexToFocus];\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = 0;\n            requestAnimationFrame(() => {\n                this.lastFocusedItemElement?.focus();\n            });\n        }\n    }\n    \n    private focusClosestItem(direction: 'next' | 'previous'): void {\n        const indexToFocus = this.getClosestActiveItemIndexForDirection(direction);\n        if (indexToFocus === -1) return;\n        \n        this.focusItem(indexToFocus);\n    }\n    \n    private getClosestActiveItemIndexForDirection(direction: 'next' | 'previous'): number {\n        const items = this.items;\n        let currentIndex = Array.from(items).indexOf(this.lastFocusedItemElement);\n\n        const MIN_INDEX = 0;\n        const MAX_INDEX = items.length - 1;\n\n        if (direction === 'next' && currentIndex < MAX_INDEX) {\n            currentIndex++;\n        } else if (direction === 'previous' && currentIndex > MIN_INDEX) {\n            currentIndex--;\n        } else {\n            // Used to scroll through items infinitely with keyboard\n            if (direction === 'next' && currentIndex >= MAX_INDEX) {\n                currentIndex = 0;\n            }\n            if (direction === 'previous' && currentIndex === MIN_INDEX) {\n                currentIndex = MAX_INDEX;\n            }\n        }\n        \n        return currentIndex;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS),\n        };\n    }\n    \n    render() {\n        return (\n            <Host>\n                <button id=\"dropdown-button\"\n                        aria-controls=\"menu\"\n                        disabled={this.disabled}\n                        aria-haspopup=\"true\"\n                        role=\"button\"\n                        aria-expanded={this.expanded ? 'true' : 'false'}\n                        ref={el => this.nativeButton = el}\n                        onClick={($event) => this.onButtonClick($event)}\n                        onBlur={($event) => $event.stopImmediatePropagation()}\n                        {...this.inheritedAttributes}>Dropdown</button>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n                            ref={el => this.wcsButton = el}\n                            aria-hidden=\"true\"\n                            tabindex={-1}\n                            onClick={($event) => this.onButtonClick($event)}\n                            onBlur={(e) => e.stopImmediatePropagation()}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}\n                     id=\"menu\"\n                     role=\"menu\"\n                     aria-labelledby=\"dropdown-button\"\n                     tabindex={-1}\n                     ref={el => this.popoverDiv = el}>\n                    <div role=\"presentation\" id=\"arrow\" data-popper-arrow/>\n                    <div role=\"presentation\" class=\"container\">\n                        <slot name=\"item\">\n                            <span id={\"is-empty\"}></span>\n                        </slot>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"version":3}