wcs-core 7.6.0 → 7.7.0

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

@@ -1 +1 @@
-{"file":"wcs-dropdown.entry.js","mappings":"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","names":[],"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.js","mappings":"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","names":[],"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}

package/dist/esm/wcs-editable-field.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d9de61ce.js';
-import { b as isEscapeKey, o as isMouseEvent, q as clickInsideElement, d as isEnterKey } from './helpers-89faa1b1.js';
+import { b as isEscapeKey, o as isMouseEvent, q as clickInsideElement, d as isEnterKey } from './helpers-2d73ee7c.js';
 
 const WcsEditableFieldSizeValues = ['m', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
 function isWcsEditableFieldSize(size) {
@@ -281,7 +281,7 @@ const EditableField = class {
     }
     render() {
         const { formattedValue, formattedValueText, formattedCurrentValue } = this.formatValues();
-        return (h(Host, { key: 'a1b692fad52bdb6a7309b70a04edfb68cf77f6d3' }, h("div", { key: 'dfc55ad386b993f0187040fa2d3cdcdc5c67dbd8', class: "label" }, this.label), h("button", { key: 'ec38bec07dd21b44c1e699b967d0d7aee9d51a1f', type: "button", class: 'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : ''), onClick: () => this.onDisplayContainerClick(), ref: (el) => this.editModeBtn = el, "aria-label": `${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}` }, formattedValue, h("wcs-mat-icon", { key: 'cc38a3416a563d4985311f73b7774496697f6685', icon: "edit", size: "s" }), this.readonly ? this.getReadonlySvgIcon() : null), h("div", { key: '0872aecf23dab9d4fdfee58b9ee13b51e682d48e', class: 'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '') }, formattedCurrentValue, h("wcs-spinner", { key: '89e19662f6c7429e18fb9e41e3c35450b0675b1d' })), h("wcs-form-field", { key: '8e90e1c7f78fc418ecb6299b19b5c93dad0d9d7a', "is-error": this.isError, class: 'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '') }, h("wcs-label", { key: '5919933cb037bd7e5c5fa87af68525d47006b6e3', class: "visually-hidden" }, this.label), h("slot", { key: '971ecbfe68bcd475d87fe3bcbf570b81a7be039e' }), this.isError && this.errorMsg
+        return (h(Host, { key: '3980dc18ccf2a4ea568569dd6f072ea19d2e2ce3' }, h("div", { key: '6d853b2bfdee062fd8e8a3e0aa9f19e17def5206', class: "label" }, this.label), h("button", { key: '9e8211967d9e48ea201ee25cbd6d5df17f77a9bb', type: "button", class: 'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : ''), onClick: () => this.onDisplayContainerClick(), ref: (el) => this.editModeBtn = el, "aria-label": `${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}` }, formattedValue, h("wcs-mat-icon", { key: '774fd99f237ad6c63fc8895f3d6cdfb99314adec', icon: "edit", size: "s" }), this.readonly ? this.getReadonlySvgIcon() : null), h("div", { key: 'ab98ad8b0909933b680353b46c1407b0f82af28a', class: 'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '') }, formattedCurrentValue, h("wcs-spinner", { key: '2ae47012c5d251b7a756a1fb13c30ad5f36ee103' })), h("wcs-form-field", { key: '0858fc4d06e5c0f1c6dfb23d904fb36ea348d9b8', "is-error": this.isError, class: 'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '') }, h("wcs-label", { key: '5f901a2af267d42b20aa67b80245f63c0124fdd2', class: "visually-hidden" }, this.label), h("slot", { key: 'd7948c3e0187f6d92727167eb1737d7b6973072d' }), this.isError && this.errorMsg
             ? h("wcs-error", null, this.errorMsg)
             : null)));
     }

package/dist/esm/wcs-error_3.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-d9de61ce.js';
 import { i as isMutableAriaAttribute } from './mutable-aria-attribute-e225edc1.js';
-import { y as normalizeWhitespace, i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-89faa1b1.js';
+import { y as normalizeWhitespace, i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-2d73ee7c.js';
 import { i as isControlComponentWithLabel } from './control-component-interface-9f09e520.js';
 
 const errorCss = ":host{--wcs-error-color:var(--wcs-semantic-color-text-critical);--wcs-error-font-size:var(--wcs-semantic-font-size-caption-2);--wcs-error-font-weight:var(--wcs-semantic-font-weight-book);color:var(--wcs-error-color);font-size:var(--wcs-error-font-size);font-weight:var(--wcs-error-font-weight)}";
@@ -11,7 +11,7 @@ const Label$1 = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '7dffcb3487f7210c5c9a45af709fc942a1410679', role: "alert", slot: "error" }, h("slot", { key: '251fbdc26fe58be4296328c4ebaed77329c6c507' })));
+        return (h(Host, { key: '89cbcbdb9057296fb11e99bd6f92b7b92bdad988', role: "alert", slot: "error" }, h("slot", { key: '81f37240e47e345a01901772bd095ee19d793963' })));
     }
 };
 Label$1.style = WcsErrorStyle0;
@@ -160,7 +160,7 @@ const FormField = class {
         if (this.hasPrefix) {
             classes += ' has-prefix';
         }
-        return (h(Host, { key: 'd8a5d2023add393b0a31173351a3d16d9fa0b1a6', class: classes }, h("slot", { key: '3f347f4dce239c0106fbbe52bdc217fa37c05d01', name: "label" }), h("div", { key: 'd6cb92104d72530059ecb9a383ff832afb0c2141', class: "input-container" }, h("slot", { key: '8be28f721ff351d41dced80c97c0e34337703d0e', name: "prefix" }), h("slot", { key: 'cc58d463877a1e8513736a987286e965870e096d', onSlotchange: () => this.onFormInputSlotChange() }), h("slot", { key: '898709cfcf0ae1cd43dabd55547d62199d6230c9', name: "suffix" })), isError ? (h("slot", { name: "error" })) : '', h("slot", { key: 'aaf2d35dfbdfda47b440f96d7f9aa22cb09f6a06', name: "messages" })));
+        return (h(Host, { key: '9cfd2ef4834a62bfe77366b99ec637b71008178e', class: classes }, h("slot", { key: '26a0f59515e28ec045e8ccee2e74e143466ca183', name: "label" }), h("div", { key: '338b49d772bc0b9ec2621a783a051e4bdc8096bc', class: "input-container" }, h("slot", { key: 'f51bf6dc00f529f70a8ccf37ff54c29093fb1e20', name: "prefix" }), h("slot", { key: 'ccab32ee521ec419c89e561d4ac099a0953b6188', onSlotchange: () => this.onFormInputSlotChange() }), h("slot", { key: 'b54d01ac5b4f7f6761923b94c436b2728ff036e5', name: "suffix" })), isError ? (h("slot", { name: "error" })) : '', h("slot", { key: '40665251b2e5acc2fb8e31a4e8b46d34959b74e1', name: "messages" })));
     }
     onFormInputSlotChange() {
         this.initSpiedElement();
@@ -192,7 +192,7 @@ const Label = class {
         setOrRemoveAttribute(this.nativeLabel, attr, value);
     }
     render() {
-        return (h(Host, { key: 'bd18c1a58190a8a8ada92b47f3b77e58c89c3169', slot: "label" }, h("label", Object.assign({ key: '7fc3b63d96cf88eb8b31abd2b0055feebe02f696', ref: (el) => this.nativeLabel = el }, this.inheritedAttributes), h("slot", { key: 'b997f691e437b758f3ebe0f0899605430b10388a' }), this.required && h("span", { key: '529194ed383d724c570a9bca56ee23dc9b9f0fce', "aria-hidden": "true", class: "required-marker" }, "*"))));
+        return (h(Host, { key: 'd5fff8ed9237d97dee4683e4994084bec2f72503', slot: "label" }, h("label", Object.assign({ key: '418f9021685cb0f942f6e44557ad237be1a3019e', ref: (el) => this.nativeLabel = el }, this.inheritedAttributes), h("slot", { key: '9cde60902ca12c8b0301f247c22bbd8581f988a3' }), this.required && h("span", { key: 'b12767c7901b18e24fcf422ba0ed1ef43df21641', "aria-hidden": "true", class: "required-marker" }, "*"))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/wcs-field-content.entry.js

@@ -5,7 +5,7 @@ const FieldContent = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '251b9ccc1b13766b287f356dfc51d6a953ad0a5e', slot: "content" }, h("slot", { key: 'ee7d55bf47c0f468829e99a26a0fe340fbafcc9f' })));
+        return (h(Host, { key: 'd9e607042807d1eac96334e573b689fd556efb57', slot: "content" }, h("slot", { key: 'bfc5e88fcdaa0a74a530310c916e8e9d0686ade3' })));
     }
 };
 

package/dist/esm/wcs-field-label.entry.js

@@ -5,7 +5,7 @@ const FieldLabel = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'a051b09993d67bf56b087d86ba433caf1bdbb7a6', slot: "label" }, h("slot", { key: '6044b728151fd48878f555d3db3e0754f31b7e51' })));
+        return (h(Host, { key: '8ec997eb8d3c959d536e915e41b6feee0abae9b5', slot: "label" }, h("slot", { key: '6388cadd5e9f3b793accd62806897550d38e2473' })));
     }
 };
 

package/dist/esm/wcs-field.entry.js

@@ -8,7 +8,7 @@ const Field = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'ae0a6c7224dc199cd6cd342d77878bfff17aa49b' }, h("slot", { key: '408c146f3e6bfa1868964a29934494215627fb59', name: "label" }), h("slot", { key: '9c2151491f6acc4a5a6da36676e21e8dee6f156a', name: "content" })));
+        return (h(Host, { key: '2f1a99e80af297bdad4ffc522c124ef998433036' }, h("slot", { key: '02ed1e93a6fa2394bb76699ebae4b85d1f693941', name: "label" }), h("slot", { key: 'de5f51186a195b070839751260a2b15aee14d75c', name: "content" })));
     }
 };
 Field.style = WcsFieldStyle0;

package/dist/esm/wcs-footer.entry.js

@@ -8,7 +8,7 @@ const Footer = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '6fe975235d6de2793e55e8d10860649b5684c093' }, h("footer", { key: '80b0ff721eedab3e4cc00fd2484a638718fc8b13', role: "contentinfo" }, h("div", { key: 'f7d676d79f4d8780736e3a28e3e4b2aa1f0786e1', class: "container" }, h("div", { key: 'e1f9ea823133d972d3eb2bc8e7eaa18558448a73' }, h("slot", { key: 'd7177b9e98ac24ad39008669de01899e71c27079' })), h("div", { key: '849ceafdd459f24b672e1f68edf86ffd4fcce733', class: "end" }, h("div", { key: '7077861e872bbb50e7e5de0c968fe2222e9bf7d7', class: "end-left" }, h("slot", { key: 'dded653e62bf683e0514c51b06e55ccb44f70c54', name: "end-left" })), h("div", { key: 'ec25d2a5f84cb477eaa6a63de4df6ce6e9db07c5', class: "end-right" }, h("slot", { key: '4201096294b44a29f74112c2acaa2163f9ecfcb9', name: "end-right" })))))));
+        return (h(Host, { key: '1982e1bb2f8f8fab2b32039b98327b82d0f7fe5b' }, h("footer", { key: '5df2e947ab692961ff3bab26c029d1cd6b60b525', role: "contentinfo" }, h("div", { key: '1aa5188a4679ca7c8d898747fae709648bf4efd4', class: "container" }, h("div", { key: '4e0720a198a72fd4d215afa9a9b82c9a01f935c7' }, h("slot", { key: 'b982e050f713d0684eb0202a33a72394a062383b' })), h("div", { key: '2d2969a699b1b56ebc712fecbb99ccde8dc28c28', class: "end" }, h("div", { key: 'a0e18ea874704d4fd8aac0204122b9a18209ca37', class: "end-left" }, h("slot", { key: 'c70c138311778a58748dcfcdd03f8f61895bc6ec', name: "end-left" })), h("div", { key: '3339a070ca8068d7441643825fdb30e684d9aff7', class: "end-right" }, h("slot", { key: 'f576479754f88144e8ded04c90d1696882e6155e', name: "end-right" })))))));
     }
 };
 Footer.style = WcsFooterStyle0;

package/dist/esm/wcs-galactic-menu.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-d9de61ce.js';
-import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute, q as clickInsideElement, b as isEscapeKey } from './helpers-89faa1b1.js';
+import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute, q as clickInsideElement, b as isEscapeKey } from './helpers-2d73ee7c.js';
 import { c as createPopper } from './popper-ac238961.js';
 
 const galacticMenuCss = ":host{--wcs-galactic-menu-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-galactic-menu-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-gap:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-height:var(--wcs-semantic-size-s);--wcs-galactic-menu-icon-focus-outline-color:var(--wcs-galactic-text-color, white);--wcs-galactic-menu-overlay-color:var(--wcs-semantic-color-text-inverse);--wcs-galactic-menu-overlay-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-galactic-menu-overlay-padding:var(--wcs-semantic-spacing-large);display:flex;align-items:center;box-sizing:border-box;height:var(--wcs-galactic-menu-height);gap:var(--wcs-galactic-menu-gap);padding:0 var(--wcs-galactic-menu-padding-horizontal);background-color:var(--wcs-galactic-menu-background-color)}#menu{display:none;background-color:var(--wcs-galactic-menu-overlay-background-color);color:var(--wcs-galactic-menu-overlay-color);padding:var(--wcs-galactic-menu-overlay-padding);--wcs-semantic-color-border-focus-base:var(--wcs-semantic-color-text-inverse, white)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}button{background:transparent;border:none;color:inherit;cursor:pointer;user-select:none}button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-galactic-menu-icon-focus-outline-color);outline-offset:0;border-radius:0.1rem}";
@@ -61,9 +61,9 @@ const Galactic = class {
         }
     }
     render() {
-        return (h(Host, { key: 'bc460c17b222723b8cc037042cc758f8ca0e50ec' }, h("span", { key: 'd324ff624a9e5c9f6984134d4091986cac11f18b' }, this.text), h("button", Object.assign({ key: '7b0160174a249b30e082b9b2a77aca334ee6256a', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
+        return (h(Host, { key: '8119cc6893e6dc5eda0b2f88a2d3935f9c1a6ac4' }, h("span", { key: 'c6ca18f7cb948c09d7d5fdd6bc9aacbad2e397fe' }, this.text), h("button", Object.assign({ key: 'a04475052533f24675ef125ba52117bc15279fba', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
                 this.menuButton = el;
-            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), h("wcs-mat-icon", { key: '96b20053845f5490791ea278c2444392ba630600', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), h("span", { key: '6f959f220edbf293fe6922f7aaeaab0f213bf736', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, h("div", { key: '6a05e468d65252ecbb57b421a53be0a0a1974f98', id: "arrow", "data-popper-arrow": true }), h("slot", { key: 'c9398cbb856d836820ac1cddf3113710eeaff5fb' }))));
+            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), h("wcs-mat-icon", { key: '7a394bfe5e1cee3d49dba4672c6569a0f94a02ae', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), h("span", { key: '290449dc75b2d5ba33acb49865b1736cf12cb13c', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, h("div", { key: 'd5224168e7f11b935453c7e883791842ffbc0c61', id: "arrow", "data-popper-arrow": true }), h("slot", { key: 'eaaffe928ece2da680be02522e16655d961261ad' }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/wcs-galactic.entry.js

@@ -10,7 +10,7 @@ const Galactic = class {
         this.show = false;
     }
     render() {
-        return (h(Host, { key: 'bcede9aa03d2014887eeaa4d5728d57c32a69de2' }, h("div", { key: '2d031655b20b592b77e2227a195f15535071c069', class: "container" }, h("div", { key: '1d3a345c56925946f5b39ad9edaad7ee927343cc', class: "logo-container" }, h("img", { key: '3f7e9a0a7df3a954d21e328da562189771baf8a8', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), h("span", { key: '68c00801e7f2564930d6a5f77fc6f45511a321cf' }, this.text)), h("div", { key: '3724b08dca457a9be21ecb84925ed3fea4e49f95', class: "actions-container" }, h("slot", { key: '572f4ca9036c737a579f2c58ec113cada4dd421c' })))));
+        return (h(Host, { key: '232bedfce53c034b8cb1d65386d883bd7e3bf98d' }, h("div", { key: '0c3540994bd2b846a4668cb20f7e12207b764041', class: "container" }, h("div", { key: '5e3d1e7c948420b75383a52eb39c22acfa443e1f', class: "logo-container" }, h("img", { key: 'd3d28eab6584e0b670cd7624147033c134f0bfbe', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), h("span", { key: '46de64ef60c5b5180397dbcee9d18ddd33f42025' }, this.text)), h("div", { key: '2de7221e95f3628a2c05a9b1006b75b25f6cb25e', class: "actions-container" }, h("slot", { key: 'd91d6a26c3d9c79610e8b35c79bb7e3e42541751' })))));
     }
 };
 const SNCF_BASE64_SVG_LOGO = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVy' +

package/dist/esm/wcs-grid-column.entry.js

@@ -1,5 +1,5 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-d9de61ce.js';
-import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute, c as isSpaceKey, d as isEnterKey } from './helpers-89faa1b1.js';
+import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute, c as isSpaceKey, d as isEnterKey } from './helpers-2d73ee7c.js';
 
 const GridSortArrow = ({ state }) => (h("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
     h("g", { class: (state === 'none' ? '' : state) + ' arrow-group' },
@@ -77,7 +77,7 @@ const GridColumn = class {
     }
     render() {
         const ButtonOrDiv = this.getTagName();
-        return (h(Host, { key: 'dae8ba0823c68e3029faa505a061b80ae911f84a', slot: "grid-column" }, h("th", Object.assign({ key: '02d892d695ee9faa1f91be08c67c200aa770d489', style: { width: this.width }, class: this.sort ? 'pointer' : '', tabIndex: this.sort ? -1 : this.getTabIndex(), scope: "col", onClick: this.onSortClick.bind(this), onKeyDown: this.handleSortKeyDown.bind(this), onFocus: this.delegateFocusToButton.bind(this), "aria-sort": this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null, ref: (el) => (this.nativeTh = el) }, this.inheritedAttributes), h(ButtonOrDiv, { key: '2da3c848ac260aa272e78e52f282ff0078ecc1e1', class: "grid-column-th-content", ref: (el) => this.buttonOrDiv = el, tabIndex: this.sort ? this.getTabIndex() : -1 }, h("span", { key: '063de5c95a3fb63444cf5e10e291252bc3474fad' }, this.name), this.sort ? h("div", { class: "sort-arrow-container" }, h(GridSortArrow, { state: this.sortOrder })) : ''))));
+        return (h(Host, { key: '118b343bd6403270ae60ec7859ba56bea98c6aa1', slot: "grid-column" }, h("th", Object.assign({ key: '61815f030b8b3b5ceff187bf264a86d03fa8a3bd', style: { width: this.width }, class: this.sort ? 'pointer' : '', tabIndex: this.sort ? -1 : this.getTabIndex(), scope: "col", onClick: this.onSortClick.bind(this), onKeyDown: this.handleSortKeyDown.bind(this), onFocus: this.delegateFocusToButton.bind(this), "aria-sort": this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null, ref: (el) => (this.nativeTh = el) }, this.inheritedAttributes), h(ButtonOrDiv, { key: '5894a5ca7af78e40b6307a290707090f974ef652', class: "grid-column-th-content", ref: (el) => this.buttonOrDiv = el, tabIndex: this.sort ? this.getTabIndex() : -1 }, h("span", { key: '4bd49d08cea2f0892ae0e28f20cf2fc982345f9e' }, this.name), this.sort ? h("div", { class: "sort-arrow-container" }, h(GridSortArrow, { state: this.sortOrder })) : ''))));
     }
     onSortClick() {
         if (!this.sort)

package/dist/esm/wcs-grid-custom-cell.entry.js

@@ -7,7 +7,7 @@ const GridCustomCell = class {
         this.rowId = undefined;
     }
     render() {
-        return (h(Host, { key: 'dd57a3792ccd2dbf7bb23f5055eb3136a06a9acb', slot: this.columnId + '-' + this.rowId }, h("slot", { key: '5fa475118d263c77b9ccbc1bb7e0c808b1578e87' })));
+        return (h(Host, { key: 'aac258f291f690ca8e124414d265f5fec7fc6a56', slot: this.columnId + '-' + this.rowId }, h("slot", { key: '7371fc04b30f46ada2ae94c8b4c64d6e0aa07789' })));
     }
 };
 

package/dist/esm/wcs-grid-pagination.entry.js

@@ -1,5 +1,5 @@
-export { G as wcs_grid_pagination } from './grid-pagination-23102986.js';
+export { G as wcs_grid_pagination } from './grid-pagination-c29173f6.js';
 import './index-d9de61ce.js';
-import './helpers-89faa1b1.js';
+import './helpers-2d73ee7c.js';
 
 //# sourceMappingURL=wcs-grid-pagination.entry.js.map

package/dist/esm/wcs-grid.entry.js

@@ -1,7 +1,7 @@
 import { h, r as registerInstance, c as createEvent, f as forceUpdate, H as Host, g as getElement } from './index-d9de61ce.js';
-import { G as GridPagination } from './grid-pagination-23102986.js';
-import { k as keyboardShortcutFromKeyboardEvent } from './keyboard-event-dd35bb6b.js';
-import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-89faa1b1.js';
+import { G as GridPagination } from './grid-pagination-c29173f6.js';
+import { k as keyboardShortcutFromKeyboardEvent } from './keyboard-event-3a0579d5.js';
+import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-2d73ee7c.js';
 import { i as isObjectLike, b as baseGetTag, a as isArray, S as Symbol, c as isObject, g as getNative, e as eq, d as isPrototype, f as isArrayLike, h as arrayLikeKeys, M as MapCache, o as overArg, k as keys, r as root, j as getSymbols, s as stubArray, l as arrayPush, m as baseGetAllKeys, U as Uint8Array$1, n as getTag, p as baseUnary, q as nodeUtil, t as isBuffer, u as Stack, v as getAllKeys, w as isEqual } from './isEqual-89e74e17.js';
 
 function getSortOrderInteger(sortOrder) {
@@ -1589,7 +1589,14 @@ const Grid = class {
      * Update the page's number of all rows
      */
     updatePageIndex() {
+        var _a;
         if (!this.serverMode && this.paginationEl) {
+            if (!this.data || ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+                this.paginationEl.itemsCount = 0;
+                this.paginationEl.pageCount = 0;
+                this.paginationEl.currentPage = -1;
+                return;
+            }
             this.paginationEl.itemsCount = this.data.length;
             this.paginationEl.pageCount = Math.ceil(this.data.length / this.paginationEl.pageSize);
             if (this.paginationEl.pageCount <= 1) {
@@ -1702,12 +1709,12 @@ const Grid = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: 'b19822a50c13e2c45df1457d9e7a5100b2ba62ef' }, h("table", Object.assign({ key: '26b9e13d87544a151d6b31e6019f44f980541153', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: '1e5a328e858cbf3a6ad29e2db070c4c44c67bfe5' }, h("tr", { key: '121c5b20769d31b4366b3c563fd3fce695f6ef83', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
+        return (h(Host, { key: '6e42449e37f59f83499df9359733fd3fc3a1d93e' }, h("table", Object.assign({ key: '1cafcdf15955b01522441053d09891e388f03912', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: '99d597b8e11ab46072008a8d8cbb801f8646fd4d' }, h("tr", { key: 'd2e912234b5837fedcc54f450181989c7e3b6cc1', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
             : h("th", { class: "wcs-grid-selection-column" }, this.selectionConfig === 'single' ? '' :
                 h("wcs-checkbox", { tabIndex: ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.col) === 0
-                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '20977331e2ea13fae89d239155d9800764dd2695', name: "grid-column" }))), h("tbody", { key: '6587df7ab7251139904249def1a347f3e6718f70' }, this.loading
+                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '15d0607ad6f51f15bfa511836ff89d64d84e2db4', name: "grid-column" }))), h("tbody", { key: 'bd02a78ade9037a3f5ba47e08f1bd6a7184e5f63' }, this.loading
             ? h("tr", { "aria-busy": "true" }, h("td", { colSpan: this.totalColumnCount(), class: "loading" }, h("wcs-spinner", null)))
-            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: '134dcd235b562cd2734889cfd6eb43e4eda012ad', name: "grid-pagination" })));
+            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: 'fe6d559fb6ced1a3de3466012bea2cd9ef2a7d8a', name: "grid-pagination" })));
     }
     /**
      * Returns the row with all mapped cells inside.