wcs-core 7.2.2 → 7.4.0

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

@@ -53,6 +53,7 @@ export class Checkbox {
         this.name = this.checkboxId;
         this.indeterminate = false;
         this.checked = false;
+        this.required = false;
         this.labelAlignment = 'center';
         this.disabled = false;
     }
@@ -117,7 +118,7 @@ export class Checkbox {
         }
     }
     render() {
-        return (h(Host, { key: 'a2215c880bbe8e2751505e44275e5cd085266baa' }, h("label", { key: 'ce09cb611a5e40695e2c2a8734501b28a04fe581', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, h("input", Object.assign({ key: 'ac1a253cfe304ed08e83383137f83e3bcc2403b9', 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: '04814a8a11514ee090d04b708095553c73aea6f8', class: "wcs-checkmark" }), h("span", { key: '8a2894a93d030a2854b39a47cad63066d0b6904a', class: "text" }, h("slot", { key: '40d804d00c1e3ba9eff5aa510b252a95a089e416', onSlotchange: (_) => this.onSlotChange() })))));
+        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() })))));
     }
     static get is() { return "wcs-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -188,6 +189,24 @@ export class Checkbox {
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user must fill in a value before submitting a form."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "labelAlignment": {
                 "type": "string",
                 "mutable": true,
@@ -303,7 +322,7 @@ export class Checkbox {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    Event,\n    EventEmitter,\n    ComponentInterface,\n    h,\n    Host,\n    Method,\n    Element,\n    Listen\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.\n * \n * @cssprop --wcs-checkbox-border-color-default - Default color of the border\n * @cssprop --wcs-checkbox-border-color-hover - Color of the border when hovered\n * @cssprop --wcs-checkbox-border-color-disabled - Color of the border when disabled\n * @cssprop --wcs-checkbox-border-color-selected - Color of the border when selected\n * @cssprop --wcs-checkbox-border-color-indeterminate - Color of the border when indeterminate\n * \n * @cssprop --wcs-checkbox-border-radius - Border radius of the checkbox\n * @cssprop --wcs-checkbox-border-width - Width of the border of the checkbox\n * \n * @cssprop --wcs-checkbox-size - Size of the checkbox\n * \n * @cssprop --wcs-checkbox-text-color-default - Color of the text when the checkbox is not selected\n * @cssprop --wcs-checkbox-text-color-disabled - Color of the text when the checkbox is disabled\n * @cssprop --wcs-checkbox-text-color-hover - Color of the text when the checkbox is hovered\n * @cssprop --wcs-checkbox-text-color-selected - Color of the text when the checkbox is selected\n * \n * @cssprop --wcs-checkbox-text-font-size - Font size of the text\n * @cssprop --wcs-checkbox-text-font-weight - Font weight of the text\n * \n * @cssprop --wcs-checkbox-background-color-default - Default background color of the checkbox\n * @cssprop --wcs-checkbox-background-color-hover - Background color of the checkbox when hovered\n * @cssprop --wcs-checkbox-background-color-disabled - Background color of the checkbox when disabled\n * @cssprop --wcs-checkbox-background-color-selected - Background color of the checkbox when selected\n * @cssprop --wcs-checkbox-background-color-indeterminate - Background color of the checkbox when indeterminate\n * \n * @cssprop --wcs-checkbox-outline-radius-focus - Border radius of the focus outline\n * @cssprop --wcs-checkbox-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-checkbox-gap - Gap between the checkbox and the label\n * @cssprop --wcs-checkmark-color - Color of the checkmark\n * @cssprop --wcs-checkmark-height - Height of the checkmark (From the bottom left to the top right of the checkmark)\n * @cssprop --wcs-checkmark-width - Width of the checkmark (From the bottom right to the top left of the checkmark)\n * @cssprop --wcs-checkmark-border-width - Width of the border of the checkmark\n *\n * @cssprop --wcs-indeterminate-bar-width - Width of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-height - Height of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-border-radius - Border-radius of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-background-color - Color of the indeterminate bar\n * \n * @cssprop --wcs-checkbox-transition-duration - Duration of the transition\n */\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: {\n        delegatesFocus: true,\n    },\n})\nexport class Checkbox implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n    @Element() private el!: HTMLElement;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n\n    @Prop() name = this.checkboxId;\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify whether the checkbox is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    /**\n     * Emitted when the checkbox has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the checkbox loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, CHECKBOX_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.onSlotChange();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    @Method()\n    async getLabel(): Promise<string> {\n        return getSlottedContentText(this.el);\n    }\n\n    handleChange(e: Event) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        this.toggleCheckboxState();\n    }\n    \n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n        \n        this.toggleCheckboxState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleCheckboxState() {\n        if (this.disabled) return;\n        \n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n    \n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    onSlotChange() { \n        const slot = this.el.shadowRoot.querySelector('slot');\n        if (slot) {\n            // TODO: remove when pseudo-class that indicate a slot has content is supported in all major browsers \n            //  (https://github.com/w3c/csswg-drafts/issues/6867)\n            // https://developer.mozilla.org/en-US/docs/Web/CSS/:empty\n            const assignedNodes = slot.assignedNodes();\n            if (assignedNodes.length > 0) {\n                this.el.shadowRoot.querySelector('.text').classList.remove('hidden');\n            } else {\n                this.el.shadowRoot.querySelector('.text').classList.add('hidden');\n            }\n        }\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input\n                        onBlur={this.handleBlur.bind(this)}\n                        onChange={this.handleChange.bind(this)}\n                        onFocus={this.handleFocus.bind(this)}\n                        onClick={this.handleInputClick.bind(this)}\n                        checked={this.checked}\n                        class=\"wcs-checkbox\"\n                        type=\"checkbox\"\n                        ref={(el) => (this.nativeInput = el)}\n                        name={this.name}\n                        disabled={this.disabled}\n                        id={this.name}\n                        {...this.inheritedAttributes}\n                    ></input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot onSlotchange={(_) => this.onSlotChange()} />\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    Event,\n    EventEmitter,\n    ComponentInterface,\n    h,\n    Host,\n    Method,\n    Element,\n    Listen\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.\n * \n * @cssprop --wcs-checkbox-border-color-default - Default color of the border\n * @cssprop --wcs-checkbox-border-color-hover - Color of the border when hovered\n * @cssprop --wcs-checkbox-border-color-disabled - Color of the border when disabled\n * @cssprop --wcs-checkbox-border-color-selected - Color of the border when selected\n * @cssprop --wcs-checkbox-border-color-indeterminate - Color of the border when indeterminate\n * \n * @cssprop --wcs-checkbox-border-radius - Border radius of the checkbox\n * @cssprop --wcs-checkbox-border-width - Width of the border of the checkbox\n * \n * @cssprop --wcs-checkbox-size - Size of the checkbox\n * \n * @cssprop --wcs-checkbox-text-color-default - Color of the text when the checkbox is not selected\n * @cssprop --wcs-checkbox-text-color-disabled - Color of the text when the checkbox is disabled\n * @cssprop --wcs-checkbox-text-color-hover - Color of the text when the checkbox is hovered\n * @cssprop --wcs-checkbox-text-color-selected - Color of the text when the checkbox is selected\n * \n * @cssprop --wcs-checkbox-text-font-size - Font size of the text\n * @cssprop --wcs-checkbox-text-font-weight - Font weight of the text\n * \n * @cssprop --wcs-checkbox-background-color-default - Default background color of the checkbox\n * @cssprop --wcs-checkbox-background-color-hover - Background color of the checkbox when hovered\n * @cssprop --wcs-checkbox-background-color-disabled - Background color of the checkbox when disabled\n * @cssprop --wcs-checkbox-background-color-selected - Background color of the checkbox when selected\n * @cssprop --wcs-checkbox-background-color-indeterminate - Background color of the checkbox when indeterminate\n * \n * @cssprop --wcs-checkbox-outline-radius-focus - Border radius of the focus outline\n * @cssprop --wcs-checkbox-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-checkbox-gap - Gap between the checkbox and the label\n * @cssprop --wcs-checkmark-color - Color of the checkmark\n * @cssprop --wcs-checkmark-height - Height of the checkmark (From the bottom left to the top right of the checkmark)\n * @cssprop --wcs-checkmark-width - Width of the checkmark (From the bottom right to the top left of the checkmark)\n * @cssprop --wcs-checkmark-border-width - Width of the border of the checkmark\n *\n * @cssprop --wcs-indeterminate-bar-width - Width of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-height - Height of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-border-radius - Border-radius of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-background-color - Color of the indeterminate bar\n * \n * @cssprop --wcs-checkbox-transition-duration - Duration of the transition\n */\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: {\n        delegatesFocus: true,\n    },\n})\nexport class Checkbox implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n    @Element() private el!: HTMLElement;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n\n    @Prop() name = this.checkboxId;\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop() required: boolean = false\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify whether the checkbox is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    /**\n     * Emitted when the checkbox has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the checkbox loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, CHECKBOX_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.onSlotChange();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    @Method()\n    async getLabel(): Promise<string> {\n        return getSlottedContentText(this.el);\n    }\n\n    handleChange(e: Event) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        this.toggleCheckboxState();\n    }\n    \n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n        \n        this.toggleCheckboxState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleCheckboxState() {\n        if (this.disabled) return;\n        \n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n    \n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    onSlotChange() { \n        const slot = this.el.shadowRoot.querySelector('slot');\n        if (slot) {\n            // TODO: remove when pseudo-class that indicate a slot has content is supported in all major browsers \n            //  (https://github.com/w3c/csswg-drafts/issues/6867)\n            // https://developer.mozilla.org/en-US/docs/Web/CSS/:empty\n            const assignedNodes = slot.assignedNodes();\n            if (assignedNodes.length > 0) {\n                this.el.shadowRoot.querySelector('.text').classList.remove('hidden');\n            } else {\n                this.el.shadowRoot.querySelector('.text').classList.add('hidden');\n            }\n        }\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input\n                        onBlur={this.handleBlur.bind(this)}\n                        onChange={this.handleChange.bind(this)}\n                        onFocus={this.handleFocus.bind(this)}\n                        onClick={this.handleInputClick.bind(this)}\n                        checked={this.checked}\n                        class=\"wcs-checkbox\"\n                        type=\"checkbox\"\n                        ref={(el) => (this.nativeInput = el)}\n                        name={this.name}\n                        disabled={this.disabled}\n                        id={this.name}\n                        {...this.inheritedAttributes}\n                    ></input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot onSlotchange={(_) => this.onSlotChange()} />\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"]}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=chip-interface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip-interface.js","sourceRoot":"","sources":["../../../src/components/chip/chip-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type WcsChipMode = 'selectable' | 'dismissible';\nexport type WcsChipSize = Extract<WcsSize, 's'>;\nexport type WcsChipVariant = 'primary' | 'secondary';\n"]}

package/dist/collection/components/chip/chip.css

@@ -0,0 +1,220 @@
+/**
+    Applies all the outline properties useful to show a dashed-focus ring around a component.
+    TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
+ */
+:host {
+  --wcs-chip-height: var(--wcs-semantic-size-s);
+  --wcs-chip-font-size: var(--wcs-semantic-font-size-base);
+  --wcs-chip-font-weight: var(--wcs-semantic-font-weight-medium);
+  --wcs-chip-focus-outline-border-width: var(--wcs-semantic-border-width-large);
+  --wcs-chip-padding-vertical: var(--wcs-semantic-spacing-base);
+  --wcs-chip-padding-horizontal: var(--wcs-semantic-spacing-base-150);
+  --wcs-chip-padding-horizontal-dismissible: var(--wcs-semantic-spacing-base);
+  --wcs-chip-selectable-background-color: var(--wcs-semantic-color-background-action-secondary-default);
+  --wcs-chip-selectable-background-color-pressed: var(--wcs-semantic-color-background-action-secondary-press);
+  --wcs-chip-selectable-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);
+  --wcs-chip-selectable-background-color-selected: var(--wcs-semantic-color-background-action-primary-default);
+  --wcs-chip-selectable-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);
+  --wcs-chip-selectable-background-color-selected-pressed: var(--wcs-semantic-color-background-action-primary-press);
+  --wcs-chip-selectable-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);
+  --wcs-chip-selectable-color: var(--wcs-semantic-color-foreground-action-secondary-default);
+  --wcs-chip-selectable-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);
+  --wcs-chip-selectable-color-pressed: var(--wcs-semantic-color-foreground-action-secondary-press);
+  --wcs-chip-selectable-color-disabled: var(--wcs-semantic-color-text-disabled);
+  --wcs-chip-selectable-color-selected: var(--wcs-semantic-color-foreground-action-primary-default);
+  --wcs-chip-selectable-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);
+  --wcs-chip-selectable-color-selected-pressed: var(--wcs-semantic-color-foreground-action-primary-press);
+  --wcs-chip-border-radius: var(--wcs-semantic-border-radius-base);
+  --wcs-chip-border-line-width: var(--wcs-semantic-border-width-default);
+  --wcs-chip-selectable-border-color: var(--wcs-semantic-color-border-action-secondary-default);
+  --wcs-chip-selectable-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);
+  --wcs-chip-selectable-border-color-pressed: var(--wcs-semantic-color-border-action-secondary-press);
+  --wcs-chip-selectable-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);
+  --wcs-chip-selectable-content-gap: var(--wcs-semantic-spacing-base);
+  --wcs-chip-selectable-focus-outline-color: var(--wcs-semantic-color-border-focus-base);
+  --wcs-chip-dismissible-content-gap: var(--wcs-semantic-spacing-base-05);
+  --wcs-chip-dismissible-padding-right: var(--wcs-semantic-spacing-base-05);
+  --wcs-chip-dismissible-button-outline-radius: var(--wcs-semantic-border-radius-full);
+  --wcs-chip-dismissible-primary-focus-outline-color: var(--wcs-semantic-color-border-focus-base-on-secondary);
+  --wcs-chip-dismissible-primary-border-color: var(--wcs-semantic-color-background-action-primary-default);
+  --wcs-chip-dismissible-primary-border-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);
+  --wcs-chip-dismissible-primary-color: var(--wcs-semantic-color-foreground-action-primary-default);
+  --wcs-chip-dismissible-primary-color-hover: var(--wcs-semantic-color-foreground-action-primary-hover);
+  --wcs-chip-dismissible-primary-color-pressed: var(--wcs-semantic-color-foreground-action-primary-press);
+  --wcs-chip-dismissible-primary-color-disabled: var(--wcs-semantic-color-text-disabled);
+  --wcs-chip-dismissible-primary-background-color: var(--wcs-semantic-color-background-action-primary-default);
+  --wcs-chip-dismissible-primary-background-color-hover: var(--wcs-semantic-color-background-action-primary-hover);
+  --wcs-chip-dismissible-primary-background-color-pressed: var(--wcs-semantic-color-background-action-primary-press);
+  --wcs-chip-dismissible-primary-background-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);
+  --wcs-chip-dismissible-secondary-button-focus-outline-color: var(--wcs-semantic-color-border-focus-base);
+  --wcs-chip-dismissible-secondary-border-color: var(--wcs-semantic-color-border-action-secondary-default);
+  --wcs-chip-dismissible-secondary-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);
+  --wcs-chip-dismissible-secondary-color: var(--wcs-semantic-color-foreground-action-secondary-default);
+  --wcs-chip-dismissible-secondary-color-disabled: var(--wcs-semantic-color-foreground-disabled);
+  --wcs-chip-dismissible-secondary-background-color: var(--wcs-semantic-color-background-action-secondary-default);
+  --wcs-chip-dismissible-secondary-button-background-color: var(--wcs-semantic-color-background-action-secondary-default);
+  --wcs-chip-dismissible-secondary-button-background-color-hover: var(--wcs-semantic-color-background-surface-accent-lighter);
+  --wcs-chip-dismissible-secondary-button-background-color-pressed: var(--wcs-semantic-color-background-surface-accent-light);
+  --wcs-chip-dismissible-secondary-button-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-disabled);
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  overflow: hidden;
+  box-sizing: border-box;
+  height: var(--wcs-chip-height);
+  border-radius: var(--wcs-chip-border-radius);
+  font-size: var(--wcs-chip-font-size);
+  font-weight: var(--wcs-chip-font-weight);
+  padding: var(--wcs-chip-padding-vertical) var(--wcs-chip-padding-horizontal);
+  cursor: pointer;
+  user-select: none;
+  transition-property: color, background-color;
+  transition-duration: var(--wcs-semantic-motion-duration-feedback-base);
+  transition-timing-function: ease-out;
+}
+
+:host([mode=selectable]) {
+  gap: var(--wcs-chip-selectable-content-gap);
+  border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-selectable-border-color);
+  background-color: var(--wcs-chip-selectable-background-color);
+  color: var(--wcs-chip-selectable-color);
+}
+:host([mode=selectable]):host(:focus-visible) {
+  outline: var(--wcs-chip-focus-outline-border-width) dashed var(--wcs-chip-selectable-focus-outline-color);
+  outline-offset: var(--wcs-semantic-spacing-small);
+  border-radius: var(--wcs-chip-border-radius);
+}
+:host([mode=selectable]):host(:not([disabled])):host(:not([selected])):host(:hover) {
+  background-color: var(--wcs-chip-selectable-background-color-hover);
+  color: var(--wcs-chip-selectable-color-hover);
+  border-color: var(--wcs-chip-selectable-border-color-hover);
+}
+:host([mode=selectable]):host(:not([disabled])):host(:not([selected])):host(:active) {
+  background-color: var(--wcs-chip-selectable-background-color-pressed);
+  color: var(--wcs-chip-selectable-color-pressed);
+  border-color: var(--wcs-chip-selectable-border-color-pressed);
+}
+:host([mode=selectable]):host(:not([disabled])):host([selected]) {
+  color: var(--wcs-chip-selectable-color-selected);
+  background-color: var(--wcs-chip-selectable-background-color-selected);
+  border-color: transparent;
+}
+:host([mode=selectable]):host(:not([disabled])):host([selected]) svg path {
+  fill: var(--wcs-chip-selectable-color-selected);
+  transform: translateY(-1.5px);
+}
+:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:hover) {
+  background-color: var(--wcs-chip-selectable-background-color-selected-hover);
+  color: var(--wcs-chip-selectable-color-selected-hover);
+}
+:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:hover) svg path {
+  fill: var(--wcs-chip-selectable-color-selected-hover);
+}
+:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:active) {
+  background-color: var(--wcs-chip-selectable-background-color-selected-pressed);
+  color: var(--wcs-chip-selectable-color-selected-pressed);
+}
+:host([mode=selectable]):host(:not([disabled])):host([selected]):host(:active) svg path {
+  fill: var(--wcs-chip-selectable-color-selected-pressed);
+}
+:host([mode=selectable]):host([disabled]) {
+  color: var(--wcs-chip-selectable-color-disabled);
+  cursor: not-allowed;
+}
+:host([mode=selectable]):host([disabled]) svg path {
+  fill: var(--wcs-chip-selectable-color-disabled);
+}
+:host([mode=selectable]):host([disabled]):host(:not([selected])) {
+  border-color: var(--wcs-chip-selectable-border-color-disabled);
+}
+:host([mode=selectable]):host([disabled]):host([selected]) {
+  background-color: var(--wcs-chip-selectable-background-color-selected-disabled);
+  border: 0;
+}
+
+:host([mode=dismissible]) {
+  cursor: initial;
+  border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color);
+  color: var(--wcs-chip-dismissible-primary-color);
+  background-color: var(--wcs-chip-dismissible-primary-background-color);
+  gap: var(--wcs-chip-dismissible-content-gap);
+  padding-right: var(--wcs-chip-dismissible-padding-right);
+}
+:host([mode=dismissible]) button {
+  background: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+  border-radius: var(--wcs-semantic-border-radius-full);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: inherit;
+  width: var(--wcs-semantic-size-xs);
+  height: var(--wcs-semantic-size-xs);
+}
+:host([mode=dismissible]) button:focus {
+  outline: none;
+}
+:host([mode=dismissible]) button:focus svg {
+  outline: var(--wcs-chip-focus-outline-border-width) dashed var(--wcs-chip-dismissible-primary-focus-outline-color);
+  outline-offset: var(--wcs-semantic-spacing-small);
+  border-radius: var(--wcs-chip-dismissible-button-outline-radius);
+}
+:host([mode=dismissible]):host(:not([open])) {
+  display: none;
+  margin: 0;
+}
+:host([mode=dismissible]):host(:not([disabled])) button:hover {
+  background-color: var(--wcs-chip-dismissible-primary-background-color-hover);
+  color: var(--wcs-chip-dismissible-primary-color-hover);
+}
+:host([mode=dismissible]):host(:not([disabled])) button:active {
+  background-color: var(--wcs-chip-dismissible-primary-background-color-pressed);
+  color: var(--wcs-chip-dismissible-primary-color-pressed);
+}
+:host([mode=dismissible]):host([disabled]) {
+  color: var(--wcs-chip-dismissible-primary-color-disabled);
+  background-color: var(--wcs-chip-dismissible-primary-background-color-disabled);
+  cursor: not-allowed;
+  border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color-disabled);
+}
+:host([mode=dismissible]):host([disabled]) svg {
+  cursor: not-allowed;
+}
+:host([mode=dismissible]):host([disabled]) svg path {
+  fill: var(--wcs-chip-dismissible-primary-color-disabled);
+}
+:host([mode=dismissible]):host([variant=secondary]) {
+  color: var(--wcs-chip-dismissible-secondary-color);
+  background-color: var(--wcs-chip-dismissible-secondary-background-color);
+  border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color);
+}
+:host([mode=dismissible]):host([variant=secondary]) button {
+  background: var(--wcs-chip-dismissible-secondary-button-background-color);
+}
+:host([mode=dismissible]):host([variant=secondary]) button:focus {
+  outline: none;
+}
+:host([mode=dismissible]):host([variant=secondary]) button:focus svg {
+  outline: var(--wcs-chip-focus-outline-border-width) dashed var(--wcs-chip-dismissible-secondary-button-focus-outline-color);
+  outline-offset: var(--wcs-semantic-spacing-small);
+  border-radius: var(--wcs-chip-dismissible-button-outline-radius);
+}
+:host([mode=dismissible]):host([variant=secondary]):host(:not([disabled])) button:hover {
+  background-color: var(--wcs-chip-dismissible-secondary-button-background-color-hover);
+  color: var(--wcs-chip-dismissible-secondary-button-color-hover);
+}
+:host([mode=dismissible]):host([variant=secondary]):host(:not([disabled])) button:active {
+  background-color: var(--wcs-chip-dismissible-secondary-button-background-color-pressed);
+  color: var(--wcs-chip-dismissible-secondary-button-color-pressed);
+}
+:host([mode=dismissible]):host([variant=secondary]):host([disabled]) {
+  color: var(--wcs-chip-dismissible-secondary-color-disabled);
+  background-color: var(--wcs-chip-dismissible-secondary-background-color-disabled);
+  border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color-disabled);
+}
+:host([mode=dismissible]):host([variant=secondary]):host([disabled]) svg path {
+  fill: var(--wcs-chip-dismissible-secondary-color-disabled);
+}

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

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

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

@@ -0,0 +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"]}