wcs-core 7.6.0 → 7.7.0

package/dist/collection/components/button/button.css

@@ -196,6 +196,7 @@
   --wcs-button-stroked-border-width: var(--wcs-semantic-border-width-default);
   --wcs-button-stroked-border-color-default: var(--wcs-semantic-color-border-action-secondary-default);
   --wcs-button-stroked-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);
+  --wcs-button-gap: var(--wcs-semantic-spacing-base);
   --wcs-button-height-s: var(--wcs-semantic-size-s);
   --wcs-button-font-size-s: var(--wcs-semantic-font-size-label-2);
   --wcs-button-padding-size-s: calc(1.5 * var(--wcs-semantic-spacing-base));
@@ -206,6 +207,12 @@
   --wcs-button-font-size-l: var(--wcs-semantic-font-size-label-1);
   --wcs-button-padding-size-l: calc(3 * var(--wcs-semantic-spacing-base));
   --wcs-button-font-weight: var(--wcs-semantic-font-weight-medium);
+  --wcs-button-start-icon-size-l: calc(var(--wcs-button-font-size-l) * 1.5);
+  --wcs-button-start-icon-size-m: calc(var(--wcs-button-font-size-m) * 1.5);
+  --wcs-button-start-icon-size-s: calc(var(--wcs-button-font-size-s) * 1.5);
+  --wcs-button-end-icon-size-l: calc(var(--wcs-button-font-size-l) * 1.5);
+  --wcs-button-end-icon-size-m: calc(var(--wcs-button-font-size-m) * 1.5);
+  --wcs-button-end-icon-size-s: calc(var(--wcs-button-font-size-s) * 1.5);
 }
 
 .wcs-inner-button:focus-visible {
@@ -246,6 +253,12 @@
 :host([size=l]):host([shape=round]) ::slotted(wcs-mat-icon), :host([size=l]):host([shape=square]) ::slotted(wcs-mat-icon) {
   margin: calc(-1 * var(--wcs-button-padding-size-l));
 }
+:host([size=l]) :host([start-icon]) wcs-mat-icon#start-icon {
+  --wcs-mat-icon-font-size-m: var(--wcs-button-start-icon-size-l);
+}
+:host([size=l]) :host([end-icon]) wcs-mat-icon#end-icon {
+  --wcs-mat-icon-font-size-m: var(--wcs-button-end-icon-size-l);
+}
 
 :host, :host([size=m]) {
   --wcs-button-padding: 0 var(--wcs-button-padding-size-m);
@@ -256,6 +269,12 @@
 :host:host([shape=round]) ::slotted(wcs-mat-icon), :host:host([shape=square]) ::slotted(wcs-mat-icon), :host([size=m]):host([shape=round]) ::slotted(wcs-mat-icon), :host([size=m]):host([shape=square]) ::slotted(wcs-mat-icon) {
   margin: calc(-1 * var(--wcs-button-padding-size-m));
 }
+:host:host([start-icon]) wcs-mat-icon#start-icon, :host([size=m]):host([start-icon]) wcs-mat-icon#start-icon {
+  --wcs-mat-icon-font-size-m: var(--wcs-button-start-icon-size-m);
+}
+:host:host([end-icon]) wcs-mat-icon#end-icon, :host([size=m]):host([end-icon]) wcs-mat-icon#end-icon {
+  --wcs-mat-icon-font-size-m: var(--wcs-button-end-icon-size-m);
+}
 
 :host([size=s]) {
   --wcs-button-padding: 0 var(--wcs-button-padding-size-s);
@@ -266,6 +285,12 @@
 :host([size=s]):host([shape=round]) ::slotted(wcs-mat-icon), :host([size=s]):host([shape=square]) ::slotted(wcs-mat-icon) {
   margin: calc(-1 * var(--wcs-button-padding-size-s));
 }
+:host([size=s]):host([start-icon]) wcs-mat-icon#start-icon {
+  --wcs-mat-icon-font-size-m: var(--wcs-button-start-icon-size-s);
+}
+:host([size=s]):host([end-icon]) wcs-mat-icon#end-icon {
+  --wcs-mat-icon-font-size-m: var(--wcs-button-end-icon-size-s);
+}
 
 :host([shape=round]) {
   --wcs-button-border-radius: var(--wcs-button-border-radius-rounded);
@@ -361,6 +386,7 @@
   line-height: 1.5;
   height: var(--wcs-button-height);
   min-width: var(--wcs-button-min-width);
+  gap: var(--wcs-button-gap);
   transition: color 175ms ease-in-out, background-color 175ms ease-in-out;
 }
 .wcs-inner-button::before, .wcs-inner-button::after {

package/dist/collection/components/button/button.js

@@ -52,12 +52,24 @@ const BUTTON_INHERITED_ATTRS = ['tabindex', 'title'];
  * @cssprop --wcs-button-padding-size-l - padding for a size l button
  *
  * @cssprop --wcs-button-font-weight - font weight of a plain,stroked,clear button
+ *
+ * @cssprop --wcs-button-gap - gap between button content (text and icons)
+ *
+ * @cssprop --wcs-button-start-icon-size-s - size of the start icon for a size s button
+ * @cssprop --wcs-button-start-icon-size-m - size of the start icon for a size m button
+ * @cssprop --wcs-button-start-icon-size-l - size of the start icon for a size l button
+ *
+ * @cssprop --wcs-button-end-icon-size-s - size of the end icon for a size s button
+ * @cssprop --wcs-button-end-icon-size-m - size of the end icon for a size m button
+ * @cssprop --wcs-button-end-icon-size-l - size of the end icon for a size l button
  */
 export class Button {
     constructor() {
         this.inheritedAttributes = {};
         this.type = 'button';
         this.href = undefined;
+        this.startIcon = undefined;
+        this.endIcon = undefined;
         this.target = undefined;
         this.disabled = false;
         this.ripple = true;
@@ -114,7 +126,7 @@ export class Button {
         const attrs = this.href !== undefined
             ? { href: this.href, role: 'button', target: this.target }
             : { type: this.type };
-        return (h(TagType, Object.assign({ key: '14f58b90f3d1b05b2709cbdb941621c827d462ec' }, attrs, { class: "wcs-inner-button", disabled: this.disabled || this.loading, ref: (el) => this.nativeButton = el }, this.inheritedAttributes), this.loading && h("wcs-spinner", { key: '58dbb8b462b5023c59e8bf728ba1d93aa0575cb4' }), h("slot", { key: 'b6c394ac1c6a4ee5a9fd6bf10a268420843409d2' })));
+        return (h(TagType, Object.assign({ key: '354b94e4b7b5a8666da9eb9b9c3dde2eb7defa82' }, attrs, { class: "wcs-inner-button", disabled: this.disabled || this.loading, ref: (el) => this.nativeButton = el }, this.inheritedAttributes), this.loading && h("wcs-spinner", { key: 'e9712fbc68976f2b2982e1875c70e3dd60027f67' }), this.startIcon && h("wcs-mat-icon", { key: '983131bbd0d2160cb4f167e28ca54775cabda25a', id: "start-icon", size: 'm', icon: this.startIcon }), h("slot", { key: 'd9fd23e642eb9260c7b777a04f68920d5c02774c' }), this.endIcon && h("wcs-mat-icon", { key: 'd16c804a91b7fccc2025229e22e096abe0ccd586', id: "end-icon", size: 'm', icon: this.endIcon })));
     }
     static get is() { return "wcs-button"; }
     static get encapsulation() { return "shadow"; }
@@ -172,6 +184,40 @@ export class Button {
                 "attribute": "href",
                 "reflect": false
             },
+            "startIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of a wcs-mat-icon to display at the start (left) of the button."
+                },
+                "attribute": "start-icon",
+                "reflect": false
+            },
+            "endIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of a wcs-mat-icon to display at the end (right) of the button."
+                },
+                "attribute": "end-icon",
+                "reflect": false
+            },
             "target": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport { MDCRipple } from '@material/ripple';\n\nimport {\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n    WcsButtonType\n} from './button-interface';\nimport { hasShadowDom, inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst BUTTON_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The button component is used to trigger an action. It can also be a link when specifying href.\n * \n * ## Accessibility guidelines 💡\n * > If your button doesn't contain text but only an image, you must set a relevant aria-label on the icon 👉 [see \"Square\" story below](#square)\n * \n * ## Click event\n *\n * The WCS button relies on the native click event to pass a user click to your app.\n * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true.\n * This means you'll receive click events on a disabled wcs button.\n * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called.\n * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks.\n *\n * @cssprop --wcs-button-plain-color-default - Text/icon color of a plain button\n * @cssprop --wcs-button-stroked-color-default - text/icon color of a stroked button\n * @cssprop --wcs-button-clear-color-default - text/icon color of a clear button\n * \n * @cssprop --wcs-button-color-disabled - text/icon color disabled for mode plain, stroked, clear\n *\n * @cssprop --wcs-button-plain-background-color-default background color of a plain button\n * @cssprop --wcs-button-plain-background-color-disabled - disabled background color of a plain button\n * @cssprop --wcs-button-stroked-background-color-default background color of a stroked button\n * @cssprop --wcs-button-stroked-background-color-disabled - disabled background color of a stroked button\n * @cssprop --wcs-button-clear-background-color-default background color of a clear button\n * @cssprop --wcs-button-clear-background-color-disabled - disabled background color of a clear button\n * \n * @cssprop --wcs-button-plain-ripple-color-default - ripple background color of a plain button\n * @cssprop --wcs-button-stroked-ripple-color-default - ripple background color of a stroked button\n * @cssprop --wcs-button-clear-ripple-color-default - ripple background color of a clear button\n * @cssprop --wcs-button-border-radius-default - border radius for a default button\n * @cssprop --wcs-button-border-radius-rounded - border radius for a rounded button\n *\n * @cssprop --wcs-button-stroked-border-width - border width of a stroked button\n * @cssprop --wcs-button-stroked-border-color-default - default border color of a stroked button\n * @cssprop --wcs-button-stroked-border-color-disabled - disabled border color of a stroked button\n *\n * @cssprop --wcs-button-height-s - height for a size s button\n * @cssprop --wcs-button-font-size-s - font-size for a size s button\n * @cssprop --wcs-button-padding-size-s - padding for a size s button\n *\n * @cssprop --wcs-button-height-m - height for a size m button\n * @cssprop --wcs-button-font-size-m - font-size for a size m button\n * @cssprop --wcs-button-padding-size-m - padding for a size m button\n *\n * @cssprop --wcs-button-height-l - height for a size l button\n * @cssprop --wcs-button-font-size-l - font-size for a size l button\n * @cssprop --wcs-button-padding-size-l - padding for a size l button\n *\n * @cssprop --wcs-button-font-weight - font weight of a plain,stroked,clear button\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specify the button type.\n     */\n    @Prop({ mutable: true }) type: WcsButtonType = 'button';\n\n    /**\n     * Set a URL to point to.<br/>\n     * If specified use a `a` tag instead of `btn`.\n     */\n    @Prop() href?: string;\n\n    /**\n     * Specifies where to open the linked document when using href (see prop above)<br/>\n     * Default '_self' will open the linked document in the same frame as it was clicked\n     */\n    @Prop() target?: '_blank' | '_self';\n\n    /**\n     * Specify whether the button is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Specify whether the button should have a ripple effect or not.\n     */\n    @Prop() ripple = true;\n    private mdcRipple: MDCRipple;\n\n    /**\n     * Specify the size of the button.\n     */\n    @Prop({ reflect: true }) size: WcsButtonSize = 'm';\n\n    /**\n     * Specify the shape of the button.\n     */\n    @Prop({ reflect: true }) shape: WcsButtonShape = 'normal';\n\n    /**\n     * This attribute specify the appearance of the button.\n     */\n    @Prop({ reflect: true }) mode: WcsButtonMode = 'plain';\n\n    /**\n     * Flag to display spinner until the end of action\n     */\n    @Prop({ reflect: true, mutable: true }) loading: boolean = false;\n\n    /**\n     * Native event click is emit event if we decide to stop propagation of it\n     * @param ev\n     */\n    @Listen('click')  // TODO: define custom event click to be able to stop it's propagation when the custom button is disabled or is in loading state\n    onClick(ev: Event) {\n        if (this.disabled || this.loading) {\n            ev.stopImmediatePropagation();\n        }\n        if (this.type !== 'button' && hasShadowDom(this.el)) {\n            // this button wants to specifically submit a form\n            // climb up the dom to see if we're in a <form>\n            // and if so, then use JS to submit it\n            const form = this.el.closest('form');\n            if (form) {\n                ev.preventDefault();\n\n                const fakeButton = window.document.createElement('button');\n                fakeButton.type = this.type;\n                fakeButton.style.display = 'none';\n                form.appendChild(fakeButton);\n                fakeButton.click();\n                fakeButton.remove();\n            }\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, BUTTON_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\n        this.updateRippleState();\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    private updateRippleState() {\n        this.mdcRipple.disabled = !this.ripple;\n    }\n\n    private getTagName() {\n        return this.href !== undefined ? 'a' : 'button';\n    }\n\n    @Watch('ripple')\n    onRippleChange() {\n        this.updateRippleState();\n    }\n\n    render() {\n        const TagType = this.getTagName();\n        const attrs = this.href !== undefined\n            ? { href: this.href, role: 'button', target: this.target }\n            : { type: this.type };\n        return (\n            <TagType\n                {...attrs}\n                class=\"wcs-inner-button\"\n                disabled = {this.disabled || this.loading}\n                ref={(el: HTMLButtonElement | HTMLAnchorElement) => this.nativeButton = el}\n                {...this.inheritedAttributes}\n            >\n                {\n                    this.loading && <wcs-spinner></wcs-spinner>\n                }\n                <slot/>\n            </TagType>\n        );\n    }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport { MDCRipple } from '@material/ripple';\n\nimport {\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n    WcsButtonType\n} from './button-interface';\nimport { hasShadowDom, inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst BUTTON_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The button component is used to trigger an action. It can also be a link when specifying href.\n *\n * ## Accessibility guidelines 💡\n * > If your button doesn't contain text but only an image, you must set a relevant aria-label on the icon 👉 [see \"Square\" story below](#square)\n *\n * ## Click event\n *\n * The WCS button relies on the native click event to pass a user click to your app.\n * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true.\n * This means you'll receive click events on a disabled wcs button.\n * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called.\n * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks.\n *\n * @cssprop --wcs-button-plain-color-default - Text/icon color of a plain button\n * @cssprop --wcs-button-stroked-color-default - text/icon color of a stroked button\n * @cssprop --wcs-button-clear-color-default - text/icon color of a clear button\n *\n * @cssprop --wcs-button-color-disabled - text/icon color disabled for mode plain, stroked, clear\n *\n * @cssprop --wcs-button-plain-background-color-default background color of a plain button\n * @cssprop --wcs-button-plain-background-color-disabled - disabled background color of a plain button\n * @cssprop --wcs-button-stroked-background-color-default background color of a stroked button\n * @cssprop --wcs-button-stroked-background-color-disabled - disabled background color of a stroked button\n * @cssprop --wcs-button-clear-background-color-default background color of a clear button\n * @cssprop --wcs-button-clear-background-color-disabled - disabled background color of a clear button\n *\n * @cssprop --wcs-button-plain-ripple-color-default - ripple background color of a plain button\n * @cssprop --wcs-button-stroked-ripple-color-default - ripple background color of a stroked button\n * @cssprop --wcs-button-clear-ripple-color-default - ripple background color of a clear button\n * @cssprop --wcs-button-border-radius-default - border radius for a default button\n * @cssprop --wcs-button-border-radius-rounded - border radius for a rounded button\n *\n * @cssprop --wcs-button-stroked-border-width - border width of a stroked button\n * @cssprop --wcs-button-stroked-border-color-default - default border color of a stroked button\n * @cssprop --wcs-button-stroked-border-color-disabled - disabled border color of a stroked button\n *\n * @cssprop --wcs-button-height-s - height for a size s button\n * @cssprop --wcs-button-font-size-s - font-size for a size s button\n * @cssprop --wcs-button-padding-size-s - padding for a size s button\n *\n * @cssprop --wcs-button-height-m - height for a size m button\n * @cssprop --wcs-button-font-size-m - font-size for a size m button\n * @cssprop --wcs-button-padding-size-m - padding for a size m button\n *\n * @cssprop --wcs-button-height-l - height for a size l button\n * @cssprop --wcs-button-font-size-l - font-size for a size l button\n * @cssprop --wcs-button-padding-size-l - padding for a size l button\n *\n * @cssprop --wcs-button-font-weight - font weight of a plain,stroked,clear button\n * \n * @cssprop --wcs-button-gap - gap between button content (text and icons)\n * \n * @cssprop --wcs-button-start-icon-size-s - size of the start icon for a size s button\n * @cssprop --wcs-button-start-icon-size-m - size of the start icon for a size m button\n * @cssprop --wcs-button-start-icon-size-l - size of the start icon for a size l button\n * \n * @cssprop --wcs-button-end-icon-size-s - size of the end icon for a size s button\n * @cssprop --wcs-button-end-icon-size-m - size of the end icon for a size m button\n * @cssprop --wcs-button-end-icon-size-l - size of the end icon for a size l button\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specify the button type.\n     */\n    @Prop({ mutable: true }) type: WcsButtonType = 'button';\n\n    /**\n     * Set a URL to point to.<br/>\n     * If specified use a `a` tag instead of `btn`.\n     */\n    @Prop() href?: string;\n\n    /**\n     * Name of a wcs-mat-icon to display at the start (left) of the button.\n     */\n    @Prop() startIcon?: string;\n\n    /**\n     * Name of a wcs-mat-icon to display at the end (right) of the button.\n     */\n    @Prop() endIcon?: string;\n\n    /**\n     * Specifies where to open the linked document when using href (see prop above)<br/>\n     * Default '_self' will open the linked document in the same frame as it was clicked\n     */\n    @Prop() target?: '_blank' | '_self';\n\n    /**\n     * Specify whether the button is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Specify whether the button should have a ripple effect or not.\n     */\n    @Prop() ripple = true;\n    private mdcRipple: MDCRipple;\n\n    /**\n     * Specify the size of the button.\n     */\n    @Prop({ reflect: true }) size: WcsButtonSize = 'm';\n\n    /**\n     * Specify the shape of the button.\n     */\n    @Prop({ reflect: true }) shape: WcsButtonShape = 'normal';\n\n    /**\n     * This attribute specify the appearance of the button.\n     */\n    @Prop({ reflect: true }) mode: WcsButtonMode = 'plain';\n\n    /**\n     * Flag to display spinner until the end of action\n     */\n    @Prop({ reflect: true, mutable: true }) loading: boolean = false;\n\n    /**\n     * Native event click is emit event if we decide to stop propagation of it\n     * @param ev\n     */\n    @Listen('click')  // TODO: define custom event click to be able to stop it's propagation when the custom button is disabled or is in loading state\n    onClick(ev: Event) {\n        if (this.disabled || this.loading) {\n            ev.stopImmediatePropagation();\n        }\n        if (this.type !== 'button' && hasShadowDom(this.el)) {\n            // this button wants to specifically submit a form\n            // climb up the dom to see if we're in a <form>\n            // and if so, then use JS to submit it\n            const form = this.el.closest('form');\n            if (form) {\n                ev.preventDefault();\n\n                const fakeButton = window.document.createElement('button');\n                fakeButton.type = this.type;\n                fakeButton.style.display = 'none';\n                form.appendChild(fakeButton);\n                fakeButton.click();\n                fakeButton.remove();\n            }\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, BUTTON_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\n        this.updateRippleState();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    private updateRippleState() {\n        this.mdcRipple.disabled = !this.ripple;\n    }\n\n    private getTagName() {\n        return this.href !== undefined ? 'a' : 'button';\n    }\n\n    @Watch('ripple')\n    onRippleChange() {\n        this.updateRippleState();\n    }\n\n    render() {\n        const TagType = this.getTagName();\n        const attrs = this.href !== undefined\n            ? { href: this.href, role: 'button', target: this.target }\n            : { type: this.type };\n        return (\n            <TagType\n                {...attrs}\n                class=\"wcs-inner-button\"\n                disabled = {this.disabled || this.loading}\n                ref={(el: HTMLButtonElement | HTMLAnchorElement) => this.nativeButton = el}\n                {...this.inheritedAttributes}\n            >\n                {this.loading && <wcs-spinner></wcs-spinner>}\n                {/* We decide to keep icon to size m, because we want to manually handle the font size based on the button one's */}\n                {this.startIcon && <wcs-mat-icon id=\"start-icon\" size='m' icon={this.startIcon}></wcs-mat-icon>}\n                <slot/>\n                {this.endIcon && <wcs-mat-icon id=\"end-icon\" size='m' icon={this.endIcon}></wcs-mat-icon>}\n            </TagType>\n        );\n    }\n}\n"]}

package/dist/collection/components/card/card.js

@@ -51,7 +51,7 @@ export class Card {
         return this.el.querySelector('wcs-card-body');
     }
     render() {
-        return (h("slot", { key: '58153235717a53e0b2fc02a22a8656985059d292', onSlotchange: () => this.onSlotChange() }));
+        return (h("slot", { key: 'ad099801956318833081d25c13d014bfea7d6482', onSlotchange: () => this.onSlotChange() }));
     }
     static get is() { return "wcs-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-body/card-body.js

@@ -18,7 +18,7 @@ export class CardBody {
         this.orientation = orientation;
     }
     render() {
-        return (h(Host, { key: '27547ebfbab0737a4947baf9ff4086d37b494155', class: this.orientation }, h("slot", { key: 'f9444717438f9981b479b39575c03297b04a5847' })));
+        return (h(Host, { key: 'cae1b8af34a96e747e3e8b281d7bff90d2e55f40', class: this.orientation }, h("slot", { key: 'd62727e6291f2e0913ac3dd29b44bda542101687' })));
     }
     static get is() { return "wcs-card-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-content/card-content.js

@@ -17,7 +17,7 @@ import { Host, h } from "@stencil/core";
  */
 export class CardContent {
     render() {
-        return (h(Host, { key: 'c270d71ea05c98a0bb8acc01809d3d0e66b13152' }, h("slot", { key: 'caa336108533b717cf8ae3620382ffae05aabd9b' })));
+        return (h(Host, { key: '1ec73be8ca667468b90bdba53ba3e7db263198ad' }, h("slot", { key: '3bc5b7bcb24c01974b1de78864d50a2ded6822d3' })));
     }
     static get is() { return "wcs-card-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-footer/card-footer.js

@@ -7,7 +7,7 @@ import { Host, h } from "@stencil/core";
  */
 export class CardFooter {
     render() {
-        return (h(Host, { key: '8b600e63a3178bbf9c3d577053b927ff6ea9a48f' }, h("slot", { key: '1ce0728f66cd296c44dcc4d85c9e9d9dcbae853a' })));
+        return (h(Host, { key: 'b4cb7626b89fd1b2a8a63bf86cdcd7be94f52490' }, h("slot", { key: '33ad1bca3da4f4626cd95b023e34ebd0d2769cab' })));
     }
     static get is() { return "wcs-card-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-header/card-header.js

@@ -14,7 +14,7 @@ import { Host, h } from "@stencil/core";
  */
 export class CardHeader {
     render() {
-        return (h(Host, { key: '6a79563b6c56b7c7262e447ea5946d094590afb6' }, h("slot", { key: '74b2f0d43ee991ebee97c0d9d7f6620e30dc9881', name: "badges" }), h("div", { key: '71f110c0e5360352a059d84235c1a1d513c83c0a', class: "header-content" }, h("h3", { key: '4b4763ae375f4b96e0018772df7f9af0a4fd20fe' }, h("slot", { key: 'c2925912655cbca5e351067e42f6a9c67de07083' })), h("slot", { key: '37b2f523adaf2685de1d76dde3942dba5c2379c1', name: "actions" }))));
+        return (h(Host, { key: '076bbf30337bf078dcbe0440f331770f6f972d75' }, h("slot", { key: '968eb49e82378adf277049329678de5321c6eaa5', name: "badges" }), h("div", { key: '31905f8b42b83ce332a15eaf10a9c30f622eef43', class: "header-content" }, h("h3", { key: 'f392a4c7cd130e6aec82d70b9f2ebca6c9efa27f' }, h("slot", { key: '3b940462fd222749e9dfa2654bf42b61419443cd' })), h("slot", { key: '41751b8ca5ed6e0b5b73940e1103452842ba092c', name: "actions" }))));
     }
     static get is() { return "wcs-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-media/card-media.js

@@ -21,7 +21,7 @@ export class CardMedia {
         this.orientation = orientation;
     }
     render() {
-        return (h(Host, { key: '8b54a791a4d1c8bfdc772cb5cd16f3a3dfec0682', class: this.orientation }, h("slot", { key: 'a7f5751e8e1f3ef3b1b18af34384cb598a80b690' }), this.orientation === 'vertical' ? h("slot", { name: "vertical" }) : h("slot", { name: "horizontal" })));
+        return (h(Host, { key: '5fa4c3caf607dd3d9159615fc040bb0876d7f196', class: this.orientation }, h("slot", { key: '71e36b2b56ef12bc0d7910b24e04c204a3ec8de2' }), this.orientation === 'vertical' ? h("slot", { name: "vertical" }) : h("slot", { name: "horizontal" })));
     }
     static get is() { return "wcs-card-media"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/checkbox.js

@@ -118,7 +118,7 @@ export class Checkbox {
         }
     }
     render() {
-        return (h(Host, { key: '84af94b1e903c4a7a44d7c216b122faa1d67c125' }, h("label", { key: 'df9cd51e804a3d07dcd9698b98492f868747a5ef', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, h("input", Object.assign({ key: '68d52bb45b20bd37dfab4845e7a664b0a5e65e49', onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), onFocus: this.handleFocus.bind(this), onClick: this.handleInputClick.bind(this), checked: this.checked, class: "wcs-checkbox", type: "checkbox", ref: (el) => (this.nativeInput = el), name: this.name, disabled: this.disabled, id: this.name }, this.inheritedAttributes)), h("span", { key: '506c869a0bcbf742422e7b2029e8862687cbf286', class: "wcs-checkmark" }), h("span", { key: '81e8130a3f3eed1d02d0bf075f5793b0e12a64ae', class: "text" }, h("slot", { key: '97387419d47b55af6c4911df5aeaa2bcd89f750c', onSlotchange: (_) => this.onSlotChange() })))));
+        return (h(Host, { key: '5fd6c24e65737d519d2c1bc2542c388102045a68' }, h("label", { key: 'b8d19ab82557533773c9c8b212ff0252207ac297', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, h("input", Object.assign({ key: '5fb8bd0f083d35478445dca15abf4a3ab9203a5f', onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), onFocus: this.handleFocus.bind(this), onClick: this.handleInputClick.bind(this), checked: this.checked, class: "wcs-checkbox", type: "checkbox", ref: (el) => (this.nativeInput = el), name: this.name, disabled: this.disabled, id: this.name }, this.inheritedAttributes)), h("span", { key: '8392d4a4959edb657d18ad72b0cab722ee0f5ab5', class: "wcs-checkmark" }), h("span", { key: '442f8a695ce2eb54171dd222113dfb5c654b4510', class: "text" }, h("slot", { key: 'b67d13f75fef7c21b9152c431310e88a3a6e905d', onSlotchange: (_) => this.onSlotChange() })))));
     }
     static get is() { return "wcs-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/chip.e2e.playwright.js

@@ -185,6 +185,39 @@ test.describe('Chip component', () => {
             const c3 = page.locator('#c3');
             await expect(c3).toBeFocused();
         });
+        test('after dismissing the last chip, focus moves to previous actionable chip', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <div>
+                    <wcs-chip id="c1" value="c1" label="One"></wcs-chip>
+                    <wcs-chip id="c2" mode="dismissible" value="c2" label="Two"></wcs-chip>
+                </div>
+            `);
+            const c2 = page.locator('#c2 button');
+            // When
+            await c2.click();
+            await page.waitForChanges();
+            // Then
+            const c1 = page.locator('#c1');
+            await expect(c1).toBeFocused();
+        });
+        test('skips disabled previous chips when moving focus after dismissing the last chip', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <div>
+                    <wcs-chip id="c1" value="c1" label="One"></wcs-chip>
+                    <wcs-chip id="c2" disabled value="c2" label="Two"></wcs-chip>
+                    <wcs-chip id="c3" mode="dismissible" value="c3" label="Three"></wcs-chip>
+                </div>
+            `);
+            const c3 = page.locator('#c3 button');
+            // When
+            await c3.click();
+            await page.waitForChanges();
+            // Then
+            const c1 = page.locator('#c1');
+            await expect(c1).toBeFocused();
+        });
     });
 });
 //# sourceMappingURL=chip.e2e.playwright.js.map

package/dist/collection/components/chip/chip.e2e.playwright.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/chip/chip.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Chip component', () => {\n    test.describe('Events', () => {\n        test('should emit wcsChipSelectChange with selected=true on click (selectable by default)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');\n\n            // When\n            await chip.click();\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventDetail({ value: 'chip-id', selected: true });\n        });\n\n        test('should toggle selection and emit on Space/Enter (selectable)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');\n\n            // When - Space selects\n            await chip.focus();\n            await chip.press('Space');\n            // When - Enter toggles back\n            await chip.press('Enter');\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventTimes(2);\n            expect(wcsChipSelectChangeEventSpy).toHaveNthReceivedEventDetail(1, { value: 'chip-id', selected: false });\n        });\n\n        test('should emit wcsChipDismiss when clicking dismiss button (dismissible)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip mode=\"dismissible\" value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');\n            const dismissBtn = page.locator('wcs-chip button');\n\n            // When\n            await dismissBtn.click();\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipDismissEventSpy).toHaveReceivedEventDetail({ value: 'chip-id' });\n            // open prop should be false -> attribute removed\n            await expect(chip).not.toHaveAttribute('open');\n        });\n    });\n\n    test.describe('Keyboard', () => {\n        test('Delete/Backspace on dismiss button dismisses the chip', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip mode=\"dismissible\" value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');\n            const dismissBtn = page.locator('wcs-chip button');\n\n            // When\n            await dismissBtn.focus();\n            await page.keyboard.press('Delete');\n            await page.waitForChanges();\n\n            // Then\n            await expect(wcsChipDismissEventSpy).toHaveReceivedEventTimes(1);\n            await expect(chip).not.toHaveAttribute('open');\n        });\n    });\n\n    test.describe('Accessibility', () => {\n        test('exposes proper ARIA for selectable: role=checkbox, aria-checked toggles, tabindex respects disabled', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n\n            // Then default\n            await expect(chip).toHaveAttribute('role', 'checkbox');\n            await expect(chip).toHaveAttribute('aria-checked', 'false');\n            await expect(chip).toHaveAttribute('tabindex', '0');\n\n            // When\n            await chip.click();\n            await page.waitForChanges();\n\n            // Then toggled\n            await expect(chip).toHaveAttribute('aria-checked', 'true');\n        });\n\n        test('exposes proper ARIA/disabled for dismissible: button has label and respects disabled', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip mode=\"dismissible\" value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const btn = page.locator('wcs-chip button');\n\n            // Then\n            await expect(btn).toHaveAttribute('aria-label', 'Supprimer Chip');\n\n            // When disabled\n            await chip.evaluate((el: any) => el.disabled = true);\n            await page.waitForChanges();\n\n            // Then\n            await expect(chip).toHaveAttribute('aria-disabled', 'true');\n            await expect(btn).toBeDisabled();\n        });\n    });\n\n    test.describe('Disabled state', () => {\n        test('does not emit select event when disabled (click and Space)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip disabled value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');\n\n            // When\n            await chip.click({ force: true });\n            await chip.press('Space');\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventTimes(0);\n            await expect(chip).toHaveAttribute('tabindex', '-1');\n            await expect(chip).toHaveAttribute('aria-checked', 'false');\n        });\n\n        test('does not emit dismiss event when disabled', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip disabled mode=\"dismissible\" value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');\n            const btn = page.locator('wcs-chip button');\n\n            // When\n            await btn.click({ force: true });\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipDismissEventSpy).toHaveReceivedEventTimes(0);\n            await expect(chip).toHaveAttribute('open', '');\n        });\n    });\n\n    test.describe('Focus management', () => {\n        test('after dismiss, focus moves to next actionable chip (selectable host)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <div>\n                    <wcs-chip id=\"c1\" mode=\"dismissible\" value=\"c1\" label=\"One\"></wcs-chip>\n                    <wcs-chip id=\"c2\" value=\"c2\" label=\"Two\"></wcs-chip>\n                </div>\n            `);\n\n            const btn = page.locator('#c1 button');\n\n            // When\n            await btn.click();\n            await page.waitForChanges();\n\n            // Then\n            const c2 = page.locator('#c2');\n            await expect(c2).toBeFocused();\n        });\n\n        test('after dismiss, focus moves to next actionable chip (dismissable host)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <div>\n                    <wcs-chip id=\"c1\" mode=\"dismissible\" value=\"c1\" label=\"One\"></wcs-chip>\n                    <wcs-chip id=\"c2\" mode=\"dismissible\" value=\"c2\" label=\"Two\"></wcs-chip>\n                </div>\n            `);\n\n            const c1 = page.locator('#c1 button');\n\n            // When\n            await c1.click();\n            await page.waitForChanges();\n\n            // Then\n            const c2 = page.locator('#c2');\n            await expect(c2).toBeFocused();\n        });\n\n        test('skips disabled chips when moving focus after dismiss', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <div>\n                    <wcs-chip id=\"c1\" mode=\"dismissible\" value=\"c1\" label=\"One\"></wcs-chip>\n                    <wcs-chip id=\"c2\" disabled value=\"c2\" label=\"Two\"></wcs-chip>\n                    <wcs-chip id=\"c3\" value=\"c3\" label=\"Three\"></wcs-chip>\n                </div>\n            `);\n\n            const btn = page.locator('#c1 button');\n\n            // When\n            await btn.click();\n            await page.waitForChanges();\n\n            // Then\n            const c3 = page.locator('#c3');\n            await expect(c3).toBeFocused();\n        });\n    });\n});\n"]}
+{"version":3,"file":"chip.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/chip/chip.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Chip component', () => {\n    test.describe('Events', () => {\n        test('should emit wcsChipSelectChange with selected=true on click (selectable by default)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');\n\n            // When\n            await chip.click();\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventDetail({ value: 'chip-id', selected: true });\n        });\n\n        test('should toggle selection and emit on Space/Enter (selectable)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');\n\n            // When - Space selects\n            await chip.focus();\n            await chip.press('Space');\n            // When - Enter toggles back\n            await chip.press('Enter');\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventTimes(2);\n            expect(wcsChipSelectChangeEventSpy).toHaveNthReceivedEventDetail(1, { value: 'chip-id', selected: false });\n        });\n\n        test('should emit wcsChipDismiss when clicking dismiss button (dismissible)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip mode=\"dismissible\" value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');\n            const dismissBtn = page.locator('wcs-chip button');\n\n            // When\n            await dismissBtn.click();\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipDismissEventSpy).toHaveReceivedEventDetail({ value: 'chip-id' });\n            // open prop should be false -> attribute removed\n            await expect(chip).not.toHaveAttribute('open');\n        });\n    });\n\n    test.describe('Keyboard', () => {\n        test('Delete/Backspace on dismiss button dismisses the chip', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip mode=\"dismissible\" value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');\n            const dismissBtn = page.locator('wcs-chip button');\n\n            // When\n            await dismissBtn.focus();\n            await page.keyboard.press('Delete');\n            await page.waitForChanges();\n\n            // Then\n            await expect(wcsChipDismissEventSpy).toHaveReceivedEventTimes(1);\n            await expect(chip).not.toHaveAttribute('open');\n        });\n    });\n\n    test.describe('Accessibility', () => {\n        test('exposes proper ARIA for selectable: role=checkbox, aria-checked toggles, tabindex respects disabled', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n\n            // Then default\n            await expect(chip).toHaveAttribute('role', 'checkbox');\n            await expect(chip).toHaveAttribute('aria-checked', 'false');\n            await expect(chip).toHaveAttribute('tabindex', '0');\n\n            // When\n            await chip.click();\n            await page.waitForChanges();\n\n            // Then toggled\n            await expect(chip).toHaveAttribute('aria-checked', 'true');\n        });\n\n        test('exposes proper ARIA/disabled for dismissible: button has label and respects disabled', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip mode=\"dismissible\" value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const btn = page.locator('wcs-chip button');\n\n            // Then\n            await expect(btn).toHaveAttribute('aria-label', 'Supprimer Chip');\n\n            // When disabled\n            await chip.evaluate((el: any) => el.disabled = true);\n            await page.waitForChanges();\n\n            // Then\n            await expect(chip).toHaveAttribute('aria-disabled', 'true');\n            await expect(btn).toBeDisabled();\n        });\n    });\n\n    test.describe('Disabled state', () => {\n        test('does not emit select event when disabled (click and Space)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip disabled value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');\n\n            // When\n            await chip.click({ force: true });\n            await chip.press('Space');\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventTimes(0);\n            await expect(chip).toHaveAttribute('tabindex', '-1');\n            await expect(chip).toHaveAttribute('aria-checked', 'false');\n        });\n\n        test('does not emit dismiss event when disabled', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip disabled mode=\"dismissible\" value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');\n            const btn = page.locator('wcs-chip button');\n\n            // When\n            await btn.click({ force: true });\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipDismissEventSpy).toHaveReceivedEventTimes(0);\n            await expect(chip).toHaveAttribute('open', '');\n        });\n    });\n\n    test.describe('Focus management', () => {\n        test('after dismiss, focus moves to next actionable chip (selectable host)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <div>\n                    <wcs-chip id=\"c1\" mode=\"dismissible\" value=\"c1\" label=\"One\"></wcs-chip>\n                    <wcs-chip id=\"c2\" value=\"c2\" label=\"Two\"></wcs-chip>\n                </div>\n            `);\n\n            const btn = page.locator('#c1 button');\n\n            // When\n            await btn.click();\n            await page.waitForChanges();\n\n            // Then\n            const c2 = page.locator('#c2');\n            await expect(c2).toBeFocused();\n        });\n\n        test('after dismiss, focus moves to next actionable chip (dismissable host)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <div>\n                    <wcs-chip id=\"c1\" mode=\"dismissible\" value=\"c1\" label=\"One\"></wcs-chip>\n                    <wcs-chip id=\"c2\" mode=\"dismissible\" value=\"c2\" label=\"Two\"></wcs-chip>\n                </div>\n            `);\n\n            const c1 = page.locator('#c1 button');\n\n            // When\n            await c1.click();\n            await page.waitForChanges();\n\n            // Then\n            const c2 = page.locator('#c2');\n            await expect(c2).toBeFocused();\n        });\n\n        test('skips disabled chips when moving focus after dismiss', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <div>\n                    <wcs-chip id=\"c1\" mode=\"dismissible\" value=\"c1\" label=\"One\"></wcs-chip>\n                    <wcs-chip id=\"c2\" disabled value=\"c2\" label=\"Two\"></wcs-chip>\n                    <wcs-chip id=\"c3\" value=\"c3\" label=\"Three\"></wcs-chip>\n                </div>\n            `);\n\n            const btn = page.locator('#c1 button');\n\n            // When\n            await btn.click();\n            await page.waitForChanges();\n\n            // Then\n            const c3 = page.locator('#c3');\n            await expect(c3).toBeFocused();\n        });\n\n        test('after dismissing the last chip, focus moves to previous actionable chip', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <div>\n                    <wcs-chip id=\"c1\" value=\"c1\" label=\"One\"></wcs-chip>\n                    <wcs-chip id=\"c2\" mode=\"dismissible\" value=\"c2\" label=\"Two\"></wcs-chip>\n                </div>\n            `);\n\n            const c2 = page.locator('#c2 button');\n\n            // When\n            await c2.click();\n            await page.waitForChanges();\n\n            // Then\n            const c1 = page.locator('#c1');\n            await expect(c1).toBeFocused();\n        });\n\n        test('skips disabled previous chips when moving focus after dismissing the last chip', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <div>\n                    <wcs-chip id=\"c1\" value=\"c1\" label=\"One\"></wcs-chip>\n                    <wcs-chip id=\"c2\" disabled value=\"c2\" label=\"Two\"></wcs-chip>\n                    <wcs-chip id=\"c3\" mode=\"dismissible\" value=\"c3\" label=\"Three\"></wcs-chip>\n                </div>\n            `);\n\n            const c3 = page.locator('#c3 button');\n\n            // When\n            await c3.click();\n            await page.waitForChanges();\n\n            // Then\n            const c1 = page.locator('#c1');\n            await expect(c1).toBeFocused();\n        });\n    });\n});\n"]}

package/dist/collection/components/chip/chip.js

@@ -92,17 +92,30 @@ export class Chip {
     dismiss() {
         this.open = false;
         this.wcsChipDismiss.emit({ value: this.value });
-        this.focusNextChip();
+        const nextChip = this.findAdjacentActionableChip('next');
+        if (nextChip) {
+            this.focusChip(nextChip);
+        }
+        else {
+            const previousChip = this.findAdjacentActionableChip('previous');
+            if (previousChip) {
+                this.focusChip(previousChip);
+            }
+            ;
+        }
     }
-    focusNextChip() {
-        let currentElement = this.el.nextElementSibling;
+    findAdjacentActionableChip(direction) {
+        const getSibling = (el) => direction === 'next'
+            ? el.nextElementSibling
+            : el.previousElementSibling;
+        let currentElement = getSibling(this.el);
         while (currentElement) {
             if (this.isActionableChip(currentElement)) {
-                this.focusChip(currentElement);
-                return;
+                return currentElement;
             }
-            currentElement = currentElement.nextElementSibling;
+            currentElement = getSibling(currentElement);
         }
+        return null;
     }
     isActionableChip(element) {
         return element instanceof HTMLElement

package/dist/collection/components/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["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":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/com-nav/com-nav.js

@@ -78,11 +78,11 @@ export class ComNav {
     }
     render() {
         const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;
-        return (h(Host, { key: 'b39ff3dbd6d304ad0252e0fcfd2e0c5716b666db' }, h("div", { key: 'f84b73c9cee6295a7776576afeb61b65b71ea34e', class: "container" }, h("div", { key: 'a39b867e9d102abb4e4c13503a544681cd9b7fd8', class: "container-left" }, h("div", { key: '49db5dd80f097a9b2ccaf39fc64be9f6100108be', class: "app-name" }, this.appName, h("slot", { key: '3cfe05e6e510826ffd2168e6edc3380bc92ad459', name: "app-name" })), this.currentActiveSizing === 'desktop' ?
+        return (h(Host, { key: '0ad6128d41f1a09da5bfc1668a9c5ca88e0a10dc' }, h("div", { key: '3c6fc5016fe04299461271e9d7ee5d52198e0e94', class: "container" }, h("div", { key: '229cb6d60903fd5d7998db5079589a67af95f87c', class: "container-left" }, h("div", { key: '59d5ece9de29819279b2601646e5a95e48f5113d', class: "app-name" }, this.appName, h("slot", { key: '4b205236b381eb02b8aeaf7149f00c2ccf24f1a0', name: "app-name" })), this.currentActiveSizing === 'desktop' ?
             h("nav", Object.assign({ role: "navigation" }, this.inheritedAttributes), h("div", { class: "menu-bar", role: "list" }, this.currentActiveSizing === 'desktop'
                 ? h("slot", null)
                 : null))
-            : null), h("div", { key: '83496cccd32eec07f5a508dbf36b591442e668e2', class: "container-right" }, h("slot", { key: 'cf68946afcefa0b77fb57019f9734e5ff1e763aa', name: "actions" }), this.currentActiveSizing === 'mobile' ?
+            : null), h("div", { key: '49ee0dd4b30bab8e83707380daee66220dd74117', class: "container-right" }, h("slot", { key: '3cf89cb129b2a59221578f5da6410965fb3f4da2', name: "actions" }), this.currentActiveSizing === 'mobile' ?
             h("nav", Object.assign({ id: "wcs-com-nav-mobile-menu", role: "navigation" }, this.inheritedAttributes), 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'
                 ? h("div", { class: "mobile-overlay", "data-mobile-open": this.mobileMenuOpen, role: "list" }, h("slot", null))
                 : null)

package/dist/collection/components/com-nav-category/com-nav-category.js

@@ -103,9 +103,9 @@ export class ComNavCategory {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '0b5d69d30228c1585c17d74bf8183f6fe91c1696', role: "listitem", onClick: evt => this.onClick(evt) }, this.currentActiveSizing === 'mobile' ?
+        return (h(Host, { key: 'cab005c22a1390a75127cc8ee4691a90fb06443c', role: "listitem", onClick: evt => this.onClick(evt) }, this.currentActiveSizing === 'mobile' ?
             h("h3", { role: "presentation", class: "label-container" }, h("span", { class: "label" }, this.label))
-            : 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), h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))), 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) }, h("slot", { key: '0cd3f5916499f4e14d554e7fe963a2a384c4b39d' }))));
+            : 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), h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))), 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) }, h("slot", { key: 'ee841a45fa5d9ec6a80c8015246551c4eb793dcf' }))));
     }
     static get is() { return "wcs-com-nav-category"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/com-nav-item/com-nav-item.js

@@ -12,7 +12,7 @@ export class ComNavItem {
         this.wcsClickOnFinalAction.emit();
     }
     render() {
-        return (h(Host, { key: '25690c3eecac76d2b29b0aeda90f5e1bf5fd0b22', role: "listitem" }, h("slot", { key: '236d67ffd9fefb7650d2b67cee685852030adb4b' }), h("span", { key: '2ef478d77dc28d169817500145c8d9df525bd439', class: "arrow-container" }, h("span", { key: '0fafbba11e817663ad7e18ff6947cdbd07494f69', "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))));
+        return (h(Host, { key: 'f99424e8faebbae16b206f49c003a34bd6824b6a', role: "listitem" }, h("slot", { key: 'f6b8dc69ba05d1c9ca8785b2905218612e9e6b8e' }), h("span", { key: 'b24f65c8fd58dcccca47d55ed18ab74f6572b122', class: "arrow-container" }, h("span", { key: '7f7e3cabd2006d703474969edfca277d0fc6ce0c', "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))));
     }
     static get is() { return "wcs-com-nav-item"; }
     static get encapsulation() { return "shadow"; }