wcs-core 7.2.1 → 7.3.0

package/dist/esm/wcs-accordion-panel.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-accordion-panel.entry.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,khJAAkhJ,CAAC;AAC7iJ,gCAAe,iBAAiB;;ACehC,MAAM,yBAAyB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;MAqC3C,cAAc;;;;QAGf,wBAAmB,GAAyB,EAAE,CAAC;oBAED,KAAK;8BAMV,KAAK;yBAOV,KAAK;sCAOQ,KAAK;;IAK9D,UAAU,CAAC,QAAiB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,yBAAyB,CAAC,CAC3D,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACxD;IAGD,MAAM,KAAK;QACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACrB;IAED,MAAM;QAIF,QACI,EAAC,IAAI,uDACD,8FAAuB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAE,OAAO,mBAC5B,SAAS,EACvB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,EACnC,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IACjC,IAAI,CAAC,mBAAmB,GAChC,6DAAM,IAAI,EAAC,QAAQ,GAAE,EACrB,6DAAM,KAAK,EAAC,eAAe,IACtB,CAAC,IAAI,CAAC,cAAc,KACjB,+DAAO,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,QAAQ,CAAQ,CAAC,EAEnD,EAAC,WAAW,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAC1B,CACF,EACT,4DAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,IAC7B,6DAAM,IAAI,EAAC,SAAS,GAAE,CACpB,CACH,EACT;KACL;;;;;;;;;;","names":[],"sources":["src/components/accordion-panel/accordion-panel.scss?tag=wcs-accordion-panel&encapsulation=shadow","src/components/accordion-panel/accordion-panel.tsx"],"sourcesContent":["@mixin accordion-panel-focus {\n    outline: var(--wcs-accordion-panel-border-width-focus) var(--wcs-accordion-panel-border-style-focus) var(--wcs-accordion-panel-border-color-focus);\n}\n\n:host {\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n\n    --wcs-accordion-panel-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-highlight: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-hover: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-press: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-action-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-accordion-panel-action-color-highlight: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-action-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-accordion-panel-action-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-accordion-panel-background-color-highlight: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-accordion-panel-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-accordion-panel-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n\n    --wcs-accordion-panel-header-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-accordion-panel-header-font-size: var(--wcs-semantic-font-size-heading-6);\n    --wcs-accordion-panel-header-gap: calc(3 * var(--wcs-semantic-spacing-base));\n    --wcs-accordion-panel-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-accordion-panel-border-radius-open: var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius) 0 0;\n    --wcs-accordion-panel-padding-vertical: var(--wcs-semantic-spacing-large);\n    --wcs-accordion-panel-padding-horizontal: calc(var(--wcs-semantic-spacing-base) * 3);\n\n    --wcs-accordion-panel-header-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-accordion-panel-border-color: var(--wcs-semantic-color-border-secondary);\n\n    --wcs-accordion-panel-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-accordion-panel-border-style-focus: var(--wcs-semantic-border-style-focus-base);\n\n    --wcs-accordion-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    border: var(--wcs-accordion-panel-border-width) solid var(--wcs-accordion-panel-border-color);\n    border-radius: var(--wcs-accordion-panel-border-radius);\n\n    .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--wcs-accordion-panel-header-gap);\n        padding: var(--wcs-accordion-panel-padding-vertical) var(--wcs-accordion-panel-padding-horizontal);\n        border-radius: var(--wcs-accordion-panel-border-radius);\n        font-weight: var(--wcs-accordion-panel-header-font-weight);\n        // TODO replace px to rem\n        font-size: var(--wcs-accordion-panel-header-font-size);\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-accordion-panel-color-default);\n        background-color: var(--wcs-accordion-panel-background-color-default);\n        border: none;\n\n        transition: background-color var(--wcs-accordion-transition-duration);\n\n        @media (forced-colors: active) {\n            // for WHCM\n            border: var(--wcs-accordion-panel-header-border-width) solid ButtonBorder;\n        }\n        &:focus-visible {\n            @include accordion-panel-focus;\n        }\n\n        &:hover {\n            cursor: pointer;\n\n            color: var(--wcs-accordion-panel-color-hover);\n            background-color: var(--wcs-accordion-panel-background-color-hover);\n\n            .header-action {\n                color: var(--wcs-accordion-panel-action-color-hover);\n\n                .arrow {\n                    fill: var(--wcs-accordion-panel-action-color-hover);\n                }\n            }\n        }\n\n        &:active {\n            background-color: var(--wcs-accordion-panel-background-color-press);\n        }\n    }\n\n    .header-action {\n        display: flex;\n        align-items: center;\n        user-select: none;\n\n        color: var(--wcs-accordion-panel-action-color-default);\n\n        .arrow {\n            fill: var(--wcs-accordion-panel-action-color-default);\n        }\n    }\n\n    .content {\n        display: none;\n    }\n\n}\n\n:host([open]) {\n    margin-bottom: 0;\n\n    .header {\n        border-radius: var(--wcs-accordion-panel-border-radius-open);\n    }\n\n    .content {\n        display: block;\n    }\n\n\n    /* FIXME GroupContentWithHeader is deprecated. Remove this.\n    &:host([group-content-with-header]) {\n        .header {\n            border-radius: var(--wcs-accordion-panel-border-radius-open);\n            padding-bottom: 0;\n        }\n\n        .content {\n            border-radius: 0 0 var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius);\n            margin-bottom: var(--wcs-);\n            background-color: var(--wcs-accordion-panel-background-color-default);\n        }\n    }\n    */\n\n    &:host([highlight]) {\n        .header {\n            background-color: var(--wcs-accordion-panel-background-color-highlight);\n            color: var(--wcs-accordion-panel-color-highlight);\n        }\n\n        .header-action {\n            color: var(--wcs-accordion-panel-action-color-highlight);\n\n            .arrow {\n                fill: var(--wcs-accordion-panel-action-color-highlight);\n            }\n        }\n\n        /* FIXME GroupContentWithHeader is deprecated. Remove this.\n        &:host([group-content-with-header]) {\n            .content {\n                background-color: var(--wcs-accordion-panel-background-color-highlight);\n                color: var(--wcs-accordion-panel-color-highlight);\n            }\n        }\n        */\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ACCORDION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The accordion-panel is a subcomponent of `wcs-accordion`. It represents every panel of the accordion that can be expanded.\n * \n *\n * @cssprop --wcs-accordion-panel-color-default - Default color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-highlight - Highlight color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-hover - Hover color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-press - Press color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-default - Default action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-highlight - Highlight action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-hover - Hovered action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-press - Pressed action color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-default - Default background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-highlight - Highlight background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-hover - Hover background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-press - Press background color of the accordion panel\n * @cssprop --wcs-accordion-panel-header-font-size - Font size of the accordion panel header\n * @cssprop --wcs-accordion-panel-header-font-weight - Font weight of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-radius - Border radius of the accordion panel\n * @cssprop --wcs-accordion-panel-border-radius-open - Border radius of the open accordion panel\n * @cssprop --wcs-accordion-panel-padding-vertical - Vertical padding of the accordion panel\n * @cssprop --wcs-accordion-panel-padding-horizontal - Horizontal padding of the accordion panel\n * @cssprop --wcs-accordion-panel-header-border-width - Border width of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-width - Border width of the accordion panel\n * @cssprop --wcs-accordion-panel-border-width-focus - Border width of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-color - Border color of the accordion panel\n * @cssprop --wcs-accordion-panel-border-color-focus - Border color of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-style-focus - Border style of the accordion panel when focused\n * @cssprop --wcs-accordion-transition-duration - Transition duration of the accordion panel\n */\n@Component({\n    tag: 'wcs-accordion-panel',\n    styleUrl: 'accordion-panel.scss',\n    shadow: true\n})\nexport class AccordionPanel implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop({reflect: true, mutable: true}) open: boolean = false;\n\n    /**\n     * Specifies whether the component should display the open/close text.\n     * if false, it won't show the open/close text.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = false;\n\n    /**\n     * Specifies whether the component should highlight when open with primary color.\n     * if true, the background color will be the primary color.\n     * if false, the background color will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * Specifies wether the component should group the content with header in one card\n     * if true, there will be only one card with the header and the content\n     * Nothing change when the panel is close\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    @Event() wcsOpenChange!: EventEmitter<boolean>;\n\n    @Watch('open')\n    openChange(newValue: boolean) {\n        this.wcsOpenChange.emit(newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    @Method()\n    async close() {\n        this.open = false;\n    }\n\n    render() {\n  \n  \n  \n        return (\n            <Host>\n                <button aria-expanded={this.open ? \"true\": \"false\"}\n                        aria-controls=\"content\"\n                        class=\"header\"\n                        ref={(el) => this.nativeButton = el}\n                        onClick={() => this.open = !this.open}\n                        {...this.inheritedAttributes}>\n                    <slot name=\"header\"/>\n                    <span class=\"header-action\">\n                        {!this.hideActionText && (\n                            <span>{this.open ? 'Fermez' : 'Ouvrez'}</span>)\n                        }\n                        <SelectArrow up={this.open}/>\n                    </span>\n                </button>\n                <div class=\"content\" id=\"content\">\n                    <slot name=\"content\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-accordion-panel.entry.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,khJAAkhJ,CAAC;AAC7iJ,gCAAe,iBAAiB;;ACehC,MAAM,yBAAyB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;MAqC3C,cAAc;;;;QAGf,wBAAmB,GAAyB,EAAE,CAAC;oBAED,KAAK;8BAMV,KAAK;yBAOV,KAAK;sCAOQ,KAAK;;IAU9D,UAAU,CAAC,QAAiB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,yBAAyB,CAAC,CAC3D,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACxD;IAGD,MAAM,KAAK;QACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACrB;IAED,MAAM;QAIF,QACI,EAAC,IAAI,uDACD,8FAAuB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAE,OAAO,mBAC5B,SAAS,EACvB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,EACnC,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IACjC,IAAI,CAAC,mBAAmB,GAChC,6DAAM,IAAI,EAAC,QAAQ,GAAE,EACrB,6DAAM,KAAK,EAAC,eAAe,IACtB,CAAC,IAAI,CAAC,cAAc,KACjB,+DAAO,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,QAAQ,CAAQ,CAAC,EAEnD,EAAC,WAAW,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAC1B,CACF,EACT,4DAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,IAC7B,6DAAM,IAAI,EAAC,SAAS,GAAE,CACpB,CACH,EACT;KACL;;;;;;;;;;","names":[],"sources":["src/components/accordion-panel/accordion-panel.scss?tag=wcs-accordion-panel&encapsulation=shadow","src/components/accordion-panel/accordion-panel.tsx"],"sourcesContent":["@mixin accordion-panel-focus {\n    outline: var(--wcs-accordion-panel-border-width-focus) var(--wcs-accordion-panel-border-style-focus) var(--wcs-accordion-panel-border-color-focus);\n}\n\n:host {\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n\n    --wcs-accordion-panel-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-highlight: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-hover: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-press: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-action-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-accordion-panel-action-color-highlight: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-action-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-accordion-panel-action-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-accordion-panel-background-color-highlight: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-accordion-panel-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-accordion-panel-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n\n    --wcs-accordion-panel-header-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-accordion-panel-header-font-size: var(--wcs-semantic-font-size-heading-6);\n    --wcs-accordion-panel-header-gap: calc(3 * var(--wcs-semantic-spacing-base));\n    --wcs-accordion-panel-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-accordion-panel-border-radius-open: var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius) 0 0;\n    --wcs-accordion-panel-padding-vertical: var(--wcs-semantic-spacing-large);\n    --wcs-accordion-panel-padding-horizontal: calc(var(--wcs-semantic-spacing-base) * 3);\n\n    --wcs-accordion-panel-header-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-accordion-panel-border-color: var(--wcs-semantic-color-border-secondary);\n\n    --wcs-accordion-panel-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-accordion-panel-border-style-focus: var(--wcs-semantic-border-style-focus-base);\n\n    --wcs-accordion-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    border: var(--wcs-accordion-panel-border-width) solid var(--wcs-accordion-panel-border-color);\n    border-radius: var(--wcs-accordion-panel-border-radius);\n\n    .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--wcs-accordion-panel-header-gap);\n        padding: var(--wcs-accordion-panel-padding-vertical) var(--wcs-accordion-panel-padding-horizontal);\n        border-radius: var(--wcs-accordion-panel-border-radius);\n        font-weight: var(--wcs-accordion-panel-header-font-weight);\n        // TODO replace px to rem\n        font-size: var(--wcs-accordion-panel-header-font-size);\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-accordion-panel-color-default);\n        background-color: var(--wcs-accordion-panel-background-color-default);\n        border: none;\n\n        transition: background-color var(--wcs-accordion-transition-duration);\n\n        @media (forced-colors: active) {\n            // for WHCM\n            border: var(--wcs-accordion-panel-header-border-width) solid ButtonBorder;\n        }\n        &:focus-visible {\n            @include accordion-panel-focus;\n        }\n\n        &:hover {\n            cursor: pointer;\n\n            color: var(--wcs-accordion-panel-color-hover);\n            background-color: var(--wcs-accordion-panel-background-color-hover);\n\n            .header-action {\n                color: var(--wcs-accordion-panel-action-color-hover);\n\n                .arrow {\n                    fill: var(--wcs-accordion-panel-action-color-hover);\n                }\n            }\n        }\n\n        &:active {\n            background-color: var(--wcs-accordion-panel-background-color-press);\n        }\n    }\n\n    .header-action {\n        display: flex;\n        align-items: center;\n        user-select: none;\n\n        color: var(--wcs-accordion-panel-action-color-default);\n\n        .arrow {\n            fill: var(--wcs-accordion-panel-action-color-default);\n        }\n    }\n\n    .content {\n        display: none;\n    }\n\n}\n\n:host([open]) {\n    margin-bottom: 0;\n\n    .header {\n        border-radius: var(--wcs-accordion-panel-border-radius-open);\n    }\n\n    .content {\n        display: block;\n    }\n\n\n    /* FIXME GroupContentWithHeader is deprecated. Remove this.\n    &:host([group-content-with-header]) {\n        .header {\n            border-radius: var(--wcs-accordion-panel-border-radius-open);\n            padding-bottom: 0;\n        }\n\n        .content {\n            border-radius: 0 0 var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius);\n            margin-bottom: var(--wcs-);\n            background-color: var(--wcs-accordion-panel-background-color-default);\n        }\n    }\n    */\n\n    &:host([highlight]) {\n        .header {\n            background-color: var(--wcs-accordion-panel-background-color-highlight);\n            color: var(--wcs-accordion-panel-color-highlight);\n        }\n\n        .header-action {\n            color: var(--wcs-accordion-panel-action-color-highlight);\n\n            .arrow {\n                fill: var(--wcs-accordion-panel-action-color-highlight);\n            }\n        }\n\n        /* FIXME GroupContentWithHeader is deprecated. Remove this.\n        &:host([group-content-with-header]) {\n            .content {\n                background-color: var(--wcs-accordion-panel-background-color-highlight);\n                color: var(--wcs-accordion-panel-color-highlight);\n            }\n        }\n        */\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ACCORDION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The accordion-panel is a subcomponent of `wcs-accordion`. It represents every panel of the accordion that can be expanded.\n * \n *\n * @cssprop --wcs-accordion-panel-color-default - Default color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-highlight - Highlight color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-hover - Hover color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-press - Press color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-default - Default action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-highlight - Highlight action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-hover - Hovered action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-press - Pressed action color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-default - Default background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-highlight - Highlight background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-hover - Hover background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-press - Press background color of the accordion panel\n * @cssprop --wcs-accordion-panel-header-font-size - Font size of the accordion panel header\n * @cssprop --wcs-accordion-panel-header-font-weight - Font weight of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-radius - Border radius of the accordion panel\n * @cssprop --wcs-accordion-panel-border-radius-open - Border radius of the open accordion panel\n * @cssprop --wcs-accordion-panel-padding-vertical - Vertical padding of the accordion panel\n * @cssprop --wcs-accordion-panel-padding-horizontal - Horizontal padding of the accordion panel\n * @cssprop --wcs-accordion-panel-header-border-width - Border width of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-width - Border width of the accordion panel\n * @cssprop --wcs-accordion-panel-border-width-focus - Border width of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-color - Border color of the accordion panel\n * @cssprop --wcs-accordion-panel-border-color-focus - Border color of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-style-focus - Border style of the accordion panel when focused\n * @cssprop --wcs-accordion-transition-duration - Transition duration of the accordion panel\n */\n@Component({\n    tag: 'wcs-accordion-panel',\n    styleUrl: 'accordion-panel.scss',\n    shadow: true\n})\nexport class AccordionPanel implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop({reflect: true, mutable: true}) open: boolean = false;\n\n    /**\n     * Specifies whether the component should display the open/close text.\n     * if false, it won't show the open/close text.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = false;\n\n    /**\n     * Specifies whether the component should highlight when open with primary color.\n     * if true, the background color will be the primary color.\n     * if false, the background color will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * Specifies wether the component should group the content with header in one card\n     * if true, there will be only one card with the header and the content\n     * Nothing change when the panel is close\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    /**\n     * Emitted when the open property changes.  \n     * Note that this event is stopped from propagating when using the component inside a wcs-accordion as the \n     * accordion handles the open state of its accordion-panel children.\n     */\n    @Event() wcsOpenChange!: EventEmitter<boolean>;\n\n    @Watch('open')\n    openChange(newValue: boolean) {\n        this.wcsOpenChange.emit(newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    @Method()\n    async close() {\n        this.open = false;\n    }\n\n    render() {\n  \n  \n  \n        return (\n            <Host>\n                <button aria-expanded={this.open ? \"true\": \"false\"}\n                        aria-controls=\"content\"\n                        class=\"header\"\n                        ref={(el) => this.nativeButton = el}\n                        onClick={() => this.open = !this.open}\n                        {...this.inheritedAttributes}>\n                    <slot name=\"header\"/>\n                    <span class=\"header-action\">\n                        {!this.hideActionText && (\n                            <span>{this.open ? 'Fermez' : 'Ouvrez'}</span>)\n                        }\n                        <SelectArrow up={this.open}/>\n                    </span>\n                </button>\n                <div class=\"content\" id=\"content\">\n                    <slot name=\"content\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -18,6 +18,7 @@ const Accordion = class {
         this.updateGroupContentWithHeader();
     }
     wcsOpenChangeHandler(event) {
+        event.stopImmediatePropagation();
         if (event.detail) {
             this.closeAllAccordionsExcept(event.target);
         }
@@ -38,7 +39,7 @@ const Accordion = class {
         });
     }
     render() {
-        return (h(Host, { key: 'b99f05f446c6848298b51f2360cdca1b4d253de3' }, h("slot", { key: 'f8f12b1ae5e2a43d64fbc14c15980109031b8ad0' })));
+        return (h(Host, { key: '0f1933aeff3cc2d73e6fc5051bac74656e418a02' }, h("slot", { key: 'effc61fd6ac1edcb598d9bc4053363030a1fc2e9' })));
     }
     getAllAccordionPanelsFromHostElement() {
         return Array.from(this.el.children)

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

@@ -1 +1 @@
-{"file":"wcs-accordion.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,6HAA6H,CAAC;AACnJ,2BAAe,YAAY;;MCWd,SAAS;;;QAEV,oBAAe,GAAmC,EAAE,CAAC;8BAMZ,IAAI;yBAOT,KAAK;sCASQ,KAAK;;IAE9D,iBAAiB;QACb,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,oCAAoC,EAAE,CAAC;QAEnE,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACnC,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,4BAA4B,EAAE,CAAC;KACvC;IAGD,oBAAoB,CAAC,KAA2B;QAC5C,IAAI,KAAK,CAAC,MAAM,EAAE;YACd,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAC/C;KACJ;IAGO,2BAA2B;QAC/B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC;YAC3D,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;SAC5C,CAAC,CAAA;KACL;IAGO,sBAAsB;QAC1B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC;YAC3D,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;SAClC,CAAC,CAAA;KACL;IAEO,4BAA4B;QAChC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC;YAC3D,GAAG,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC;SAC5D,CAAC,CAAA;KACL;IAGD,MAAM;QACF,QACI,EAAC,IAAI,uDACD,8DAAO,CACJ,EACT;KACL;IAEO,oCAAoC;QACxC,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;aAC9B,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAmC,CAAC;KAC7F;;;;IAKO,wBAAwB,CAAC,WAAwB;QACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;KAC/E;;;;;;;;;;;;","names":[],"sources":["src/components/accordion/accordion.scss?tag=wcs-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":[":host {\n    --wcs-accordion-gap: var(--wcs-semantic-spacing-base);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-accordion-gap);\n}\n","import { Component, Element, h, Host, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * The accordion component is a vertical stack of interactive headings used to toggle the display of further information.\n * \n * @cssprop --wcs-accordion-gap - Gap between accordion panels\n */\n@Component({\n    tag: 'wcs-accordion',\n    styleUrl: 'accordion.scss',\n    shadow: true\n})\nexport class Accordion {\n    @Element() private el!: HTMLWcsAccordionElement;\n    private accordionPanels: HTMLWcsAccordionPanelElement[] = [];\n\n    /**\n     * Specifies whether accordion-panel components should display the open/close text.\n     * if false, it won't show the open/close text in all accordion-panel.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = true;\n\n    /**\n     * Specifies whether accordion-panel components should highlight when open with primary color.\n     * if true, the background color of the accordion-panel will be the primary color.\n     * if false, the background color of the accordion-panel will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * @deprecated **The content is now always grouped with the panel header**\n     * \n     * ~~Specifies whether accordion-panel components should group the content with header in one card~~\n     * ~~if true, there will be only one card with the header and the content~~\n     * ~~Nothing change when the panel is close~~\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.accordionPanels = this.getAllAccordionPanelsFromHostElement();\n\n        this.updateHideActiontextOnPanel();\n        this.updateHighlightOnPanel();\n        this.updateGroupContentWithHeader();\n    }\n\n    @Listen('wcsOpenChange')\n    wcsOpenChangeHandler(event: CustomEvent<boolean>) {\n        if (event.detail) {\n            this.closeAllAccordionsExcept(event.target);\n        }\n    }\n\n    @Watch('hideActionText')\n    private updateHideActiontextOnPanel() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.hideActionText = this.hideActionText;\n        })\n    }\n\n    @Watch('highlight')\n    private updateHighlightOnPanel() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.highlight = this.highlight;\n        })\n    }\n    @Watch('groupContentWithHeader')\n    private updateGroupContentWithHeader() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.groupContentWithHeader = this.groupContentWithHeader;\n        })\n    }\n\n\n    render() {\n        return (\n            <Host>\n                <slot/>\n            </Host>\n        );\n    }\n\n    private getAllAccordionPanelsFromHostElement(): HTMLWcsAccordionPanelElement[] {\n        return Array.from(this.el.children)\n            .filter(el => el.tagName === 'WCS-ACCORDION-PANEL') as HTMLWcsAccordionPanelElement[];\n    }\n\n    /**\n     * Close all accordion panels except the one that match the eventTarget reference\n     */\n    private closeAllAccordionsExcept(eventTarget: EventTarget): void {\n        this.accordionPanels.filter(a => a !== eventTarget).forEach(a => a.close());\n    }\n}\n"],"version":3}
+{"file":"wcs-accordion.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,6HAA6H,CAAC;AACnJ,2BAAe,YAAY;;MCWd,SAAS;;;QAEV,oBAAe,GAAmC,EAAE,CAAC;8BAMZ,IAAI;yBAOT,KAAK;sCASQ,KAAK;;IAE9D,iBAAiB;QACb,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,oCAAoC,EAAE,CAAC;QAEnE,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACnC,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,4BAA4B,EAAE,CAAC;KACvC;IAGD,oBAAoB,CAAC,KAA2B;QAC5C,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACjC,IAAI,KAAK,CAAC,MAAM,EAAE;YACd,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAC/C;KACJ;IAGO,2BAA2B;QAC/B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC;YAC3D,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;SAC5C,CAAC,CAAA;KACL;IAGO,sBAAsB;QAC1B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC;YAC3D,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;SAClC,CAAC,CAAA;KACL;IAEO,4BAA4B;QAChC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC;YAC3D,GAAG,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC;SAC5D,CAAC,CAAA;KACL;IAGD,MAAM;QACF,QACI,EAAC,IAAI,uDACD,8DAAO,CACJ,EACT;KACL;IAEO,oCAAoC;QACxC,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;aAC9B,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAmC,CAAC;KAC7F;;;;IAKO,wBAAwB,CAAC,WAAwB;QACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;KAC/E;;;;;;;;;;;;","names":[],"sources":["src/components/accordion/accordion.scss?tag=wcs-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":[":host {\n    --wcs-accordion-gap: var(--wcs-semantic-spacing-base);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-accordion-gap);\n}\n","import { Component, Element, h, Host, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * The accordion component is a vertical stack of interactive headings used to toggle the display of further information.\n * \n * @cssprop --wcs-accordion-gap - Gap between accordion panels\n */\n@Component({\n    tag: 'wcs-accordion',\n    styleUrl: 'accordion.scss',\n    shadow: true\n})\nexport class Accordion {\n    @Element() private el!: HTMLWcsAccordionElement;\n    private accordionPanels: HTMLWcsAccordionPanelElement[] = [];\n\n    /**\n     * Specifies whether accordion-panel components should display the open/close text.\n     * if false, it won't show the open/close text in all accordion-panel.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = true;\n\n    /**\n     * Specifies whether accordion-panel components should highlight when open with primary color.\n     * if true, the background color of the accordion-panel will be the primary color.\n     * if false, the background color of the accordion-panel will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * @deprecated **The content is now always grouped with the panel header**\n     * \n     * ~~Specifies whether accordion-panel components should group the content with header in one card~~\n     * ~~if true, there will be only one card with the header and the content~~\n     * ~~Nothing change when the panel is close~~\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.accordionPanels = this.getAllAccordionPanelsFromHostElement();\n\n        this.updateHideActiontextOnPanel();\n        this.updateHighlightOnPanel();\n        this.updateGroupContentWithHeader();\n    }\n\n    @Listen('wcsOpenChange')\n    wcsOpenChangeHandler(event: CustomEvent<boolean>) {\n        event.stopImmediatePropagation();\n        if (event.detail) {\n            this.closeAllAccordionsExcept(event.target);\n        }\n    }\n\n    @Watch('hideActionText')\n    private updateHideActiontextOnPanel() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.hideActionText = this.hideActionText;\n        })\n    }\n\n    @Watch('highlight')\n    private updateHighlightOnPanel() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.highlight = this.highlight;\n        })\n    }\n    @Watch('groupContentWithHeader')\n    private updateGroupContentWithHeader() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.groupContentWithHeader = this.groupContentWithHeader;\n        })\n    }\n\n\n    render() {\n        return (\n            <Host>\n                <slot/>\n            </Host>\n        );\n    }\n\n    private getAllAccordionPanelsFromHostElement(): HTMLWcsAccordionPanelElement[] {\n        return Array.from(this.el.children)\n            .filter(el => el.tagName === 'WCS-ACCORDION-PANEL') as HTMLWcsAccordionPanelElement[];\n    }\n\n    /**\n     * Close all accordion panels except the one that match the eventTarget reference\n     */\n    private closeAllAccordionsExcept(eventTarget: EventTarget): void {\n        this.accordionPanels.filter(a => a !== eventTarget).forEach(a => a.close());\n    }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-ece6a2d3.js';
 import { g as getSlottedContentText } from './control-component-interface-9f09e520.js';
 
-const checkboxCss = ":host{--wcs-checkbox-border-color:var(--wcs-checkbox-border-color-default);--wcs-checkbox-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-checkbox-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-checkbox-border-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-checkbox-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-checkbox-border-color-indeterminate:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-checkbox-border-radius:calc(0.5 * var(--wcs-semantic-size-base));--wcs-checkbox-border-width:var(--wcs-semantic-border-width-large);--wcs-checkbox-size:calc(2 * var(--wcs-semantic-size-base));--wcs-checkbox-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-checkbox-text-color-disabled:var(--wcs-semantic-color-text-tertiary);--wcs-checkbox-text-color-hover:var(--wcs-semantic-color-text-secondary);--wcs-checkbox-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-checkbox-text-font-size:var(--wcs-semantic-font-size-label-1);--wcs-checkbox-text-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-checkbox-background-color-default:transparent;--wcs-checkbox-background-color-hover:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-checkbox-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-checkbox-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-checkbox-background-color-indeterminate:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-checkbox-outline-radius-focus:var(--wcs-semantic-border-radius-base);--wcs-checkbox-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-checkbox-gap:var(--wcs-semantic-spacing-base);--wcs-checkmark-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-checkmark-height:0.5rem;--wcs-checkmark-width:0.1875rem;--wcs-checkmark-border-width:0.125rem;--wcs-indeterminate-bar-width:0.625rem;--wcs-indeterminate-bar-height:0.125rem;--wcs-indeterminate-bar-border-radius:0.0625rem;--wcs-indeterminate-bar-background-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-checkbox-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:inline-flex}:host([disabled]) .text{color:var(--wcs-checkbox-text-color-disabled)}:host([disabled]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-disabled)}:host([disabled]) .wcs-container{cursor:not-allowed}:host([checked]:not([indeterminate][disabled])){--wcs-checkbox-border-color:var(--wcs-checkbox-border-color-selected)}.wcs-checkmark{transition-property:border-color, background-color, color;transition:var(--wcs-checkbox-transition-duration) ease-in-out}.wcs-container{position:relative;font-size:var(--wcs-checkbox-text-font-size);font-weight:var(--wcs-checkbox-text-font-weight);user-select:none;display:flex;gap:var(--wcs-checkbox-gap)}.wcs-container:not([aria-disabled]){cursor:pointer}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.wcs-container:hover:not([aria-disabled]) .text,input:focus .text{color:var(--wcs-checkbox-text-color-hover)}.wcs-container:hover:not([aria-disabled]) .wcs-checkmark,input:focus .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-hover)}.wcs-container:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-checkbox-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-checkbox-outline-radius-focus)}@supports not selector(.wcs-container:has(input:focus-visible)){.wcs-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-checkbox-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-checkbox-outline-radius-focus)}}.wcs-checkmark{flex:0 0 var(--wcs-checkbox-size);width:var(--wcs-checkbox-size);height:var(--wcs-checkbox-size);background-color:var(--wcs-checkbox-background-color-default);border:var(--wcs-checkbox-border-width) solid var(--wcs-checkbox-border-color);border-radius:var(--wcs-checkbox-border-radius);box-sizing:border-box}:host([indeterminate]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-indeterminate);background:var(--wcs-checkbox-background-color-indeterminate)}:host([indeterminate][disabled]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-disabled);background:var(--wcs-checkbox-background-color-disabled)}.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark{background-color:var(--wcs-checkbox-background-color-selected)}.wcs-container[aria-disabled] input:checked~.wcs-checkmark{background-color:var(--wcs-checkbox-background-color-disabled)}.wcs-checkmark:after{content:\"\";position:absolute;display:none}.wcs-checkmark{position:relative}:host([checked]),:host([indeterminate]){}:host([checked]) .wcs-container input~.wcs-checkmark:after,:host([indeterminate]) .wcs-container input~.wcs-checkmark:after{display:flex}:host([checked]) .wcs-container:not([aria-disabled]):hover .wcs-checkmark,:host([indeterminate]) .wcs-container:not([aria-disabled]):hover .wcs-checkmark{background-color:var(--wcs-checkbox-background-color-hover)}:host(:not([indeterminate])){}:host(:not([indeterminate])) .wcs-container .wcs-checkmark:after{left:0.25rem;width:var(--wcs-checkmark-width);height:var(--wcs-checkmark-height);border:solid var(--wcs-checkmark-color, white);border-width:0 var(--wcs-checkmark-border-width) var(--wcs-checkmark-border-width) 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}:host([indeterminate]) .wcs-container .wcs-checkmark:after{position:absolute;background-color:var(--wcs-indeterminate-bar-background-color);left:calc(50% - var(--wcs-indeterminate-bar-width) / 2);top:calc(50% - var(--wcs-indeterminate-bar-height) / 2);width:var(--wcs-indeterminate-bar-width);height:var(--wcs-indeterminate-bar-height);border-radius:var(--wcs-indeterminate-bar-border-radius)}.wcs-container:not([aria-disabled]) input:not(:checked)~.text{color:var(--wcs-checkbox-text-color-default);font-weight:var(--wcs-checkbox-text-font-weight)}.wcs-container:not([aria-disabled]) input:checked~.text{color:var(--wcs-checkbox-text-color-selected);font-weight:var(--wcs-checkbox-text-font-weight)}.hidden{display:none}";
+const checkboxCss = ":host{--wcs-checkbox-border-color:var(--wcs-checkbox-border-color-default);--wcs-checkbox-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-checkbox-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-checkbox-border-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-checkbox-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-checkbox-border-color-indeterminate:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-checkbox-border-radius:calc(0.5 * var(--wcs-semantic-size-base));--wcs-checkbox-border-width:var(--wcs-semantic-border-width-large);--wcs-checkbox-size:calc(2 * var(--wcs-semantic-size-base));--wcs-checkbox-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-checkbox-text-color-disabled:var(--wcs-semantic-color-text-tertiary);--wcs-checkbox-text-color-hover:var(--wcs-semantic-color-text-secondary);--wcs-checkbox-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-checkbox-text-font-size:var(--wcs-semantic-font-size-label-1);--wcs-checkbox-text-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-checkbox-background-color-default:transparent;--wcs-checkbox-background-color-hover:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-checkbox-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-checkbox-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-checkbox-background-color-indeterminate:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-checkbox-outline-radius-focus:var(--wcs-semantic-border-radius-base);--wcs-checkbox-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-checkbox-gap:var(--wcs-semantic-spacing-base);--wcs-checkmark-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-checkmark-height:0.5rem;--wcs-checkmark-width:0.1875rem;--wcs-checkmark-border-width:0.125rem;--wcs-indeterminate-bar-width:0.625rem;--wcs-indeterminate-bar-height:0.125rem;--wcs-indeterminate-bar-border-radius:0.0625rem;--wcs-indeterminate-bar-background-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-checkbox-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:inline-flex}:host .wcs-container{align-items:center}:host([disabled]) .text{color:var(--wcs-checkbox-text-color-disabled)}:host([disabled]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-disabled)}:host([disabled]) .wcs-container{cursor:not-allowed}:host([checked]:not([indeterminate][disabled])){--wcs-checkbox-border-color:var(--wcs-checkbox-border-color-selected)}.wcs-checkmark{transition-property:border-color, background-color, color;transition:var(--wcs-checkbox-transition-duration) ease-in-out}.wcs-container{position:relative;font-size:var(--wcs-checkbox-text-font-size);font-weight:var(--wcs-checkbox-text-font-weight);user-select:none;display:flex;gap:var(--wcs-checkbox-gap)}.wcs-container:not([aria-disabled]){cursor:pointer}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.wcs-container:hover:not([aria-disabled]) .text,input:focus .text{color:var(--wcs-checkbox-text-color-hover)}.wcs-container:hover:not([aria-disabled]) .wcs-checkmark,input:focus .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-hover)}.wcs-container:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-checkbox-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-checkbox-outline-radius-focus)}@supports not selector(.wcs-container:has(input:focus-visible)){.wcs-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-checkbox-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-checkbox-outline-radius-focus)}}.wcs-checkmark{flex:0 0 var(--wcs-checkbox-size);width:var(--wcs-checkbox-size);height:var(--wcs-checkbox-size);background-color:var(--wcs-checkbox-background-color-default);border:var(--wcs-checkbox-border-width) solid var(--wcs-checkbox-border-color);border-radius:var(--wcs-checkbox-border-radius);box-sizing:border-box}:host([indeterminate]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-indeterminate);background:var(--wcs-checkbox-background-color-indeterminate)}:host([indeterminate][disabled]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-disabled);background:var(--wcs-checkbox-background-color-disabled)}.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark{background-color:var(--wcs-checkbox-background-color-selected)}.wcs-container[aria-disabled] input:checked~.wcs-checkmark{background-color:var(--wcs-checkbox-background-color-disabled)}.wcs-checkmark:after{content:\"\";position:absolute;display:none}.wcs-checkmark{position:relative}:host([checked]),:host([indeterminate]){}:host([checked]) .wcs-container input~.wcs-checkmark:after,:host([indeterminate]) .wcs-container input~.wcs-checkmark:after{display:flex}:host([checked]) .wcs-container:not([aria-disabled]):hover .wcs-checkmark,:host([indeterminate]) .wcs-container:not([aria-disabled]):hover .wcs-checkmark{background-color:var(--wcs-checkbox-background-color-hover)}:host(:not([indeterminate])){}:host(:not([indeterminate])) .wcs-container .wcs-checkmark:after{left:0.25rem;width:var(--wcs-checkmark-width);height:var(--wcs-checkmark-height);border:solid var(--wcs-checkmark-color, white);border-width:0 var(--wcs-checkmark-border-width) var(--wcs-checkmark-border-width) 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}:host([indeterminate]) .wcs-container .wcs-checkmark:after{position:absolute;background-color:var(--wcs-indeterminate-bar-background-color);left:calc(50% - var(--wcs-indeterminate-bar-width) / 2);top:calc(50% - var(--wcs-indeterminate-bar-height) / 2);width:var(--wcs-indeterminate-bar-width);height:var(--wcs-indeterminate-bar-height);border-radius:var(--wcs-indeterminate-bar-border-radius)}.wcs-container:not([aria-disabled]) input:not(:checked)~.text{color:var(--wcs-checkbox-text-color-default);font-weight:var(--wcs-checkbox-text-font-weight)}.wcs-container:not([aria-disabled]) input:checked~.text{color:var(--wcs-checkbox-text-color-selected);font-weight:var(--wcs-checkbox-text-font-weight)}.hidden{display:none}";
 const WcsCheckboxStyle0 = checkboxCss;
 
 const CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];
@@ -17,6 +17,7 @@ const Checkbox = class {
         this.name = this.checkboxId;
         this.indeterminate = false;
         this.checked = false;
+        this.required = false;
         this.labelAlignment = 'center';
         this.disabled = false;
     }
@@ -81,7 +82,7 @@ const Checkbox = class {
         }
     }
     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 delegatesFocus() { return true; }
     get el() { return getElement(this); }

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

@@ -1 +1 @@
-{"file":"wcs-checkbox.entry.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=wcs-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-default);\n    --wcs-checkbox-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-checkbox-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-checkbox-border-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-checkbox-border-color-indeterminate: var(--wcs-semantic-color-border-control-indicator-selected);\n\n    --wcs-checkbox-border-radius: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-checkbox-border-width: var(--wcs-semantic-border-width-large);\n\n    --wcs-checkbox-size: calc(2 * var(--wcs-semantic-size-base));\n\n    --wcs-checkbox-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-disabled: var(--wcs-semantic-color-text-tertiary);\n    --wcs-checkbox-text-color-hover: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-selected: var(--wcs-semantic-color-text-primary);\n\n    --wcs-checkbox-text-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-checkbox-text-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-checkbox-background-color-default: transparent;\n    --wcs-checkbox-background-color-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n    --wcs-checkbox-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-checkbox-background-color-indeterminate: var(--wcs-semantic-color-background-control-indicator-selected);\n\n    --wcs-checkbox-outline-radius-focus: var(--wcs-semantic-border-radius-base);\n    --wcs-checkbox-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-checkbox-gap: var(--wcs-semantic-spacing-base);\n    --wcs-checkmark-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-checkmark-height: 0.5rem;\n    --wcs-checkmark-width: 0.1875rem;\n    --wcs-checkmark-border-width: 0.125rem;\n\n    --wcs-indeterminate-bar-width: 0.625rem;\n    --wcs-indeterminate-bar-height: 0.125rem;\n    --wcs-indeterminate-bar-border-radius: 0.0625rem;\n    --wcs-indeterminate-bar-background-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n\n    --wcs-checkbox-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: inline-flex;\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-checkbox-text-color-disabled);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n    }\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n:host([checked]:not([indeterminate][disabled])) {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-selected);\n}\n\n.wcs-checkmark {\n    transition-property: border-color, background-color, color;\n    transition: var(--wcs-checkbox-transition-duration) ease-in-out;\n\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    font-size: var(--wcs-checkbox-text-font-size);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n    user-select: none;\n    display: flex;\n    gap: var(--wcs-checkbox-gap);\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]){\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]){\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]){\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default checkbox */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n.wcs-container:hover:not([aria-disabled]), input:focus {\n    .text {\n        color: var(--wcs-checkbox-text-color-hover);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-hover);\n    }\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n}\n\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n    }\n}\n\n/* Create a custom checkbox */\n.wcs-checkmark {\n    flex: 0 0 var(--wcs-checkbox-size);\n    width: var(--wcs-checkbox-size);\n    height: var(--wcs-checkbox-size);\n    background-color: var(--wcs-checkbox-background-color-default);\n    border: var(--wcs-checkbox-border-width) solid var(--wcs-checkbox-border-color);\n    border-radius: var(--wcs-checkbox-border-radius);\n    box-sizing: border-box;\n}\n\n:host([indeterminate]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-indeterminate);\n        background: var(--wcs-checkbox-background-color-indeterminate);\n    }\n}\n\n:host([indeterminate][disabled]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n        background: var(--wcs-checkbox-background-color-disabled);\n    }\n}\n\n/* When the checkbox is checked, add a blue background */\n.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-selected);\n}\n.wcs-container[aria-disabled] input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-disabled);\n}\n\n/* Create the wcs-checkmark/indicator (hidden when not checked) */\n.wcs-checkmark:after {\n    content: \"\";\n    position: absolute;\n    display: none;\n}\n\n.wcs-checkmark {\n    position: relative;\n}\n\n:host([checked]), :host([indeterminate]) {\n    /* Show the wcs-checkmark when checked */\n    .wcs-container input~.wcs-checkmark:after {\n        display: flex;\n    }\n\n    /* Handle hover when checked/indeterminate */\n    .wcs-container:not([aria-disabled]):hover {\n        .wcs-checkmark {\n            background-color: var(--wcs-checkbox-background-color-hover);\n        }\n    }\n}\n\n:host(:not([indeterminate])) {\n    /* Style the wcs-checkmark/indicator */\n    .wcs-container .wcs-checkmark:after {\n        left: 0.25rem;\n        width: var(--wcs-checkmark-width);\n        height: var(--wcs-checkmark-height);\n        border: solid var(--wcs-checkmark-color, white);\n        border-width: 0 var(--wcs-checkmark-border-width) var(--wcs-checkmark-border-width) 0;\n        -webkit-transform: rotate(45deg);\n        -ms-transform: rotate(45deg);\n        transform: rotate(45deg);\n    }\n}\n\n:host([indeterminate]) {\n    .wcs-container .wcs-checkmark:after {\n        position: absolute;\n        background-color: var(--wcs-indeterminate-bar-background-color);\n        left: calc(50% - (var(--wcs-indeterminate-bar-width) / 2));\n        top: calc(50% - (var(--wcs-indeterminate-bar-height) / 2));\n        width: var(--wcs-indeterminate-bar-width);\n        height: var(--wcs-indeterminate-bar-height);\n        border-radius: var(--wcs-indeterminate-bar-border-radius);\n    }\n}\n\n.wcs-container:not([aria-disabled]) input:not(:checked)~.text {\n    color: var(--wcs-checkbox-text-color-default);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.wcs-container:not([aria-disabled]) input:checked~.text {\n    color: var(--wcs-checkbox-text-color-selected);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.hidden {\n    display: none;\n}\n","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":"wcs-checkbox.entry.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=wcs-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n@mixin alignCheckboxAndText($align) {\n    .wcs-container {\n        align-items: $align;\n    }\n}\n\n:host {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-default);\n    --wcs-checkbox-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-checkbox-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-checkbox-border-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-checkbox-border-color-indeterminate: var(--wcs-semantic-color-border-control-indicator-selected);\n\n    --wcs-checkbox-border-radius: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-checkbox-border-width: var(--wcs-semantic-border-width-large);\n\n    --wcs-checkbox-size: calc(2 * var(--wcs-semantic-size-base));\n\n    --wcs-checkbox-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-disabled: var(--wcs-semantic-color-text-tertiary);\n    --wcs-checkbox-text-color-hover: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-selected: var(--wcs-semantic-color-text-primary);\n\n    --wcs-checkbox-text-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-checkbox-text-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-checkbox-background-color-default: transparent;\n    --wcs-checkbox-background-color-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n    --wcs-checkbox-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-checkbox-background-color-indeterminate: var(--wcs-semantic-color-background-control-indicator-selected);\n\n    --wcs-checkbox-outline-radius-focus: var(--wcs-semantic-border-radius-base);\n    --wcs-checkbox-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-checkbox-gap: var(--wcs-semantic-spacing-base);\n    --wcs-checkmark-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-checkmark-height: 0.5rem;\n    --wcs-checkmark-width: 0.1875rem;\n    --wcs-checkmark-border-width: 0.125rem;\n\n    --wcs-indeterminate-bar-width: 0.625rem;\n    --wcs-indeterminate-bar-height: 0.125rem;\n    --wcs-indeterminate-bar-border-radius: 0.0625rem;\n    --wcs-indeterminate-bar-background-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n\n    --wcs-checkbox-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: inline-flex;\n\n    // if invalid or null value is set to label-alignment attribute, we fallback to center alignment\n    @include alignCheckboxAndText(center);\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-checkbox-text-color-disabled);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n    }\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n:host([checked]:not([indeterminate][disabled])) {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-selected);\n}\n\n.wcs-checkmark {\n    transition-property: border-color, background-color, color;\n    transition: var(--wcs-checkbox-transition-duration) ease-in-out;\n\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    font-size: var(--wcs-checkbox-text-font-size);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n    user-select: none;\n    display: flex;\n    gap: var(--wcs-checkbox-gap);\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]){\n    @include alignCheckboxAndText(start);\n}\n\n:host([label-alignment=\"center\"]){\n    @include alignCheckboxAndText(center);\n}\n\n:host([label-alignment=\"bottom\"]){\n    @include alignCheckboxAndText(flex-end);\n}\n\n/* Hide the browser's default checkbox */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n.wcs-container:hover:not([aria-disabled]), input:focus {\n    .text {\n        color: var(--wcs-checkbox-text-color-hover);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-hover);\n    }\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n}\n\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n    }\n}\n\n/* Create a custom checkbox */\n.wcs-checkmark {\n    flex: 0 0 var(--wcs-checkbox-size);\n    width: var(--wcs-checkbox-size);\n    height: var(--wcs-checkbox-size);\n    background-color: var(--wcs-checkbox-background-color-default);\n    border: var(--wcs-checkbox-border-width) solid var(--wcs-checkbox-border-color);\n    border-radius: var(--wcs-checkbox-border-radius);\n    box-sizing: border-box;\n}\n\n:host([indeterminate]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-indeterminate);\n        background: var(--wcs-checkbox-background-color-indeterminate);\n    }\n}\n\n:host([indeterminate][disabled]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n        background: var(--wcs-checkbox-background-color-disabled);\n    }\n}\n\n/* When the checkbox is checked, add a blue background */\n.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-selected);\n}\n.wcs-container[aria-disabled] input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-disabled);\n}\n\n/* Create the wcs-checkmark/indicator (hidden when not checked) */\n.wcs-checkmark:after {\n    content: \"\";\n    position: absolute;\n    display: none;\n}\n\n.wcs-checkmark {\n    position: relative;\n}\n\n:host([checked]), :host([indeterminate]) {\n    /* Show the wcs-checkmark when checked */\n    .wcs-container input~.wcs-checkmark:after {\n        display: flex;\n    }\n\n    /* Handle hover when checked/indeterminate */\n    .wcs-container:not([aria-disabled]):hover {\n        .wcs-checkmark {\n            background-color: var(--wcs-checkbox-background-color-hover);\n        }\n    }\n}\n\n:host(:not([indeterminate])) {\n    /* Style the wcs-checkmark/indicator */\n    .wcs-container .wcs-checkmark:after {\n        left: 0.25rem;\n        width: var(--wcs-checkmark-width);\n        height: var(--wcs-checkmark-height);\n        border: solid var(--wcs-checkmark-color, white);\n        border-width: 0 var(--wcs-checkmark-border-width) var(--wcs-checkmark-border-width) 0;\n        -webkit-transform: rotate(45deg);\n        -ms-transform: rotate(45deg);\n        transform: rotate(45deg);\n    }\n}\n\n:host([indeterminate]) {\n    .wcs-container .wcs-checkmark:after {\n        position: absolute;\n        background-color: var(--wcs-indeterminate-bar-background-color);\n        left: calc(50% - (var(--wcs-indeterminate-bar-width) / 2));\n        top: calc(50% - (var(--wcs-indeterminate-bar-height) / 2));\n        width: var(--wcs-indeterminate-bar-width);\n        height: var(--wcs-indeterminate-bar-height);\n        border-radius: var(--wcs-indeterminate-bar-border-radius);\n    }\n}\n\n.wcs-container:not([aria-disabled]) input:not(:checked)~.text {\n    color: var(--wcs-checkbox-text-color-default);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.wcs-container:not([aria-disabled]) input:checked~.text {\n    color: var(--wcs-checkbox-text-color-selected);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.hidden {\n    display: none;\n}\n","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"],"version":3}

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

@@ -0,0 +1,98 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d9de61ce.js';
+
+const chipCss = ":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)}";
+const WcsChipStyle0 = chipCss;
+
+const Chip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.wcsChipSelectChange = createEvent(this, "wcsChipSelectChange", 7);
+        this.wcsChipDismiss = createEvent(this, "wcsChipDismiss", 7);
+        this.handleDismiss = (event) => {
+            if (this.disabled || this.mode !== 'dismissible') {
+                return;
+            }
+            event.stopPropagation(); // Prevent the click event from bubbling up to the chip click handler
+            this.dismiss();
+        };
+        this.value = undefined;
+        this.label = undefined;
+        this.selected = false;
+        this.open = true;
+        this.disabled = false;
+        this.variant = 'primary';
+        this.mode = 'selectable';
+    }
+    select() {
+        this.selected = !this.selected; // Toggle the selected state
+        this.wcsChipSelectChange.emit({ value: this.value, selected: this.selected });
+    }
+    dismiss() {
+        this.open = false;
+        this.wcsChipDismiss.emit({ value: this.value });
+        this.focusNextChip();
+    }
+    focusNextChip() {
+        let currentElement = this.el.nextElementSibling;
+        while (currentElement) {
+            if (this.isActionableChip(currentElement)) {
+                this.focusChip(currentElement);
+                return;
+            }
+            currentElement = currentElement.nextElementSibling;
+        }
+    }
+    isActionableChip(element) {
+        return element instanceof HTMLElement
+            && element.tagName === 'WCS-CHIP'
+            && !element.disabled;
+    }
+    focusChip(chip) {
+        var _a, _b;
+        if (chip.mode === 'selectable') {
+            chip.focus();
+        }
+        else if (chip.mode === 'dismissible') {
+            (_b = (_a = chip.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    handleClick() {
+        if (this.disabled || this.mode !== 'selectable') {
+            return;
+        }
+        this.select();
+    }
+    ;
+    handleKeydown(ev) {
+        if (this.disabled) {
+            return;
+        }
+        if (this.mode === 'selectable') {
+            if (ev.key === 'Enter' || ev.key === ' ') {
+                this.select();
+            }
+        }
+        else if (this.mode === 'dismissible') {
+            if (ev.key === 'Delete' || ev.key === 'Backspace') {
+                this.dismiss();
+            }
+        }
+    }
+    render() {
+        const commonProps = {
+            'aria-disabled': this.disabled ? 'true' : null
+        };
+        if (this.mode === 'selectable') {
+            return (h(Host, Object.assign({}, commonProps, { role: "checkbox", "aria-checked": this.selected ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, onClick: this.handleClick.bind(this), onKeyDown: this.handleKeydown.bind(this) }), this.selected && (h("svg", { class: "check-icon", "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { 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", fill: "white" }))), h("span", null, this.label)));
+        }
+        else {
+            return (h(Host, Object.assign({}, commonProps), h("span", null, this.label), h("button", { "aria-label": `Supprimer ${this.label}`, disabled: this.disabled, onClick: this.handleDismiss.bind(this), onKeyDown: this.handleKeydown.bind(this) }, h("svg", { class: "dismiss-icon", "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { 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", fill: "currentColor" })))));
+        }
+    }
+    get el() { return getElement(this); }
+};
+Chip.style = WcsChipStyle0;
+
+export { Chip as wcs_chip };
+
+//# sourceMappingURL=wcs-chip.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"wcs-chip.entry.js","mappings":"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","names":[],"sources":["src/components/chip/chip.scss?tag=wcs-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    // #region CSS Variables\n    --wcs-chip-height: var(--wcs-semantic-size-s);\n    --wcs-chip-font-size: var(--wcs-semantic-font-size-base);\n    --wcs-chip-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-chip-focus-outline-border-width: var(--wcs-semantic-border-width-large);\n\n    --wcs-chip-padding-vertical: var(--wcs-semantic-spacing-base);\n    --wcs-chip-padding-horizontal: var(--wcs-semantic-spacing-base-150);\n    --wcs-chip-padding-horizontal-dismissible: var(--wcs-semantic-spacing-base);\n\n    --wcs-chip-selectable-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-selectable-background-color-pressed: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-chip-selectable-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-chip-selectable-background-color-selected: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-selectable-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-chip-selectable-background-color-selected-pressed: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-chip-selectable-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-chip-selectable-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-chip-selectable-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-chip-selectable-color-pressed: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-chip-selectable-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-chip-selectable-color-selected: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-chip-selectable-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-chip-selectable-color-selected-pressed: var(--wcs-semantic-color-foreground-action-primary-press);\n\n    --wcs-chip-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-chip-border-line-width: var(--wcs-semantic-border-width-default);\n    --wcs-chip-selectable-border-color: var(--wcs-semantic-color-border-action-secondary-default);\n    --wcs-chip-selectable-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-chip-selectable-border-color-pressed: var(--wcs-semantic-color-border-action-secondary-press);\n    --wcs-chip-selectable-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);\n\n    --wcs-chip-selectable-content-gap: var(--wcs-semantic-spacing-base);\n    --wcs-chip-selectable-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-chip-dismissible-content-gap: var(--wcs-semantic-spacing-base-05);\n    --wcs-chip-dismissible-padding-right: var(--wcs-semantic-spacing-base-05);\n    --wcs-chip-dismissible-button-outline-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-chip-dismissible-primary-focus-outline-color: var(--wcs-semantic-color-border-focus-base-on-secondary);\n    --wcs-chip-dismissible-primary-border-color: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-dismissible-primary-border-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-chip-dismissible-primary-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-chip-dismissible-primary-color-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-chip-dismissible-primary-color-pressed: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-chip-dismissible-primary-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-chip-dismissible-primary-background-color: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-chip-dismissible-primary-background-color-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-chip-dismissible-primary-background-color-pressed: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-chip-dismissible-primary-background-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-chip-dismissible-secondary-button-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n    --wcs-chip-dismissible-secondary-border-color: var(--wcs-semantic-color-border-action-secondary-default);\n    --wcs-chip-dismissible-secondary-border-color-disabled: var(--wcs-semantic-color-border-action-secondary-disabled);\n    --wcs-chip-dismissible-secondary-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-chip-dismissible-secondary-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n    --wcs-chip-dismissible-secondary-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-dismissible-secondary-button-background-color: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-chip-dismissible-secondary-button-background-color-hover: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-chip-dismissible-secondary-button-background-color-pressed: var(--wcs-semantic-color-background-surface-accent-light);\n    --wcs-chip-dismissible-secondary-button-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-disabled);\n\n    // #endregion\n\n    display: inline-flex;\n    // we set a 100% line-height to center the children text vertically\n    align-items: center;\n    // Prevents extra space below the line caused by baseline alignment of inline-flex elements when a component contains an inline SVG\n    vertical-align: middle;\n    overflow: hidden;\n    box-sizing: border-box;\n    height: var(--wcs-chip-height);\n    border-radius: var(--wcs-chip-border-radius);\n    font-size: var(--wcs-chip-font-size);\n    font-weight: var(--wcs-chip-font-weight);\n\n    // Default styles (selectable, not selected, not disabled)\n    padding: var(--wcs-chip-padding-vertical) var(--wcs-chip-padding-horizontal);\n    cursor: pointer;\n    user-select: none;\n\n    transition-property: color, background-color;\n    transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n    transition-timing-function: ease-out;\n}\n\n// SELECTABLE MODE\n:host([mode=selectable]) {\n    gap: var(--wcs-chip-selectable-content-gap);\n    border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-selectable-border-color);\n    background-color: var(--wcs-chip-selectable-background-color);\n    color: var(--wcs-chip-selectable-color);\n\n    &:host(:focus-visible) {\n        @include focus-outline(\n            $outline-color: var(--wcs-chip-selectable-focus-outline-color),\n            $border-radius: var(--wcs-chip-border-radius),\n            $border-width: var(--wcs-chip-focus-outline-border-width)\n        );\n    }\n\n    &:host(:not([disabled])) {\n        &:host(:not([selected])) {\n            &:host(:hover) {\n                background-color: var(--wcs-chip-selectable-background-color-hover);\n                color: var(--wcs-chip-selectable-color-hover);\n                border-color: var(--wcs-chip-selectable-border-color-hover);\n            }\n\n            &:host(:active) {\n                background-color: var(--wcs-chip-selectable-background-color-pressed);\n                color: var(--wcs-chip-selectable-color-pressed);\n                border-color: var(--wcs-chip-selectable-border-color-pressed);\n            }\n        }\n\n        &:host([selected]) {\n            color: var(--wcs-chip-selectable-color-selected);\n            background-color: var(--wcs-chip-selectable-background-color-selected);\n            border-color: transparent;\n\n            svg path {\n                fill: var(--wcs-chip-selectable-color-selected);\n                // todo: check this issue with designers\n                // We optically lift the check icon a bit to center it better\n                transform: translateY(-1.5px);\n            }\n\n            &:host(:hover) {\n                background-color: var(--wcs-chip-selectable-background-color-selected-hover);\n                color: var(--wcs-chip-selectable-color-selected-hover);\n\n                svg path {\n                    fill: var(--wcs-chip-selectable-color-selected-hover);\n                }\n            }\n\n            &:host(:active) {\n                background-color: var(--wcs-chip-selectable-background-color-selected-pressed);\n                color: var(--wcs-chip-selectable-color-selected-pressed);\n\n                svg path {\n                    fill: var(--wcs-chip-selectable-color-selected-pressed);\n                }\n            }\n        }\n    }\n\n    &:host([disabled]) {\n        color: var(--wcs-chip-selectable-color-disabled);\n        cursor: not-allowed;\n\n        svg {\n            path {\n                fill: var(--wcs-chip-selectable-color-disabled);\n            }\n        }\n\n        &:host(:not([selected])) {\n            border-color: var(--wcs-chip-selectable-border-color-disabled);\n        }\n\n        &:host([selected]) {\n            background-color: var(--wcs-chip-selectable-background-color-selected-disabled);\n            border: 0;\n        }\n    }\n}\n\n// DISMISSIBLE MODE\n:host([mode=dismissible]) {\n    cursor: initial;\n    border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color);\n    color: var(--wcs-chip-dismissible-primary-color);\n    background-color: var(--wcs-chip-dismissible-primary-background-color);\n    gap: var(--wcs-chip-dismissible-content-gap);\n    padding-right: var(--wcs-chip-dismissible-padding-right);\n\n    button {\n        background: transparent;\n        border: none;\n        margin: 0;\n        padding: 0;\n        border-radius: var(--wcs-semantic-border-radius-full);\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        color: inherit;\n        width: var(--wcs-semantic-size-xs);\n        height: var(--wcs-semantic-size-xs);\n\n        &:focus {\n            outline: none;\n\n            svg {\n                @include focus-outline(\n                    $outline-color: var(--wcs-chip-dismissible-primary-focus-outline-color),\n                    $border-radius: var(--wcs-chip-dismissible-button-outline-radius),\n                    $border-width: var(--wcs-chip-focus-outline-border-width)\n                );\n            }\n        }\n    }\n\n    &:host(:not([open])) {\n        display: none;\n        margin: 0;\n    }\n\n    &:host(:not([disabled])) {\n        button:hover {\n            background-color: var(--wcs-chip-dismissible-primary-background-color-hover);\n            color: var(--wcs-chip-dismissible-primary-color-hover);\n        }\n\n        button:active {\n            background-color: var(--wcs-chip-dismissible-primary-background-color-pressed);\n            color: var(--wcs-chip-dismissible-primary-color-pressed);\n        }\n    }\n\n    &:host([disabled]) {\n        color: var(--wcs-chip-dismissible-primary-color-disabled);\n        background-color: var(--wcs-chip-dismissible-primary-background-color-disabled);\n        cursor: not-allowed;\n        border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-primary-border-color-disabled);\n\n        svg {\n            cursor: not-allowed;\n\n            path {\n                fill: var(--wcs-chip-dismissible-primary-color-disabled);\n            }\n        }\n    }\n\n    // secondary override (colors only), based on the code above for the primary variant\n    &:host([variant=secondary]) {\n        color: var(--wcs-chip-dismissible-secondary-color);\n        background-color: var(--wcs-chip-dismissible-secondary-background-color);\n        border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color);\n\n        button {\n            background: var(--wcs-chip-dismissible-secondary-button-background-color);\n\n            &:focus {\n                outline: none;\n\n                svg {\n                    @include focus-outline(\n                        $outline-color: var(--wcs-chip-dismissible-secondary-button-focus-outline-color),\n                        $border-radius: var(--wcs-chip-dismissible-button-outline-radius),\n                        $border-width: var(--wcs-chip-focus-outline-border-width)\n                    );\n                }\n            }\n        }\n\n        &:host(:not([disabled])) {\n            button:hover {\n                background-color: var(--wcs-chip-dismissible-secondary-button-background-color-hover);\n                color: var(--wcs-chip-dismissible-secondary-button-color-hover);\n            }\n\n            button:active {\n                background-color: var(--wcs-chip-dismissible-secondary-button-background-color-pressed);\n                color: var(--wcs-chip-dismissible-secondary-button-color-pressed);\n            }\n        }\n\n        &:host([disabled]) {\n            color: var(--wcs-chip-dismissible-secondary-color-disabled);\n            background-color: var(--wcs-chip-dismissible-secondary-background-color-disabled);\n            border: solid var(--wcs-chip-border-line-width) var(--wcs-chip-dismissible-secondary-border-color-disabled);\n\n            svg {\n                path {\n                    fill: var(--wcs-chip-dismissible-secondary-color-disabled);\n                }\n            }\n        }\n    }\n}\n","import { Component, ComponentInterface, EventEmitter, Prop, Event, Element, Host, h } from '@stencil/core';\nimport { WcsChipMode, WcsChipVariant } from './chip-interface';\n\n/**\n * The chip component is a small, interactive element that can be used to represent an input, filter, or tag.\n * It can be in one of two modes: 'selectable' or 'dismissible'.\n * - In 'selectable' mode, the chip can be selected or deselected, and emits an event when clicked.\n * - In 'dismissible' mode, the chip can be dismissed (removed) by clicking a dismiss icon, and emits an event when the dismiss icon is clicked.\n *\n * @cssprop --wcs-chip-height - Height of the chip\n * @cssprop --wcs-chip-font-size - Font size of the chip text\n * @cssprop --wcs-chip-font-weight - Font weight of the chip text\n *\n * @cssprop --wcs-chip-focus-outline-border-width - Border width of the chip focus outline\n *\n * @cssprop --wcs-chip-padding-vertical - Vertical padding (top - bottom) of the chip\n * @cssprop --wcs-chip-padding-horizontal - Horizontal padding (left - right) of the chip\n * @cssprop --wcs-chip-padding-horizontal-dismissible - Horizontal padding (left - right) of the chip with 'dismissible' mode\n *\n * @cssprop --wcs-chip-selectable-background-color - Background color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-background-color-pressed - Background color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-background-color-hover - Background color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-background-color-selected - Background color of the chip with 'selectable' mode when selected\n * @cssprop --wcs-chip-selectable-background-color-selected-hover - Background color of the chip with 'selectable' mode when selected and hovered\n * @cssprop --wcs-chip-selectable-background-color-selected-pressed - Background color of the chip with 'selectable' mode when selected and pressed\n * @cssprop --wcs-chip-selectable-background-color-selected-disabled - Background color of the chip with 'selectable' mode when selected and disabled\n *\n * @cssprop --wcs-chip-selectable-color - Text color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-color-hover - Text color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-color-pressed - Text color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-color-disabled - Text color of the chip with 'selectable' mode when disabled\n * @cssprop --wcs-chip-selectable-color-selected - Text color of the chip with 'selectable' mode when selected\n * @cssprop --wcs-chip-selectable-color-selected-hover - Text color of the chip with 'selectable' mode when selected and hovered\n * @cssprop --wcs-chip-selectable-color-selected-pressed - Text color of the chip with 'selectable' mode when selected and pressed\n *\n * @cssprop --wcs-chip-border-radius - Border radius of the chip\n * @cssprop --wcs-chip-border-line-width - Border line width of the chip\n * @cssprop --wcs-chip-selectable-border-color - Border color of the chip with 'selectable' mode in default state\n * @cssprop --wcs-chip-selectable-border-color-hover - Border color of the chip with 'selectable' mode when hovered\n * @cssprop --wcs-chip-selectable-border-color-pressed - Border color of the chip with 'selectable' mode when pressed\n * @cssprop --wcs-chip-selectable-border-color-disabled - Border color of the chip with 'selectable' mode when disabled\n *\n * @cssprop --wcs-chip-selectable-content-gap - Gap between content elements in chip with 'selectable' mode\n * @cssprop --wcs-chip-selectable-focus-outline-color - Focus outline color of the chip with 'selectable' mode\n *\n * @cssprop --wcs-chip-dismissible-content-gap - Gap between content elements in chip with 'dismissible' mode\n * @cssprop --wcs-chip-dismissible-padding-right - Right padding of the chip with 'dismissible' mode\n * @cssprop --wcs-chip-dismissible-button-outline-radius - Outline radius of the button for the chip with 'dismissible' mode\n *\n * @cssprop --wcs-chip-dismissible-primary-focus-outline-color - Focus outline color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-border-color - Border color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'primary' variant when disabled\n * @cssprop --wcs-chip-dismissible-primary-color - Text color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-color-hover - Text color of the chip with 'dismissible' mode and 'primary' variant when hovered\n * @cssprop --wcs-chip-dismissible-primary-color-pressed - Text color of the chip with 'dismissible' mode and 'primary' variant when pressed\n * @cssprop --wcs-chip-dismissible-primary-color-disabled - Text color of the chip with 'dismissible' mode and 'primary' variant when disabled\n * @cssprop --wcs-chip-dismissible-primary-background-color - Background color of the chip with 'dismissible' mode and 'primary' variant\n * @cssprop --wcs-chip-dismissible-primary-background-color-hover - Background color of the chip with 'dismissible' mode and 'primary' variant when hovered\n * @cssprop --wcs-chip-dismissible-primary-background-color-pressed - Background color of the chip with 'dismissible' mode and 'primary' variant when pressed\n * @cssprop --wcs-chip-dismissible-primary-background-color-disabled - Background color of the chip with 'dismissible' mode and 'primary' variant when disabled\n *\n * @cssprop --wcs-chip-dismissible-secondary-button-focus-outline-color - Button focus outline color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-border-color - Border color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-border-color-disabled - Border color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n * @cssprop --wcs-chip-dismissible-secondary-color - Text color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-color-disabled - Text color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n * @cssprop --wcs-chip-dismissible-secondary-background-color - Background color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color - Button background color of the chip with 'dismissible' mode and 'secondary' variant\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-hover - Button background color of the chip with 'dismissible' mode and 'secondary' variant when hovered\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-pressed - Button background color of the chip with 'dismissible' mode and 'secondary' variant when pressed\n * @cssprop --wcs-chip-dismissible-secondary-button-background-color-disabled - Button background color of the chip with 'dismissible' mode and 'secondary' variant when disabled\n */\n@Component({\n    tag: 'wcs-chip',\n    styleUrl: 'chip.scss',\n    shadow: true\n})\nexport class Chip implements ComponentInterface {\n    @Element() el!: HTMLWcsChipElement;\n    /**\n     * Unique value representing the chip identifier in events.\n     */\n    @Prop() value: string;\n\n    /**\n     * Text label displayed on the chip.\n     */\n    @Prop() label: string;\n\n    /**\n     * If `true`, the chip is selected.\n     * This property is only used in 'selectable' mode.\n     */\n    @Prop({ reflect: true }) selected = false;\n\n    /**\n     * If `true`, the chip is open.\n     * This property is used to control the visibility of the chip in the dismissible mode.\n     * When the user clicks the dismiss icon, this property automatically becomes `false`, hiding the chip.\n     */\n    @Prop({ reflect: true }) open = true;\n\n    /**\n     * If `true`, the chip is disabled.\n     * The chip will not respond to click events and will not emit any events.\n     * This property is used in both 'selectable' and 'dismissible' modes.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Defines the visual style of the chip for the dismissible mode.\n     */\n    @Prop({ reflect: true }) variant: WcsChipVariant = 'primary';\n\n    /**\n     * Defines the mode of the chip.\n     * Can be 'selectable' or 'dismissible'.\n     * - 'selectable': The chip can be selected and emits an event when clicked.\n     * - 'dismissible': The chip can be dismissed (removed) and emits an event when the dismiss icon is clicked.\n     */\n    @Prop({ reflect: true }) mode: WcsChipMode = 'selectable';\n\n    /**\n     * Emitted when the chip is clicked in 'selectable' mode.\n     */\n    @Event() wcsChipSelectChange: EventEmitter<{ value: string; selected: boolean }>;\n\n    /**\n     * Emitted when the dismiss icon is clicked in 'dismissible' mode.\n     */\n    @Event() wcsChipDismiss: EventEmitter<{ value: string }>;\n\n\n    private select() {\n        this.selected = !this.selected; // Toggle the selected state\n        this.wcsChipSelectChange.emit({ value: this.value, selected: this.selected });\n    }\n\n    private dismiss() {\n        this.open = false;\n        this.wcsChipDismiss.emit({ value: this.value });\n        this.focusNextChip();\n    }\n\n    private focusNextChip(): void {\n        let currentElement = this.el.nextElementSibling;\n\n        while (currentElement) {\n            if (this.isActionableChip(currentElement)) {\n                this.focusChip(currentElement as HTMLWcsChipElement);\n                return;\n            }\n            currentElement = currentElement.nextElementSibling;\n        }\n    }\n\n    private isActionableChip(element: Element | null): element is HTMLWcsChipElement {\n        return element instanceof HTMLElement\n            && element.tagName === 'WCS-CHIP'\n            && !(element as HTMLWcsChipElement).disabled;\n    }\n\n    private focusChip(chip: HTMLWcsChipElement): void {\n        if (chip.mode === 'selectable') {\n            chip.focus();\n        } else if (chip.mode === 'dismissible') {\n            chip.shadowRoot?.querySelector('button')?.focus();\n        }\n    }\n\n    private handleClick() {\n        if (this.disabled || this.mode !== 'selectable') {\n            return;\n        }\n        this.select();\n    };\n\n    private handleDismiss = (event: Event) => {\n        if (this.disabled || this.mode !== 'dismissible') {\n            return;\n        }\n        event.stopPropagation(); // Prevent the click event from bubbling up to the chip click handler\n        this.dismiss();\n    };\n\n    private handleKeydown(ev) {\n        if (this.disabled) {\n            return;\n        }\n        if (this.mode === 'selectable') {\n            if (ev.key === 'Enter' || ev.key === ' ') {\n                this.select();\n            }\n        } else if (this.mode === 'dismissible') {\n            if (ev.key === 'Delete' || ev.key === 'Backspace') {\n                this.dismiss();\n            }\n        }\n    }\n\n    render() {\n        const commonProps = {\n            'aria-disabled': this.disabled ? 'true' : null\n        };\n\n        if (this.mode === 'selectable') {\n            return (\n                <Host\n                    {...commonProps}\n                    role=\"checkbox\"\n                    aria-checked={this.selected ? 'true' : 'false'}\n                    tabindex={this.disabled ? -1 : 0}\n                    onClick={this.handleClick.bind(this)}\n                    onKeyDown={this.handleKeydown.bind(this)}\n                >\n                    {this.selected && (\n                        <svg class=\"check-icon\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"\n                             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M23.712 8.3011L8.0292 23.7157C7.6356 24.095 6.9984 24.095 6.6264 23.7157L0.288 17.4955C-0.096 17.1226 -0.096 16.496 0.288 16.1192L2.1552 14.2739C2.5536 13.9036 3.1776 13.9036 3.5532 14.2739L6.6264 17.2764C6.9984 17.6583 7.6356 17.6583 8.0292 17.2764L20.4384 5.08081C20.8236 4.70662 21.4536 4.70662 21.8364 5.08081L23.712 6.91841C24.096 7.29516 24.096 7.91923 23.712 8.3011Z\"\n                                fill=\"white\" />\n                        </svg>\n                    )}\n                    <span>{this.label}</span>\n                </Host>\n            );\n        } else {\n            return (\n                <Host\n                    {...commonProps}\n                >\n                    <span>{this.label}</span>\n                    <button\n                        aria-label={`Supprimer ${this.label}`}\n                        disabled={this.disabled}\n                        onClick={this.handleDismiss.bind(this)}\n                        onKeyDown={this.handleKeydown.bind(this)}\n                    >\n                        <svg class=\"dismiss-icon\" aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"\n                             fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M14.2656 12.0298L19.588 6.72176C20.1908 6.12119 20.1061 5.05213 19.5034 4.45043C18.9006 3.84986 17.914 3.84986 17.3112 4.45043L11.9887 9.7596L6.66743 4.45043C6.06351 3.84986 5.07691 3.84986 4.47412 4.45043C3.87132 5.05213 3.82843 6.07942 4.43122 6.68112L9.75365 11.9892L4.43122 17.2983C3.82843 17.8989 3.87132 18.9262 4.47412 19.5279C5.07691 20.1296 6.10527 20.1702 6.70807 19.5685L12.0305 14.2605L17.3112 19.5279C17.914 20.1296 18.9006 20.1296 19.5034 19.5279C20.1061 18.9262 20.149 17.8989 19.5462 17.2983L14.2656 12.0298Z\"\n                                fill=\"currentColor\" />\n                        </svg>\n                    </button>\n                </Host>\n            );\n        }\n    }\n}\n\n"],"version":3}

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

@@ -5956,7 +5956,7 @@ const Select = class {
     onAutocompleteInputEvent(e) {
         var _a;
         const filter = (_a = this.autocompleteInput.value) !== null && _a !== void 0 ? _a : '';
-        this.setAutocompleteValue(filter);
+        this.setAutocompleteValue(filter, false, true); // fromUserInteraction = true
         // Avoid the inputEvent event to bubble and be emitted, we rather use wcsFilterChange in this case :
         e.stopPropagation();
     }
@@ -5964,13 +5964,15 @@ const Select = class {
      * Set the autocomplete value and open the select if needed.
      * @param filter - The new filter value
      * @param isReset - If true, the filter is reset and the select is closed
+     * @param fromUserInteraction - If true, the change comes from user interaction (typing), if false it's programmatic
      * @private
      */
-    setAutocompleteValue(filter, isReset = false) {
+    setAutocompleteValue(filter, isReset = false, fromUserInteraction = false) {
         var _a, _b;
         this.clearHighlightOnLastHighlightedOption();
         const newValueIsDifferentFromLastModifiedOption = this.lastModifiedOptionElement == null || ((_a = this.lastModifiedOptionElement) === null || _a === void 0 ? void 0 : _a.textContent) !== this.autocompleteValue;
-        if (!this.expanded && newValueIsDifferentFromLastModifiedOption && !isReset) {
+        // Only open the select automatically when the change comes from user interaction
+        if (!this.expanded && newValueIsDifferentFromLastModifiedOption && !isReset && fromUserInteraction) {
             this.open();
         }
         // Prevents client-side filtering logic from being applied when serverMode is enabled.
@@ -6039,14 +6041,14 @@ const Select = class {
         var _a;
         const ariaLabelValue = `${this.labelElement ? this.labelElement.innerText : ''} ${this.hasValue ? this.displayText : ''}`.trimEnd();
         const noResultContainerId = 'no-result-container';
-        return (h(Host, Object.assign({ key: '6a973d4f68de6f668fda8b17de1da78b94076dc0', class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes(), { role: !this.autocomplete ? "combobox" : null, "aria-haspopup": !this.autocomplete ? "listbox" : null, "aria-owns": !this.autocomplete ? this.optionsId : null, "aria-controls": !this.autocomplete ? this.optionsId : null, "aria-disabled": !this.autocomplete ? (this.disabled ? 'true' : null) : null, "aria-required": !this.autocomplete ? (this.required ? 'true' : 'false') : null, "aria-expanded": !this.autocomplete ? (this.expanded ? 'true' : 'false') : null, "aria-multiselectable": !this.autocomplete ? (this.multiple ? 'true' : 'false') : null, "aria-label": !this.autocomplete ? ariaLabelValue : null }), h("div", { key: '190343789a5d2b4227b4a9822348aa087b4bbbad', class: "wcs-select-control" }, h("div", { key: '2f61ddd11d08bd25d8acf00ecfdced4a97a33320', class: "wcs-select-value-container" }, this.hasValue
+        return (h(Host, Object.assign({ key: '71154caab9c0b2244716f5c5626cc0de3ed7d327', class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes(), { role: !this.autocomplete ? "combobox" : null, "aria-haspopup": !this.autocomplete ? "listbox" : null, "aria-owns": !this.autocomplete ? this.optionsId : null, "aria-controls": !this.autocomplete ? this.optionsId : null, "aria-disabled": !this.autocomplete ? (this.disabled ? 'true' : null) : null, "aria-required": !this.autocomplete ? (this.required ? 'true' : 'false') : null, "aria-expanded": !this.autocomplete ? (this.expanded ? 'true' : 'false') : null, "aria-multiselectable": !this.autocomplete ? (this.multiple ? 'true' : 'false') : null, "aria-label": !this.autocomplete ? ariaLabelValue : null }), h("div", { key: '2dff342eb864a28ac960583102de88cfd7f63d98', class: "wcs-select-control" }, h("div", { key: '0f2028f2eb8245fa08da06ccebbfbac880d0e090', class: "wcs-select-value-container" }, this.hasValue
             ?
                 (this.chips ?
                     this.values.map((option) => h(SelectChips, { disabled: this.disabled, option: option, onRemove: this.removeChip.bind(this) }))
                     : (!this.autocomplete || this.autocomplete && this.multiple) &&
                         h("label", { class: "wcs-select-value" }, this.displayText))
-            : !this.autocomplete && h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && h("input", Object.assign({ key: '7f2fc76276628b45ebcbcb40f64a82acafa5e192', class: "autocomplete-field", value: this.autocompleteValue, role: "combobox", "aria-haspopup": "listbox", "aria-label": ariaLabelValue, "aria-describedby": noResultContainerId, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": this.optionsId, "aria-owns": this.optionsId, "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-autocomplete": "list", autocomplete: "off", disabled: this.disabled, required: this.required, onBlur: (e) => this.onAutocompleteFieldBlur(e), placeholder: ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) ? null : this.placeholder, onInput: (e) => this.onAutocompleteInputEvent(e), ref: el => this.autocompleteInput = el }, this.inheritedAttributes))), h(SelectArrow, { key: 'a6075fc5a325bc1e19cc3d62ddbffb8a3409d454', up: this.expanded })), h("div", { key: '36a6ea6029659db97f174c12a4a5ff3c4c0bfd69', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { key: '3a02c19f0b77c98807a684ae77f2612c422cb096', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
-            h("div", { key: '82ecd4b70ed11d8497e9d5d3aea0c3c95f20ec36', role: "alert", id: noResultContainerId, class: "noresult-container" }, h("slot", { key: '607e7d9c3c112e64218d2170ca4e07aaf5cbd25c', name: "filter-no-result" }, h("span", { key: 'da3800fefd8f57c0d7b62e261933e3293bea2161' }, "Aucun r\u00E9sultat"))))));
+            : !this.autocomplete && h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && h("input", Object.assign({ key: '000f05300690b402f77b210b4e6808e73647d607', class: "autocomplete-field", value: this.autocompleteValue, role: "combobox", "aria-haspopup": "listbox", "aria-label": ariaLabelValue, "aria-describedby": noResultContainerId, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": this.optionsId, "aria-owns": this.optionsId, "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-autocomplete": "list", autocomplete: "off", disabled: this.disabled, required: this.required, onBlur: (e) => this.onAutocompleteFieldBlur(e), placeholder: ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) ? null : this.placeholder, onInput: (e) => this.onAutocompleteInputEvent(e), ref: el => this.autocompleteInput = el }, this.inheritedAttributes))), h(SelectArrow, { key: 'cbbb2ef8b0c49b69c2a3509e6444f52d114efd23', up: this.expanded })), h("div", { key: '9330811ed0b8e0a2380692cdca34f2196b087466', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { key: '9efd1b1d83e7bc1af1733909060854025c21df07', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
+            h("div", { key: 'a8438df62c26f1d4cfcd25c43d5636031138c71f', role: "alert", id: noResultContainerId, class: "noresult-container" }, h("slot", { key: '95397947cdef93512fec2c168ca42893500950ba', name: "filter-no-result" }, h("span", { key: 'd5fc78e9ba099a017f6ed3116b23aa929c34dcb9' }, "Aucun r\u00E9sultat"))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {