wcs-core 7.0.0 → 7.1.0

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

@@ -1 +1 @@
-{"file":"wcs-nav-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,oxKAAoxK,CAAC;AACxyK,yBAAe,UAAU;;MC4CZ,OAAO;;;;IAIhB,SAAS,CAAC,MAAqB;QAC3B,IAAIA,kBAAU,CAAC,MAAM,CAAC,EAAE;YACpB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;SACnB;KACJ;IAED,MAAM;QACF,QACIC,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,IACjBD,oEAAO,CACJ,EACT;KACL;;;;;;;","names":["isEnterKey","h","Host"],"sources":["src/components/nav-item/nav-item.scss?tag=wcs-nav-item","src/components/nav-item/nav-item.tsx"],"sourcesContent":["@import '../../style/breakpoints';\n@import '../../style/focus-outline.scss';\n\nwcs-nav-item {\n    --wcs-nav-item-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-nav-item-height-desktop: calc(10 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-height-mobile: calc(6 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-gap-desktop: var(--wcs-semantic-spacing-base);\n    --wcs-nav-item-gap-mobile: 0;\n\n    --wcs-nav-item-font-size-desktop: var(--wcs-semantic-font-size-label-3);\n    --wcs-nav-item-font-size-mobile: calc(var(--wcs-semantic-font-size-body-1) / 2);\n\n    --wcs-nav-item-background-color-default: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-nav-item-background-color-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-nav-item-background-color-press: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-nav-item-background-color-active: var(--wcs-semantic-color-background-action-primary-selected-default);\n\n    --wcs-nav-item-color-default: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-nav-item-color-active: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-nav-item-color-hover: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-nav-item-color-press: var(--wcs-semantic-color-foreground-action-primary-default);\n\n    --wcs-nav-item-border-color-focus: var(--wcs-semantic-color-foreground-action-primary-default); // TODO : censé être --wcs-semantic-color-border-focus-base-on-secondary -> pas encore implémenté le \"on-secondary\"\n    --wcs-nav-item-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-nav-item-indicator-background-color: var(--wcs-semantic-color-background-surface-accent-light);\n    --wcs-nav-item-indicator-width-desktop: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-width-mobile: calc(3 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-height-desktop: calc(3 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-height-mobile: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-border-radius-desktop: var(--wcs-semantic-border-radius-base) 0 0 var(--wcs-semantic-border-radius-base);\n    --wcs-nav-item-indicator-border-radius-mobile: var(--wcs-semantic-border-radius-base) var(--wcs-semantic-border-radius-base) 0 0;\n\n    --wcs-nav-item-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: block;\n    cursor: pointer;\n    font-weight: var(--wcs-nav-item-font-weight);\n\n    transition-property: color, background-color, border-color, box-shadow, backdrop-filter;\n    transition-duration: var(--wcs-nav-item-transition-duration);\n    transition-timing-function: ease-in-out;\n    background-color: var(--wcs-nav-item-background-color-default);\n\n    a {\n        display: flex;\n        position: relative;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        background-color: transparent;\n        border: none;\n        text-decoration: none;\n        height: var(--wcs-nav-item-height-desktop);\n        gap: var(--wcs-nav-item-gap-desktop);\n        font-size: var(--wcs-nav-item-font-size-desktop);\n        color: var(--wcs-nav-item-color-default);\n\n        @include for-tablet-landscape-down {\n            display: flex;\n            flex: 1;\n            height: var(--wcs-nav-item-height-mobile);\n            gap: var(--wcs-nav-item-gap-mobile);\n            font-size: var(--wcs-nav-item-font-size-mobile);\n        }\n    }\n\n    a:focus {\n        outline: none;\n    }\n\n    @include for-tablet-landscape-down {\n        &:has(a:focus-visible) {\n            @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n        }\n\n        @supports not selector(&:has(a:focus-visible)){\n            &:focus-within {\n                @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n            }\n        }\n    }\n\n    @include for-desktop-up {\n        &:has(a:focus-visible) {\n            @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n        }\n\n        @supports not selector(&:has(a:focus-visible)){\n            &:focus-within {\n                @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n            }\n        }\n    }\n\n    i {\n        margin-bottom: 0.5rem;\n        display: inline-block;\n        @include for-tablet-landscape-down {\n            margin-bottom: 0.25rem;\n            display: inline-block;\n        }\n    }\n}\n\nwcs-nav-item[slot=bottom] {\n    a {\n        @include for-desktop-up {\n            border-top: var(--wcs-nav-item-border-horizontal-width) solid var(--wcs-nav-item-border-horizontal-color);\n            border-bottom: none !important;\n        }\n    }\n}\n\nwcs-nav-item:hover {\n    a {\n        color: var(--wcs-nav-item-color-hover);\n    }\n\n    background-color: var(--wcs-nav-item-background-color-hover);\n}\n\n/* This selector is for the press state, not to be confused with the active state (.active) */\nwcs-nav-item:active {\n    a {\n        color: var(--wcs-nav-item-color-press);\n    }\n\n    background-color: var(--wcs-nav-item-background-color-press);\n}\n\n\nwcs-nav-item.active,\nwcs-nav-item:has(> .active) {\n    //background-blend-mode: multiply;\n    background-color: var(--wcs-nav-item-background-color-active);\n\n    a {\n        color: var(--wcs-nav-item-color-active);\n    }\n}\n\n// For the indicator on the active nav-item :\nwcs-nav-item.active, wcs-nav-item:has(> .active) {\n    a::after {\n        position: absolute;\n        right: 0;\n        width: var(--wcs-nav-item-indicator-width-desktop);\n        height: var(--wcs-nav-item-indicator-height-desktop);\n        content: \"\";\n        background-color: var(--wcs-nav-item-indicator-background-color);\n        border-radius: var(--wcs-nav-item-indicator-border-radius-desktop);\n    }\n\n    @include for-tablet-landscape-down {\n        a::after {\n            right: auto;\n            bottom: 0;\n            width: var(--wcs-nav-item-indicator-width-mobile);\n            height: var(--wcs-nav-item-indicator-height-mobile);\n            border-radius: var(--wcs-nav-item-indicator-border-radius-mobile);\n        }\n    }\n}\n","import { Element, Component, ComponentInterface, h, Listen, Host } from '@stencil/core';\nimport { isEnterKey } from \"../../utils/helpers\";\n\n/**\n * The nav-item component is a subcomponent of `wcs-nav` and should always be used inside it.  \n * They contain links to navigate to other pages of the website.\n * \n * @cssprop --wcs-nav-item-font-weight - Font weight of the nav item\n * \n * @cssprop --wcs-nav-item-height-desktop - Height of the nav item on desktop\n * @cssprop --wcs-nav-item-height-mobile - Height of the nav item on mobile\n * @cssprop --wcs-nav-item-gap-desktop - Gap between items in nav-item on desktop (e.g. icon and label)\n * @cssprop --wcs-nav-item-gap-mobile - Gap between items in nav-item on mobile (e.g. icon and label)\n * \n * \n * @cssprop --wcs-nav-item-font-size-desktop - Font size of the nav item on desktop\n * @cssprop --wcs-nav-item-font-size-mobile - Font size of the nav item on mobile\n * \n * @cssprop --wcs-nav-item-background-color-default - Default background color of the nav item\n * @cssprop --wcs-nav-item-background-color-hover - Background color of the nav item when hovered\n * @cssprop --wcs-nav-item-background-color-press - Background color of the nav item when pressed\n * @cssprop --wcs-nav-item-background-color-active - Background color of the nav item when active\n * \n * @cssprop --wcs-nav-item-color-default - Color of the nav item when default\n * @cssprop --wcs-nav-item-color-active - Color of the nav item when active\n * @cssprop --wcs-nav-item-color-hover - Color of the nav item when hovered\n * @cssprop --wcs-nav-item-color-press - Color of the nav item when pressed\n * \n * @cssprop --wcs-nav-item-border-color-focus - Border color of the nav item when focused\n * @cssprop --wcs-nav-item-border-width-focus - Border width of the nav item when focused\n * \n * @cssprop --wcs-nav-item-indicator-background-color - Background color of the nav item indicator\n * @cssprop --wcs-nav-item-indicator-width-desktop - Width of the nav item indicator on desktop\n * @cssprop --wcs-nav-item-indicator-width-mobile - Width of the nav item indicator on mobile\n * @cssprop --wcs-nav-item-indicator-height-desktop - Height of the nav item indicator on desktop\n * @cssprop --wcs-nav-item-indicator-height-mobile - Height of the nav item indicator on mobile\n * @cssprop --wcs-nav-item-indicator-border-radius-desktop - Border radius of the nav item indicator on desktop\n * @cssprop --wcs-nav-item-indicator-border-radius-mobile - Border radius of the nav item indicator on mobile\n * \n * @cssprop --wcs-nav-item-transition-duration - Transition duration of the nav item\n */\n@Component({\n    tag: 'wcs-nav-item',\n    styleUrl: 'nav-item.scss'\n})\nexport class NavItem implements ComponentInterface {\n    @Element() private el: HTMLElement;\n    \n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        if (isEnterKey(_event)) {\n            this.el.click();\n        }\n    }\n\n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot/>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-nav-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,y7LAAy7L,CAAC;AAC78L,yBAAe,UAAU;;MC4CZ,OAAO;;;;IAIhB,SAAS,CAAC,MAAqB;QAC3B,IAAIA,kBAAU,CAAC,MAAM,CAAC,EAAE;YACpB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;SACnB;KACJ;IAED,MAAM;QACF,QACIC,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,IACjBD,oEAAO,CACJ,EACT;KACL;;;;;;;","names":["isEnterKey","h","Host"],"sources":["src/components/nav-item/nav-item.scss?tag=wcs-nav-item","src/components/nav-item/nav-item.tsx"],"sourcesContent":["@import '../../style/breakpoints';\n@import '../../style/focus-outline.scss';\n\nwcs-nav-item {\n    --wcs-nav-item-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-nav-item-height-desktop: calc(10 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-height-mobile: calc(6 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-gap-desktop: var(--wcs-semantic-spacing-base);\n    --wcs-nav-item-gap-mobile: 0;\n\n    --wcs-nav-item-font-size-desktop: var(--wcs-semantic-font-size-label-3);\n    --wcs-nav-item-font-size-mobile: calc(var(--wcs-semantic-font-size-body-1) / 2);\n\n    --wcs-nav-item-background-color-default: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-nav-item-background-color-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-nav-item-background-color-press: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-nav-item-background-color-active: var(--wcs-semantic-color-background-action-primary-selected-default);\n\n    --wcs-nav-item-color-default: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-nav-item-color-active: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-nav-item-color-hover: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-nav-item-color-press: var(--wcs-semantic-color-foreground-action-primary-default);\n\n    --wcs-nav-item-border-color-focus: var(--wcs-semantic-color-border-focus-base-on-secondary);\n    --wcs-nav-item-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-nav-item-indicator-background-color: var(--wcs-semantic-color-background-surface-accent-light);\n    --wcs-nav-item-indicator-width-desktop: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-width-mobile: calc(3 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-height-desktop: calc(3 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-height-mobile: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-border-radius-desktop: var(--wcs-semantic-border-radius-base) 0 0 var(--wcs-semantic-border-radius-base);\n    --wcs-nav-item-indicator-border-radius-mobile: var(--wcs-semantic-border-radius-base) var(--wcs-semantic-border-radius-base) 0 0;\n\n    --wcs-nav-item-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: block;\n    cursor: pointer;\n    font-weight: var(--wcs-nav-item-font-weight);\n\n    transition-property: color, background-color, border-color, box-shadow, backdrop-filter;\n    transition-duration: var(--wcs-nav-item-transition-duration);\n    transition-timing-function: ease-in-out;\n    background-color: var(--wcs-nav-item-background-color-default);\n\n    a, button {\n        display: flex;\n        position: relative;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        background-color: transparent;\n        border: none;\n        text-decoration: none;\n        height: var(--wcs-nav-item-height-desktop);\n        gap: var(--wcs-nav-item-gap-desktop);\n        font-size: var(--wcs-nav-item-font-size-desktop);\n        color: var(--wcs-nav-item-color-default);\n\n        @include for-tablet-landscape-down {\n            display: flex;\n            flex: 1;\n            height: var(--wcs-nav-item-height-mobile);\n            gap: var(--wcs-nav-item-gap-mobile);\n            font-size: var(--wcs-nav-item-font-size-mobile);\n        }\n    }\n\n    button {\n        width: 100%;\n        cursor: inherit;\n    }\n\n    a:focus, button:focus {\n        outline: none;\n    }\n\n    @include for-tablet-landscape-down {\n        &:has(a:focus-visible), &:has(button:focus-visible) {\n            @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n        }\n\n        @supports not selector(&:has(a:focus-visible)) {\n            &:focus-within {\n                @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n            }\n        }\n\n        @supports not selector(&:has(button:focus-visible)) {\n            &:focus-within {\n                @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n            }\n        }\n    }\n\n    @include for-desktop-up {\n        &:has(a:focus-visible), &:has(button:focus-visible) {\n            @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n        }\n\n        @supports not selector(&:has(a:focus-visible)) {\n            &:focus-within {\n                @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n            }\n        }\n\n        @supports not selector(&:has(button:focus-visible)) {\n            &:focus-within {\n                @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n            }\n        }\n    }\n\n    i {\n        margin-bottom: 0.5rem;\n        display: inline-block;\n        @include for-tablet-landscape-down {\n            margin-bottom: 0.25rem;\n            display: inline-block;\n        }\n    }\n}\n\nwcs-nav-item[slot=bottom] {\n    a {\n        @include for-desktop-up {\n            border-top: var(--wcs-nav-item-border-horizontal-width) solid var(--wcs-nav-item-border-horizontal-color);\n            border-bottom: none !important;\n        }\n    }\n}\n\nwcs-nav-item:hover {\n    a {\n        color: var(--wcs-nav-item-color-hover);\n    }\n\n    background-color: var(--wcs-nav-item-background-color-hover);\n}\n\n/* This selector is for the press state, not to be confused with the active state (.active) */\nwcs-nav-item:active {\n    a {\n        color: var(--wcs-nav-item-color-press);\n    }\n\n    background-color: var(--wcs-nav-item-background-color-press);\n}\n\n\nwcs-nav-item.active,\nwcs-nav-item:has(> .active) {\n    //background-blend-mode: multiply;\n    background-color: var(--wcs-nav-item-background-color-active);\n\n    a {\n        color: var(--wcs-nav-item-color-active);\n    }\n}\n\n// For the indicator on the active nav-item :\nwcs-nav-item.active, wcs-nav-item:has(> .active) {\n    a::after {\n        position: absolute;\n        right: 0;\n        width: var(--wcs-nav-item-indicator-width-desktop);\n        height: var(--wcs-nav-item-indicator-height-desktop);\n        content: \"\";\n        background-color: var(--wcs-nav-item-indicator-background-color);\n        border-radius: var(--wcs-nav-item-indicator-border-radius-desktop);\n    }\n\n    @include for-tablet-landscape-down {\n        a::after {\n            right: auto;\n            bottom: 0;\n            width: var(--wcs-nav-item-indicator-width-mobile);\n            height: var(--wcs-nav-item-indicator-height-mobile);\n            border-radius: var(--wcs-nav-item-indicator-border-radius-mobile);\n        }\n    }\n}\n","import { Element, Component, ComponentInterface, h, Listen, Host } from '@stencil/core';\nimport { isEnterKey } from \"../../utils/helpers\";\n\n/**\n * The nav-item component is a subcomponent of `wcs-nav` and should always be used inside it.  \n * They contain links to navigate to other pages of the website.\n * \n * @cssprop --wcs-nav-item-font-weight - Font weight of the nav item\n * \n * @cssprop --wcs-nav-item-height-desktop - Height of the nav item on desktop\n * @cssprop --wcs-nav-item-height-mobile - Height of the nav item on mobile\n * @cssprop --wcs-nav-item-gap-desktop - Gap between items in nav-item on desktop (e.g. icon and label)\n * @cssprop --wcs-nav-item-gap-mobile - Gap between items in nav-item on mobile (e.g. icon and label)\n * \n * \n * @cssprop --wcs-nav-item-font-size-desktop - Font size of the nav item on desktop\n * @cssprop --wcs-nav-item-font-size-mobile - Font size of the nav item on mobile\n * \n * @cssprop --wcs-nav-item-background-color-default - Default background color of the nav item\n * @cssprop --wcs-nav-item-background-color-hover - Background color of the nav item when hovered\n * @cssprop --wcs-nav-item-background-color-press - Background color of the nav item when pressed\n * @cssprop --wcs-nav-item-background-color-active - Background color of the nav item when active\n * \n * @cssprop --wcs-nav-item-color-default - Color of the nav item when default\n * @cssprop --wcs-nav-item-color-active - Color of the nav item when active\n * @cssprop --wcs-nav-item-color-hover - Color of the nav item when hovered\n * @cssprop --wcs-nav-item-color-press - Color of the nav item when pressed\n * \n * @cssprop --wcs-nav-item-border-color-focus - Border color of the nav item when focused\n * @cssprop --wcs-nav-item-border-width-focus - Border width of the nav item when focused\n * \n * @cssprop --wcs-nav-item-indicator-background-color - Background color of the nav item indicator\n * @cssprop --wcs-nav-item-indicator-width-desktop - Width of the nav item indicator on desktop\n * @cssprop --wcs-nav-item-indicator-width-mobile - Width of the nav item indicator on mobile\n * @cssprop --wcs-nav-item-indicator-height-desktop - Height of the nav item indicator on desktop\n * @cssprop --wcs-nav-item-indicator-height-mobile - Height of the nav item indicator on mobile\n * @cssprop --wcs-nav-item-indicator-border-radius-desktop - Border radius of the nav item indicator on desktop\n * @cssprop --wcs-nav-item-indicator-border-radius-mobile - Border radius of the nav item indicator on mobile\n * \n * @cssprop --wcs-nav-item-transition-duration - Transition duration of the nav item\n */\n@Component({\n    tag: 'wcs-nav-item',\n    styleUrl: 'nav-item.scss'\n})\nexport class NavItem implements ComponentInterface {\n    @Element() private el: HTMLElement;\n    \n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        if (isEnterKey(_event)) {\n            this.el.click();\n        }\n    }\n\n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot/>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
 
 const navCss = ":host{--wcs-nav-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-nav-width-desktop:calc(12 * var(--wcs-semantic-size-base));--wcs-nav-height-mobile:calc(6 * var(--wcs-semantic-size-base))}nav{background-color:var(--wcs-nav-background-color);display:flex;z-index:1055;flex-direction:column;width:var(--wcs-nav-width-desktop);height:100%}nav div[role=list]{list-style-type:none;display:flex;flex-direction:column;flex-grow:1}@media (max-width: 1199px){nav div[role=list]{flex-direction:row}}@media (max-width: 1199px){nav{flex-direction:row;width:100%;height:var(--wcs-nav-height-mobile)}}@media (max-width: 1199px){::slotted(wcs-nav-item){flex:1}}@media (min-width: 1200px){slot[name=bottom],wcs-nav-item:not([slot=bottom])+wcs-nav-item[slot=bottom]{display:block;margin-top:auto}}";
 const WcsNavStyle0 = navCss;
@@ -21,7 +21,7 @@ const Nav = class {
         helpers.setOrRemoveAttribute(this.nativeNav, attr, value);
     }
     render() {
-        return (index.h("nav", Object.assign({ key: 'b21daddbeba58cc9f1a7488a50641062244e698b', role: "navigation", class: "wcs-nav-container", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), index.h("div", { key: '9a6aa465e017b462a444127e1a18dfe8814bb95f', role: "list" }, index.h("slot", { key: 'ef653234e05f5dd2bf1428562fcf8ee1dc695b72' }), index.h("slot", { key: '2e41b049ef0d82c5fecb8ef13b1cd59eec77e009', name: "bottom" }))));
+        return (index.h("nav", Object.assign({ key: '010b8847c02ed7e6c9f3112f486279709f75fbb0', role: "navigation", class: "wcs-nav-container", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), index.h("div", { key: '35117f4736ebeedc66db2c883eeb6a9b570fcc25', role: "list" }, index.h("slot", { key: 'a08aa2b168519ce86b6bfbabe501f38bfc55c62b' }), index.h("slot", { key: '0f2f00d3bf339128d64cb2b61eb7029d3a0ce035', name: "bottom" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/wcs-progress-bar.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
 
 const progressBarCss = ":host{--wcs-progress-bar-border-radius:var(--wcs-semantic-border-radius-full);--wcs-progress-bar-border-radius-small:var(--wcs-semantic-border-radius-small);--wcs-progress-bar-animation-duration:var(--wcs-semantic-motion-duration-feedback-slower);--wcs-progress-bar-height-m:calc(var(--wcs-semantic-size-m) / 4);--wcs-progress-bar-height-s:calc(var(--wcs-semantic-size-s) / 6);--wcs-progress-bar-background-color:transparent;--wcs-progress-bar-rail-color:var(--wcs-semantic-color-background-surface-tertiary);--wcs-progress-bar-rail-spacing:var(--wcs-semantic-spacing-small);--wcs-progress-bar-gap-s:var(--wcs-semantic-spacing-small);--wcs-progress-bar-gap-m:var(--wcs-semantic-spacing-base);--wcs-progress-bar-indicator-color:var(--wcs-semantic-color-background-surface-brand);--wcs-progress-bar-label-color:var(--wcs-semantic-color-text-primary);--wcs-progress-bar-label-font-size-s:var(--wcs-semantic-font-size-s);--wcs-progress-bar-label-font-size-m:calc(1.5 * var(--wcs-semantic-font-size-m));--wcs-progress-bar-label-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-progress-bar-label-percentage-font-size-s:calc(var(--wcs-semantic-font-size-s) * 0.7);--wcs-progress-bar-label-percentage-font-size-m:calc(var(--wcs-semantic-font-size-m) * 0.7);--wcs-progress-bar-label-top-space:var(--wcs-semantic-spacing-large)}:host([size=s]) .progress{height:var(--wcs-progress-bar-height-s);background-color:var(--wcs-progress-bar-background-color);background-image:none;background-size:auto;border-radius:var(--wcs-progress-bar-border-radius-small)}:host([size=s]) .progress .progress-label{font-size:var(--wcs-progress-bar-label-font-size-s);bottom:calc(100% + var(--wcs-progress-bar-gap-s))}:host([size=s]) .progress .progress-label sup{font-size:var(--wcs-progress-bar-label-percentage-font-size-s)}.progress{display:flex;height:var(--wcs-progress-bar-height-m);color:var(--wcs-progress-bar-label-color);background-color:var(--wcs-progress-bar-background-color);background-image:linear-gradient(90deg, var(--wcs-progress-bar-rail-color), 50%, transparent 50%);background-size:var(--wcs-progress-bar-rail-spacing) var(--wcs-progress-bar-height-m);border-radius:var(--wcs-progress-bar-border-radius)}.progress.has-label{margin-top:var(--wcs-progress-bar-label-top-space)}.progress.value-zero>.progress-bar>.progress-label{right:unset}.progress-bar{position:relative;display:flex;flex-direction:column;justify-content:center;color:var(--wcs-progress-bar-label-color);text-align:center;background-color:var(--wcs-progress-bar-indicator-color);border-radius:var(--wcs-progress-bar-border-radius);transition:width var(--wcs-progress-bar-animation-duration) ease-out}.progress-label{line-height:1;position:absolute;right:0;bottom:calc(100% + var(--wcs-progress-bar-gap-m));display:flex;flex-direction:row;align-items:flex-start;font-size:var(--wcs-progress-bar-label-font-size-m);font-weight:var(--wcs-progress-bar-label-font-weight)}.progress-label sup{font-size:var(--wcs-progress-bar-label-percentage-font-size-m)}";
 const WcsProgressBarStyle0 = progressBarCss;
@@ -27,8 +27,8 @@ const ProgressBar = class {
         const style = {
             width: this.value + '%'
         };
-        return (index.h("div", Object.assign({ key: '5eafbef962694edca0d5df1ba278305024b62c52', class: this.rootClasses(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), index.h("div", { key: '247b91b7898ef6c1c2ee16100bc344ec633beb9b', class: "progress-bar", style: style }, this.showLabel &&
-            index.h("span", { key: '24da06a23d7c1bae748872823defd844302d6d64', class: "progress-label" }, this.value, index.h("sup", { key: '0deaf0870a815c32d8c45767f12c41b4ee8b493b' }, "%")))));
+        return (index.h("div", Object.assign({ key: '9339cb3c4ef89618cb45119495d3601ce2110d3d', class: this.rootClasses(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), index.h("div", { key: '8b54ef388bcd4e2bff826a18374c4732f7d0e384', class: "progress-bar", style: style }, this.showLabel &&
+            index.h("span", { key: 'f50f5879441f22db9552f6bbaaca3ede6f23a678', class: "progress-label" }, this.value, index.h("sup", { key: 'b10471901b5d3efc0ae95d3a1de822ead1720b87' }, "%")))));
     }
     rootClasses() {
         let classes = 'progress';

package/dist/cjs/wcs-progress-radial.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
 
 const progressRadialCss = ":host{display:inline-flex;--wcs-progress-radial-rail-width:calc(var(--wcs-semantic-spacing-base) / 4);--wcs-progress-radial-rail-spacing:calc(var(--wcs-semantic-spacing-base) / 4);--wcs-progress-radial-rail-color:var(--wcs-semantic-color-background-surface-tertiary);--wcs-progress-radial-value-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-progress-radial-label-color:var(--wcs-semantic-color-text-primary);--wcs-progress-radial-label-font-size:calc(1.5 * var(--wcs-semantic-font-size-m));--wcs-progress-radial-label-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-progress-radial-label-percentage-font-size:calc(var(--wcs-semantic-font-size-m) * 0.7);--wcs-progress-radial-animation-duration:var(--wcs-semantic-motion-duration-feedback-slower)}.progress-circle{position:relative;display:inline-block}.circle-rail{position:absolute;z-index:0;stroke:var(--wcs-progress-radial-rail-color);stroke-dasharray:var(--wcs-progress-radial-rail-width) var(--wcs-progress-radial-rail-spacing);fill:none}.progress-circle-figure{position:absolute;top:0;z-index:1;transform:rotate(-90deg);transition:stroke-dashoffset var(--wcs-progress-radial-animation-duration) ease-out}.progress-circle-label{top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:var(--wcs-progress-radial-label-font-size);font-weight:var(--wcs-progress-radial-label-font-weight);color:var(--wcs-progress-radial-label-color)}.progress-circle-label sup{font-size:var(--wcs-progress-radial-label-percentage-font-size);top:-0.85em;position:relative;line-height:0;vertical-align:baseline}.progress-circle-value{stroke:var(--wcs-progress-radial-value-background-color);stroke-linecap:round}.progress-circle-value,.progress-circle-meter{fill:none}";
 const WcsProgressRadialStyle0 = progressRadialCss;
@@ -27,8 +27,8 @@ const ProgressRadial = class {
     }
     render() {
         const { backgroundImageSize, halfSize } = { backgroundImageSize: this.backgroundImageSize, halfSize: this.backgroundImageSize / 2 };
-        return (index.h("div", Object.assign({ key: '20a1b2ec2f830712df1314092685217a949fb29d', class: "progress-circle", "data-component": "radial-progress", style: this.getSize(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), index.h("svg", { key: '92572a6d6d5be7eca3a89285f77a8a5e0b6a2afa', "data-role": "figure", class: "circle-rail", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}` }, index.h("circle", { key: 'c1b1ced5b7d6e618ef5b99b917505c1fdf26bed3', cx: halfSize, cy: halfSize, r: 54, "stroke-width": 12 })), index.h("svg", { key: 'f5d3484a174d41b7d30c74f86c804f4580de3adf', class: "progress-circle-figure", "data-role": "figure", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}`, style: this.getSvgStyle() }, index.h("circle", { key: 'c050adc6249e7e02a93a4c1ae5a3964e30693a6b', class: "progress-circle-value", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" })), this.showLabel &&
-            index.h("div", { key: '7f1c735090e8bffeef031273988df3bb6d5ef3cb', class: "progress-circle-label", "data-role": "label" }, index.h("span", { key: 'b7bb1c1413f747b1fa69d4c604290a7c5b4474a2' }, index.h("span", { key: 'ce9dba9d9e9772486ba6ffee33f3333d48686805', "data-role": "labelvalue" }, this.value), index.h("sup", { key: 'ac7fb3d250f950bc87d1fbde2fcc6e6d6d6e3d4b' }, "%")))));
+        return (index.h("div", Object.assign({ key: 'c98910d8a132eacbf780f3d9e5a23553c14297a6', class: "progress-circle", "data-component": "radial-progress", style: this.getSize(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), index.h("svg", { key: 'd8f0282d2b7332c29ed10936ca2cfc5c00c03e3d', "data-role": "figure", class: "circle-rail", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}` }, index.h("circle", { key: '4534f4ac6749d59a8a1bd4189f3f998bc0aae416', cx: halfSize, cy: halfSize, r: 54, "stroke-width": 12 })), index.h("svg", { key: 'daf5358b0148443292ce3ac84d55d849e48033bc', class: "progress-circle-figure", "data-role": "figure", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}`, style: this.getSvgStyle() }, index.h("circle", { key: '3df0779e14354a9084b5f9132660ac2e1d446028', class: "progress-circle-value", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" })), this.showLabel &&
+            index.h("div", { key: '28212403f92e2a2f1b7515847e8e7cab95851413', class: "progress-circle-label", "data-role": "label" }, index.h("span", { key: '93b4d94b47b8289f113d717392824d3bca9f9ec9' }, index.h("span", { key: 'e7093e3a2d3accdbc81ced41d8a02afa167483f6', "data-role": "labelvalue" }, this.value), index.h("sup", { key: 'f9e66ca420de366cab09cc835d39e849030c4c8b' }, "%")))));
     }
     getSvgStyle() {
         return {

package/dist/cjs/wcs-radio-group.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
 
 const radioGroupCss = ":host{display:flex;--wcs-radio-group-gap:var(--wcs-semantic-spacing-base);--wcs-radio-group-option-height:var(--wcs-semantic-size-m);--wcs-radio-group-option-gap:var(--wcs-semantic-spacing-small);--wcs-radio-group-option-padding:var(--wcs-semantic-spacing-small) var(--wcs-semantic-spacing-small);--wcs-radio-group-option-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-group-option-background-color:var(--wcs-semantic-color-background-surface-accent-lightest)}:host([mode=radio]){flex-direction:column;gap:var(--wcs-radio-group-gap)}:host([mode=option]){box-sizing:border-box;height:var(--wcs-radio-group-option-height);display:inline-flex;flex-direction:row;align-items:center;gap:var(--wcs-radio-group-option-gap);padding:var(--wcs-radio-group-option-padding);background-color:var(--wcs-radio-group-option-background-color);border-radius:var(--wcs-radio-group-option-border-radius)}:host([mode=horizontal]){justify-content:space-between}";
 const WcsRadioGroupStyle0 = radioGroupCss;
@@ -20,6 +20,9 @@ const RadioGroup = class {
         this.updateRadioTabIndex(value);
         this.updateAllRadioState();
     }
+    async setAriaAttribute(attr, value) {
+        helpers.setOrRemoveAttribute(this.el, attr, value);
+    }
     componentDidLoad() {
         this.onValueChangeHandler(this.value);
         this.updateAllRadioModeAndName();
@@ -98,7 +101,7 @@ const RadioGroup = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '3bdbfd7aa67f709fed97c60c7226a25058bc6092', role: "radiogroup" }, index.h("slot", { key: '5b64203983551a6504ae675442c36e904bb5dec8', name: "option", onSlotchange: this.onSlotChange.bind(this) })));
+        return (index.h(index.Host, { key: '7e9a6c9412d6ababef068d5766d79a790c3e531f', role: "radiogroup" }, index.h("slot", { key: '6163831fbd131047a6f3556c76b1628f41453b6b', name: "option", onSlotchange: this.onSlotChange.bind(this) })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/wcs-radio-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-radio-group.entry.cjs.js","mappings":"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","names":["isSpaceKey","isEnterKey","isDownArrowKey","isRightArrowKey","isUpArrowKey","isLeftArrowKey","isTabKey","h","Host"],"sources":["src/components/radio-group/radio-group.scss?tag=wcs-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.tsx"],"sourcesContent":[":host {\n    display: flex;\n\n    // region Radio\n    --wcs-radio-group-gap: var(--wcs-semantic-spacing-base);\n    // endregion\n\n    // region Option\n    --wcs-radio-group-option-height: var(--wcs-semantic-size-m);\n    --wcs-radio-group-option-gap: var(--wcs-semantic-spacing-small);\n    --wcs-radio-group-option-padding: var(--wcs-semantic-spacing-small) var(--wcs-semantic-spacing-small);\n    --wcs-radio-group-option-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-radio-group-option-background-color: var(--wcs-semantic-color-background-surface-accent-lightest);\n    // endregion\n}\n\n:host([mode=radio]) {\n    flex-direction: column;\n    gap: var(--wcs-radio-group-gap);\n}\n\n:host([mode=option]) {\n    box-sizing: border-box;\n    height: var(--wcs-radio-group-option-height);\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--wcs-radio-group-option-gap);\n    padding: var(--wcs-radio-group-option-padding);\n    background-color: var(--wcs-radio-group-option-background-color);\n    border-radius: var(--wcs-radio-group-option-border-radius);\n}\n\n:host([mode=horizontal]) {\n    justify-content: space-between;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { RadioGroupChangeEventDetail, RadioGroupMode } from './radio-group-interface';\nimport { RadioChosedEvent } from '../radio/radio-interface';\nimport {\n    isDownArrowKey, isEnterKey,\n    isLeftArrowKey,\n    isRightArrowKey,\n    isSpaceKey,\n    isTabKey,\n    isUpArrowKey\n} from \"../../utils/helpers\";\n\n/**\n * @cssprop --wcs-radio-group-gap - Gap between each radio (checkmark + label) in horizontal mode\n * \n *\n * @cssprop --wcs-radio-group-option-background-color - Background color of the radio group option\n * \n * @cssprop --wcs-radio-group-option-height - Height of the radio group option\n * @cssprop --wcs-radio-group-option-padding - Padding of the radio group option\n *  \n * @cssprop --wcs-radio-group-option-border-radius - Border radius of the radio group option\n * \n * @cssprop --wcs-radio-group-option-gap - Gap between each radio option\n */\n@Component({\n    tag: 'wcs-radio-group',\n    styleUrl: 'radio-group.scss',\n    shadow: true\n})\nexport class RadioGroup implements ComponentInterface {\n    @Element() private el!: HTMLWcsRadioGroupElement;\n    \n    /**\n     * The value of the radio-group. Automatically reflects which radio button is selected.\n     */\n    @Prop({ mutable: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The name of the control to be set on all radio button children\n     */\n    @Prop({ reflect: true }) name;\n\n    /**\n     * The display mode of the control to be set on all radio button children\n     */\n    @Prop({ reflect: true }) mode: RadioGroupMode = 'radio';\n\n    /** Emitted when the value has changed. */\n    @Event() wcsChange!: EventEmitter<RadioGroupChangeEventDetail>;\n\n    @Watch('value')\n    onValueChangeHandler(value: any | undefined) {\n        this.updateRadioTabIndex(value);\n        this.updateAllRadioState();\n    }\n\n    componentDidLoad() {\n       this.onValueChangeHandler(this.value);\n       this.updateAllRadioModeAndName();\n    }\n    \n    onSlotChange() {\n        this.updateRadioTabIndex(this.value);\n        this.updateAllRadioModeAndName();\n    }\n    \n    updateAllRadioState() {\n        this.getSlottedRadios().forEach(r => r.updateState());\n    }\n    \n    @Watch('name')\n    @Watch('mode')\n    updateAllRadioModeAndName() {\n        this.getSlottedRadios().forEach(r => {\n            r.mode = this.mode;\n            r.name = this.name;\n        });\n    }\n    \n    updateRadioTabIndex(value: any | undefined) {\n        const radios = this.getSlottedRadios();\n\n        // Get the first radio that is not disabled and the checked one\n        const first = radios.find((radio) => !radio.disabled);\n        const checked = radios.find((radio) => radio.value === value && !radio.disabled);\n\n        if (!first && !checked) {\n            return;\n        }\n\n        // If an enabled checked radio exists, set it to be the focusable radio\n        // otherwise we default to focus the first radio\n        const focusable = checked || first;\n\n        for (const radio of radios) {\n            const tabindex = radio === focusable ? 0 : -1;\n            radio.setTabIndex(tabindex);\n        }\n    }\n\n    private getSlottedRadios(): HTMLWcsRadioElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-radio'));\n    }\n\n    private getSlottedRadiosNotDisabled(): HTMLWcsRadioElement[] {\n        return Array.from(this.getSlottedRadios().filter(radio => !radio.disabled));\n    }\n\n    @Listen('wcsRadioClick')\n    handleRadioClick(event: CustomEvent<RadioChosedEvent>) {\n        this.value = event.detail.value;\n        this.wcsChange.emit({\n            value: event.detail.value\n        });\n    }\n\n    @Listen('keydown')\n    async handleKeyDown(ev: KeyboardEvent) {\n        const radiosNotDisabled = this.getSlottedRadiosNotDisabled();\n        const previousSelected = radiosNotDisabled.findIndex(r => r === ev.target);\n        let indexToSelect: number;\n\n        if ((isSpaceKey(ev) || isEnterKey(ev))) {\n            ev.preventDefault();\n            indexToSelect = previousSelected;\n        } else if (isDownArrowKey(ev) || isRightArrowKey(ev)) {\n            ev.preventDefault();\n            // Check the next wcs-radio from the previous selected\n            indexToSelect = (previousSelected + 1) % radiosNotDisabled.length;  // to return at the beginning on the list when we are on the last index\n        } else if (isUpArrowKey(ev) || isLeftArrowKey(ev)) {\n            ev.preventDefault();\n            // Check the previous wcs-radio from the previous selected\n            indexToSelect = (previousSelected - 1 + radiosNotDisabled.length) % radiosNotDisabled.length; // To return at the end of the list when we are on index=0\n        } else if (isTabKey(ev)) {\n            return;\n        }\n        \n        const radioToSelect = radiosNotDisabled[indexToSelect]\n        if (radioToSelect) {\n            radioToSelect.focus();\n            \n            if (this.value !== radioToSelect.value) {\n                this.wcsChange.emit({\n                    value: radioToSelect.value\n                })\n            }\n            \n            this.value = radioToSelect.value;\n        }\n    }\n\n    render() {\n        return (\n            <Host role=\"radiogroup\">\n                <slot name=\"option\" onSlotchange={this.onSlotChange.bind(this)}/>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}
+{"file":"wcs-radio-group.entry.cjs.js","mappings":"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","names":["setOrRemoveAttribute","isSpaceKey","isEnterKey","isDownArrowKey","isRightArrowKey","isUpArrowKey","isLeftArrowKey","isTabKey","h","Host"],"sources":["src/components/radio-group/radio-group.scss?tag=wcs-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.tsx"],"sourcesContent":[":host {\n    display: flex;\n\n    // region Radio\n    --wcs-radio-group-gap: var(--wcs-semantic-spacing-base);\n    // endregion\n\n    // region Option\n    --wcs-radio-group-option-height: var(--wcs-semantic-size-m);\n    --wcs-radio-group-option-gap: var(--wcs-semantic-spacing-small);\n    --wcs-radio-group-option-padding: var(--wcs-semantic-spacing-small) var(--wcs-semantic-spacing-small);\n    --wcs-radio-group-option-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-radio-group-option-background-color: var(--wcs-semantic-color-background-surface-accent-lightest);\n    // endregion\n}\n\n:host([mode=radio]) {\n    flex-direction: column;\n    gap: var(--wcs-radio-group-gap);\n}\n\n:host([mode=option]) {\n    box-sizing: border-box;\n    height: var(--wcs-radio-group-option-height);\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--wcs-radio-group-option-gap);\n    padding: var(--wcs-radio-group-option-padding);\n    background-color: var(--wcs-radio-group-option-background-color);\n    border-radius: var(--wcs-radio-group-option-border-radius);\n}\n\n:host([mode=horizontal]) {\n    justify-content: space-between;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { RadioGroupChangeEventDetail, RadioGroupMode } from './radio-group-interface';\nimport { RadioChosedEvent } from '../radio/radio-interface';\nimport {\n    isDownArrowKey, isEnterKey,\n    isLeftArrowKey,\n    isRightArrowKey,\n    isSpaceKey,\n    isTabKey,\n    isUpArrowKey,\n    setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from '../../utils/mutable-aria-attribute';\n\n/**\n * @cssprop --wcs-radio-group-gap - Gap between each radio (checkmark + label) in horizontal mode\n * \n *\n * @cssprop --wcs-radio-group-option-background-color - Background color of the radio group option\n * \n * @cssprop --wcs-radio-group-option-height - Height of the radio group option\n * @cssprop --wcs-radio-group-option-padding - Padding of the radio group option\n *  \n * @cssprop --wcs-radio-group-option-border-radius - Border radius of the radio group option\n * \n * @cssprop --wcs-radio-group-option-gap - Gap between each radio option\n */\n@Component({\n    tag: 'wcs-radio-group',\n    styleUrl: 'radio-group.scss',\n    shadow: true\n})\nexport class RadioGroup implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsRadioGroupElement;\n    \n    /**\n     * The value of the radio-group. Automatically reflects which radio button is selected.\n     */\n    @Prop({ mutable: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The name of the control to be set on all radio button children\n     */\n    @Prop({ reflect: true }) name;\n\n    /**\n     * The display mode of the control to be set on all radio button children\n     */\n    @Prop({ reflect: true }) mode: RadioGroupMode = 'radio';\n\n    /** Emitted when the value has changed. */\n    @Event() wcsChange!: EventEmitter<RadioGroupChangeEventDetail>;\n\n    @Watch('value')\n    onValueChangeHandler(value: any | undefined) {\n        this.updateRadioTabIndex(value);\n        this.updateAllRadioState();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.el, attr, value);\n    }\n\n    componentDidLoad() {\n       this.onValueChangeHandler(this.value);\n       this.updateAllRadioModeAndName();\n    }\n    \n    onSlotChange() {\n        this.updateRadioTabIndex(this.value);\n        this.updateAllRadioModeAndName();\n    }\n    \n    updateAllRadioState() {\n        this.getSlottedRadios().forEach(r => r.updateState());\n    }\n    \n    @Watch('name')\n    @Watch('mode')\n    updateAllRadioModeAndName() {\n        this.getSlottedRadios().forEach(r => {\n            r.mode = this.mode;\n            r.name = this.name;\n        });\n    }\n    \n    updateRadioTabIndex(value: any | undefined) {\n        const radios = this.getSlottedRadios();\n\n        // Get the first radio that is not disabled and the checked one\n        const first = radios.find((radio) => !radio.disabled);\n        const checked = radios.find((radio) => radio.value === value && !radio.disabled);\n\n        if (!first && !checked) {\n            return;\n        }\n\n        // If an enabled checked radio exists, set it to be the focusable radio\n        // otherwise we default to focus the first radio\n        const focusable = checked || first;\n\n        for (const radio of radios) {\n            const tabindex = radio === focusable ? 0 : -1;\n            radio.setTabIndex(tabindex);\n        }\n    }\n\n    private getSlottedRadios(): HTMLWcsRadioElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-radio'));\n    }\n\n    private getSlottedRadiosNotDisabled(): HTMLWcsRadioElement[] {\n        return Array.from(this.getSlottedRadios().filter(radio => !radio.disabled));\n    }\n\n    @Listen('wcsRadioClick')\n    handleRadioClick(event: CustomEvent<RadioChosedEvent>) {\n        this.value = event.detail.value;\n        this.wcsChange.emit({\n            value: event.detail.value\n        });\n    }\n\n    @Listen('keydown')\n    async handleKeyDown(ev: KeyboardEvent) {\n        const radiosNotDisabled = this.getSlottedRadiosNotDisabled();\n        const previousSelected = radiosNotDisabled.findIndex(r => r === ev.target);\n        let indexToSelect: number;\n\n        if ((isSpaceKey(ev) || isEnterKey(ev))) {\n            ev.preventDefault();\n            indexToSelect = previousSelected;\n        } else if (isDownArrowKey(ev) || isRightArrowKey(ev)) {\n            ev.preventDefault();\n            // Check the next wcs-radio from the previous selected\n            indexToSelect = (previousSelected + 1) % radiosNotDisabled.length;  // to return at the beginning on the list when we are on the last index\n        } else if (isUpArrowKey(ev) || isLeftArrowKey(ev)) {\n            ev.preventDefault();\n            // Check the previous wcs-radio from the previous selected\n            indexToSelect = (previousSelected - 1 + radiosNotDisabled.length) % radiosNotDisabled.length; // To return at the end of the list when we are on index=0\n        } else if (isTabKey(ev)) {\n            return;\n        }\n        \n        const radioToSelect = radiosNotDisabled[indexToSelect]\n        if (radioToSelect) {\n            radioToSelect.focus();\n            \n            if (this.value !== radioToSelect.value) {\n                this.wcsChange.emit({\n                    value: radioToSelect.value\n                })\n            }\n            \n            this.value = radioToSelect.value;\n        }\n    }\n\n    render() {\n        return (\n            <Host role=\"radiogroup\">\n                <slot name=\"option\" onSlotchange={this.onSlotChange.bind(this)}/>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
 
 const radioCss = ":host{width:fit-content;--wcs-radio-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-radio-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-radio-text-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-radio-text-font-weight-selected:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-text-color-hover:var(--wcs-semantic-color-text-primary);--wcs-radio-checkmark-size:1rem;--wcs-radio-gap:var(--wcs-semantic-spacing-base);--wcs-radio-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-radio-checkmark-border-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-radio-checkmark-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-radio-checkmark-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-radio-checkmark-border-color-disabled:var(--wcs-semantic-color-border-control-indicator-disabled);--wcs-radio-checkmark-background-color-default:transparent;--wcs-radio-checkmark-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-radio-checkmark-background-color-selected-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-radio-checkmark-background-color-selected-hover:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-radio-checkmark-outline-distance-with-checkmark-circle:var(--wcs-semantic-spacing-small);--wcs-radio-checkmark-outline-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-outline-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-radio-checkmark-border-radius:var(--wcs-semantic-border-radius-full);--wcs-radio-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-hover:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-press:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-disabled:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-selected-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-radio-option-background-color-selected-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-radio-option-background-color-selected-press:var(--wcs-semantic-color-background-action-primary-press);--wcs-radio-option-background-color-selected-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-radio-option-text-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-hover:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-radio-option-text-color-selected-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-radio-option-text-color-selected-hover:var(--wcs-semantic-color-foreground-action-primary-hover);--wcs-radio-option-text-color-selected-press:var(--wcs-semantic-color-foreground-action-primary-press);--wcs-radio-option-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-option-text-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-text-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-border-width:var(--wcs-semantic-border-width-default);--wcs-radio-option-border-color-hover:var(--wcs-semantic-color-border-action-secondary-hover);--wcs-radio-option-border-color-press:var(--wcs-semantic-color-border-action-secondary-press);--wcs-radio-option-padding-top:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-right:var(--wcs-semantic-spacing-large);--wcs-radio-option-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-left:var(--wcs-semantic-spacing-large)}:host([mode=radio]) input,:host([mode=horizontal]) input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([mode=radio]) label,:host([mode=horizontal]) label{margin-bottom:0;color:var(--wcs-radio-text-color-default);font-weight:var(--wcs-radio-text-font-weight-default) !important;display:inline-block}:host([mode=radio]) label:before,:host([mode=horizontal]) label:before{border-radius:var(--wcs-radio-checkmark-border-radius);border:var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);position:relative;width:var(--wcs-radio-checkmark-size);height:var(--wcs-radio-checkmark-size);pointer-events:none;content:\"\";background-color:var(--wcs-radio-checkmark-background-color-default)}:host([mode=radio]) input:focus-visible+label,:host([mode=horizontal]) input:focus-visible+label{transition:none;outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-radio-border-radius)}:host([disabled]) label{color:var(--wcs-radio-text-color-disabled);cursor:not-allowed}:host([disabled]) label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled)}:host(:not([disabled])) label{cursor:pointer}:host([mode=radio].checked) label,:host([mode=horizontal].checked) label{color:var(--wcs-radio-text-color-selected);font-weight:var(--wcs-radio-text-font-weight-selected) !important}:host([mode=radio].checked) label:before,:host([mode=horizontal].checked) label:before{border-color:var(--wcs-radio-checkmark-border-color-selected);background-color:var(--wcs-radio-checkmark-background-color-selected);outline:solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);outline-offset:calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle))}:host([mode=radio][disabled].checked) label,:host([mode=horizontal][disabled].checked) label{color:var(--wcs-radio-text-color-disabled)}:host([mode=radio][disabled].checked) label:before,:host([mode=horizontal][disabled].checked) label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled);background-color:var(--wcs-radio-checkmark-background-color-selected-disabled)}:host([mode=radio]:hover:not([disabled])) label,:host([mode=horizontal]:hover:not([disabled])) label{color:var(--wcs-radio-text-color-hover)}:host([mode=radio]:hover:not([disabled])) label:before,:host([mode=horizontal]:hover:not([disabled])) label:before{border-color:var(--wcs-radio-checkmark-border-color-hover);background-color:var(--wcs-radio-checkmark-background-color-selected-hover)}:host([mode=radio]:hover:not([disabled]):not(.checked)) label:before,:host([mode=horizontal]:hover:not([disabled]):not(.checked)) label:before{background-color:var(--wcs-radio-checkmark-background-color-default)}:host([mode=radio]) label{border:none}:host([mode=radio]) label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin-right:var(--wcs-radio-gap);display:inline-block;top:3px;box-sizing:border-box}:host([mode=radio]) label:empty::before{margin-right:0}:host([mode=horizontal]){height:fit-content}:host([mode=horizontal]) label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin:auto auto var(--wcs-radio-gap);display:block}:host([mode=horizontal]) label:empty::before{margin-bottom:0}:host([mode=option]){font-weight:var(--wcs-radio-option-text-font-weight-default) !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);margin-bottom:0;color:var(--wcs-radio-option-text-color-default);white-space:nowrap;border-radius:var(--wcs-radio-option-border-radius);transition:background-color var(--wcs-radio-transition-duration) ease-in-out;background-color:var(--wcs-radio-option-background-color-default)}:host([mode=option]) input:focus-visible+label{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:0;border-radius:var(--wcs-radio-border-radius)}:host([mode=option][disabled]) label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-disabled)}:host([mode=option][disabled].checked) label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-selected-disabled)}:host([mode=option].checked) label{font-weight:var(--wcs-radio-option-text-font-weight-selected) !important;color:var(--wcs-radio-option-text-color-selected-default);background-color:var(--wcs-radio-option-background-color-selected-default)}:host([mode=option]:hover.checked:not([disabled])) label{color:var(--wcs-radio-option-text-color-selected-hover);background-color:var(--wcs-radio-option-background-color-selected-hover)}:host([mode=option]:active.checked:not([disabled])) label{color:var(--wcs-radio-option-text-color-selected-press);background-color:var(--wcs-radio-option-background-color-selected-press)}:host([mode=option]:hover:not(.checked):not([disabled])) label{color:var(--wcs-radio-option-text-color-hover);background-color:var(--wcs-radio-option-background-color-hover);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover)}:host([mode=option]:active:not(.checked):not([disabled])) label{color:var(--wcs-radio-option-text-color-press);background-color:var(--wcs-radio-option-background-color-press);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press)}";
 const WcsRadioStyle0 = radioCss;
@@ -77,7 +77,7 @@ const Radio = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'ebbb03e1c723a28798544b5f75bf305b74db2fe4', slot: "option", tabIndex: this.disabled ? -1 : this.radioTabIndex, class: this.checked ? 'checked' : '' }, index.h("input", Object.assign({ key: '6deafa14c6a33bb215ce629d2065cbc118692912', id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, ref: (el) => (this.nativeRadio = el) }, this.inheritedAttributes)), index.h("label", { key: 'a1bc3da98121c65a7589218fc57ca7c3baad1b67', htmlFor: `${this.inputId}` }, this.label)));
+        return (index.h(index.Host, { key: '07ab36a8de3f5503b21792d29fd384a9412f9c35', slot: "option", tabIndex: this.disabled ? -1 : this.radioTabIndex, class: this.checked ? 'checked' : '' }, index.h("input", Object.assign({ key: 'a977994ac12b09f5dac114b923cbeea2de437757', id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, ref: (el) => (this.nativeRadio = el) }, this.inheritedAttributes)), index.h("label", { key: '709e74930fd42435b6ad2ad12e1ab0b3653572d4', htmlFor: `${this.inputId}` }, this.label)));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

@@ -1 +1 @@
-{"file":"wcs-radio.entry.cjs.js","mappings":"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","names":["setOrRemoveAttribute","inheritAriaAttributes","inheritAttributes","h","Host"],"sources":["src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","src/components/radio/radio.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    width: fit-content;\n\n    --wcs-radio-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    // region mode Radio\n    --wcs-radio-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-radio-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-radio-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-radio-text-color-hover: var(--wcs-semantic-color-text-primary);\n\n    --wcs-radio-checkmark-size: 1rem; // for now, we let raw value to let adjust the size based on base font size\n\n    --wcs-radio-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-radio-outline-color-focus: var(--wcs-semantic-color-border-focus-base); // outline color for focus ring\n\n    --wcs-radio-checkmark-border-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-radio-checkmark-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-radio-checkmark-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-radio-checkmark-border-color-disabled: var(--wcs-semantic-color-border-control-indicator-disabled);\n\n    --wcs-radio-checkmark-background-color-default: transparent;\n    --wcs-radio-checkmark-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-radio-checkmark-background-color-selected-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-radio-checkmark-background-color-selected-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-radio-checkmark-outline-distance-with-checkmark-circle: var(--wcs-semantic-spacing-small);\n    --wcs-radio-checkmark-outline-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-outline-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-radio-checkmark-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-radio-border-radius: var(--wcs-semantic-border-radius-base);\n    // endregion\n\n    // region mode Option\n    --wcs-radio-option-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-hover: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-press: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-default);\n\n    --wcs-radio-option-background-color-selected-default: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-radio-option-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-radio-option-background-color-selected-press: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-radio-option-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-radio-option-text-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-hover: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n\n    --wcs-radio-option-text-color-selected-default: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-radio-option-text-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-radio-option-text-color-selected-press: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-radio-option-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-radio-option-text-font-weight-default: var(--wcs-semantic-font-weight-roman);\n    --wcs-radio-option-text-font-weight-selected: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-radio-option-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-radio-option-border-width: var(--wcs-semantic-border-width-default);\n\n    --wcs-radio-option-border-color-hover: var(--wcs-semantic-color-border-action-secondary-hover);\n    --wcs-radio-option-border-color-press: var(--wcs-semantic-color-border-action-secondary-press);\n\n    --wcs-radio-option-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-right: var(--wcs-semantic-spacing-large);\n    --wcs-radio-option-padding-bottom: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-left: var(--wcs-semantic-spacing-large);\n    // endregion\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    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    label {\n        margin-bottom: 0;\n        color: var(--wcs-radio-text-color-default);\n        font-weight: var(--wcs-radio-text-font-weight-default) !important;\n        display: inline-block;\n\n        &:before {\n            border-radius: var(--wcs-radio-checkmark-border-radius);\n            border: var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);\n            position: relative;\n            width: var(--wcs-radio-checkmark-size);\n            height: var(--wcs-radio-checkmark-size);\n            pointer-events: none;\n            content: \"\";\n            background-color: var(--wcs-radio-checkmark-background-color-default);\n        }\n    }\n\n    input:focus-visible + label {\n        transition: none;\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius));\n    }\n}\n\n:host([disabled]) {\n    label {\n        color: var(--wcs-radio-text-color-disabled);\n        cursor: not-allowed;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n        }\n    }\n}\n\n:host(:not([disabled])) {\n    label {\n        cursor: pointer;\n    }\n}\n\n:host([mode=radio].checked),\n:host([mode=horizontal].checked) {\n    label {\n        color: var(--wcs-radio-text-color-selected);\n        font-weight: var(--wcs-radio-text-font-weight-selected) !important;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-selected);\n            background-color: var(--wcs-radio-checkmark-background-color-selected);\n            outline: solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);\n            outline-offset: calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle));\n        }\n    }\n}\n\n:host([mode=radio][disabled].checked),\n:host([mode=horizontal][disabled].checked) {\n    label {\n        color: var(--wcs-radio-text-color-disabled);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-disabled);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled])),\n:host([mode=horizontal]:hover:not([disabled])) {\n    label {\n        color: var(--wcs-radio-text-color-hover);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-hover);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-hover);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled]):not(.checked)),\n:host([mode=horizontal]:hover:not([disabled]):not(.checked)) {\n    label:before {\n        background-color: var(--wcs-radio-checkmark-background-color-default);\n    }\n}\n\n:host([mode=radio]) {\n    label {\n        border: none;\n\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin-right: var(--wcs-radio-gap);\n            display: inline-block;\n            top: 3px;\n            box-sizing: border-box;\n        }\n\n        &:empty::before {\n            margin-right: 0;\n        }\n    }\n}\n\n:host([mode=horizontal]) {\n    height: fit-content;\n\n    label {\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin: auto auto var(--wcs-radio-gap);\n            display: block;\n        }\n\n        &:empty::before {\n            margin-bottom: 0;\n        }\n    }\n}\n\n:host([mode=option]) {\n    font-weight: var(--wcs-radio-option-text-font-weight-default) !important;\n\n    input {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n        box-sizing: border-box;\n        padding: 0;\n    }\n\n    label {\n        padding: var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);\n        margin-bottom: 0;\n        color: var(--wcs-radio-option-text-color-default);\n        white-space: nowrap;\n        border-radius: var(--wcs-radio-option-border-radius);\n        transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n        background-color: var(--wcs-radio-option-background-color-default);\n    }\n\n    input:focus-visible + label {\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius), $outline-offset: 0);\n    }\n}\n\n:host([mode=option][disabled]) {\n    label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-disabled);\n    }\n}\n\n:host([mode=option][disabled].checked) {\n    label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-selected-disabled);\n    }\n}\n\n:host([mode=option].checked) {\n    label {\n        font-weight: var(--wcs-radio-option-text-font-weight-selected) !important;\n        color: var(--wcs-radio-option-text-color-selected-default);\n        background-color: var(--wcs-radio-option-background-color-selected-default);\n    }\n}\n\n:host([mode=option]:hover.checked:not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-selected-hover);\n        background-color: var(--wcs-radio-option-background-color-selected-hover);\n    }\n}\n\n:host([mode=option]:active.checked:not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-selected-press);\n        background-color: var(--wcs-radio-option-background-color-selected-press);\n    }\n}\n\n:host([mode=option]:hover:not(.checked):not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-hover);\n        background-color: var(--wcs-radio-option-background-color-hover);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover);\n    }\n}\n\n:host([mode=option]:active:not(.checked):not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-press);\n        background-color: var(--wcs-radio-option-background-color-press);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press);\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    State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst RADIO_INHERITED_ATTRS = ['title'];\n\n/**\n * The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n *\n * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n *\n * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n *\n * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n */\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    @Element() private el!: HTMLWcsRadioElement;\n    private nativeRadio!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, the radio is selected. \n     * @private\n     */\n    @State() private checked = false;\n\n    /**\n     * The tabindex of the radio button\n     * @private\n     */\n    @State() private radioTabIndex = -1;\n\n    /**\n     * Sets a unique value for each radio, used to identify which radio button in a group is selected\n     */\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The label text displayed for the user\n     */\n    @Prop({ mutable: true, reflect: true }) label: string;\n    \n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ mutable: true }) disabled = false;\n\n    /**\n     * Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n     */\n    @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Emitted when the radio loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the radio has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * The name of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ mutable: true }) name: string;\n\n\n    /**\n     * The display mode of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    /**\n     * @internal\n     * Checks of unchecks the radio according to it's radio-group value\n     */\n    @Method()\n    async updateState() {\n        const radioGroup = this.getClosestRadioGroup();\n        if (radioGroup) {\n            this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n        }\n    }\n\n    /** @internal */\n    @Method()\n    async setTabIndex(value: number) {\n        this.radioTabIndex = value;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeRadio, attr, value);\n    }\n\n    onFocus(ev: FocusEvent) {\n        this.wcsFocus.emit(ev);\n    }\n\n    onBlur(ev: FocusEvent) {\n        this.wcsBlur.emit(ev);\n    }\n    \n    private getClosestRadioGroup(): HTMLWcsRadioGroupElement | null {\n        return this.el.closest('wcs-radio-group');\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n        \n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, RADIO_INHERITED_ATTRS),\n        };\n    }\n    \n    private onChange(_: Event) {\n        if (this.disabled) return;\n\n        // If the radio is unchecked, then the change represents its transition to the check state.\n        // Only emit the change event when going from unchecked to checked, like the native behavior.\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n        if (!this.checked) {\n            this.checked = true;\n            this.emitRadioChangeEvent();\n        }\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    render() {\n        \n        return (\n            <Host slot=\"option\"\n                  tabIndex={this.disabled ? -1 : this.radioTabIndex}\n                  class={this.checked ? 'checked' : ''}>\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked} // Initial checked state of native input\n                    disabled={this.disabled}\n                    onChange={this.onChange.bind(this)}\n                    onFocus={this.onFocus.bind(this)}\n                    onBlur={this.onBlur.bind(this)}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}\n                    ref={(el) => (this.nativeRadio = el)}\n                    {...this.inheritedAttributes}\n                />\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}
+{"file":"wcs-radio.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,22TAA22T,CAAC;AAC73T,uBAAe,QAAQ;;ACgBvB,MAAM,qBAAqB,GAAG,CAAC,OAAO,CAAC,CAAC;MA2E3B,KAAK;;;;;;QACN,YAAO,GAAG,UAAU,cAAc,EAAE,EAAE,CAAC;QAGvC,wBAAmB,GAAyB,EAAE,CAAC;uBAM5B,KAAK;6BAMC,CAAC,CAAC;;;wBAegB,KAAK;;oBA8BQ,OAAO;;;;;;IAOvE,MAAM,WAAW;QACb,MAAM,UAAU,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC/C,IAAI,UAAU,EAAE;YACZ,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAA;SAClF;KACJ;;IAID,MAAM,WAAW,CAAC,KAAa;QAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC9B;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5EA,4BAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACvD;IAED,OAAO,CAAC,EAAc;QAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC1B;IAED,MAAM,CAAC,EAAc;QACjB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACzB;IAEO,oBAAoB;QACxB,OAAO,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;KAC7C;IAED,iBAAiB;QACb,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;;YAE1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC;SACxC;QAED,IAAI,CAAC,mBAAmB,mCACjBC,6BAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9BC,yBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,qBAAqB,CAAC,CACvD,CAAC;KACL;IAEO,QAAQ,CAAC,CAAQ;QACrB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;;;;QAK1B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC/B;KACJ;IAED,oBAAoB;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,EAAE;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SACpB,CAAC,CAAC;KACN;IAED,MAAM;QAEF,QACIC,QAACC,UAAI,qDAAC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,EACjD,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,IACtCD,kFACI,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAClC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,mBACf,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,kBAC9B,GAAG,IAAI,CAAC,OAAO,EAAE,EAC/B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,IAChC,IAAI,CAAC,mBAAmB,EAC9B,EACFA,oEAAO,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,CACpD,EACT;KACL;;;;AAGL,IAAI,cAAc,GAAG,CAAC,CAAC;;;;;","names":["setOrRemoveAttribute","inheritAriaAttributes","inheritAttributes","h","Host"],"sources":["src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","src/components/radio/radio.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    width: fit-content;\n\n    --wcs-radio-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    // region mode Radio\n    --wcs-radio-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-radio-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-radio-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-radio-text-color-hover: var(--wcs-semantic-color-text-primary);\n\n    --wcs-radio-checkmark-size: 1rem; // for now, we let raw value to let adjust the size based on base font size\n\n    --wcs-radio-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-radio-outline-color-focus: var(--wcs-semantic-color-border-focus-base); // outline color for focus ring\n\n    --wcs-radio-checkmark-border-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-radio-checkmark-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-radio-checkmark-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-radio-checkmark-border-color-disabled: var(--wcs-semantic-color-border-control-indicator-disabled);\n\n    --wcs-radio-checkmark-background-color-default: transparent;\n    --wcs-radio-checkmark-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-radio-checkmark-background-color-selected-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-radio-checkmark-background-color-selected-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-radio-checkmark-outline-distance-with-checkmark-circle: var(--wcs-semantic-spacing-small);\n    --wcs-radio-checkmark-outline-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-outline-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-radio-checkmark-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-radio-border-radius: var(--wcs-semantic-border-radius-base);\n    // endregion\n\n    // region mode Option\n    --wcs-radio-option-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-hover: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-press: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-default);\n\n    --wcs-radio-option-background-color-selected-default: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-radio-option-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-radio-option-background-color-selected-press: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-radio-option-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-radio-option-text-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-hover: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n\n    --wcs-radio-option-text-color-selected-default: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-radio-option-text-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-radio-option-text-color-selected-press: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-radio-option-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-radio-option-text-font-weight-default: var(--wcs-semantic-font-weight-roman);\n    --wcs-radio-option-text-font-weight-selected: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-radio-option-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-radio-option-border-width: var(--wcs-semantic-border-width-default);\n\n    --wcs-radio-option-border-color-hover: var(--wcs-semantic-color-border-action-secondary-hover);\n    --wcs-radio-option-border-color-press: var(--wcs-semantic-color-border-action-secondary-press);\n\n    --wcs-radio-option-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-right: var(--wcs-semantic-spacing-large);\n    --wcs-radio-option-padding-bottom: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-left: var(--wcs-semantic-spacing-large);\n    // endregion\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    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    label {\n        margin-bottom: 0;\n        color: var(--wcs-radio-text-color-default);\n        font-weight: var(--wcs-radio-text-font-weight-default) !important;\n        display: inline-block;\n\n        &:before {\n            border-radius: var(--wcs-radio-checkmark-border-radius);\n            border: var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);\n            position: relative;\n            width: var(--wcs-radio-checkmark-size);\n            height: var(--wcs-radio-checkmark-size);\n            pointer-events: none;\n            content: \"\";\n            background-color: var(--wcs-radio-checkmark-background-color-default);\n        }\n    }\n\n    input:focus-visible + label {\n        transition: none;\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius));\n    }\n}\n\n:host([disabled]) {\n    label {\n        color: var(--wcs-radio-text-color-disabled);\n        cursor: not-allowed;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n        }\n    }\n}\n\n:host(:not([disabled])) {\n    label {\n        cursor: pointer;\n    }\n}\n\n:host([mode=radio].checked),\n:host([mode=horizontal].checked) {\n    label {\n        color: var(--wcs-radio-text-color-selected);\n        font-weight: var(--wcs-radio-text-font-weight-selected) !important;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-selected);\n            background-color: var(--wcs-radio-checkmark-background-color-selected);\n            outline: solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);\n            outline-offset: calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle));\n        }\n    }\n}\n\n:host([mode=radio][disabled].checked),\n:host([mode=horizontal][disabled].checked) {\n    label {\n        color: var(--wcs-radio-text-color-disabled);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-disabled);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled])),\n:host([mode=horizontal]:hover:not([disabled])) {\n    label {\n        color: var(--wcs-radio-text-color-hover);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-hover);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-hover);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled]):not(.checked)),\n:host([mode=horizontal]:hover:not([disabled]):not(.checked)) {\n    label:before {\n        background-color: var(--wcs-radio-checkmark-background-color-default);\n    }\n}\n\n:host([mode=radio]) {\n    label {\n        border: none;\n\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin-right: var(--wcs-radio-gap);\n            display: inline-block;\n            top: 3px;\n            box-sizing: border-box;\n        }\n\n        &:empty::before {\n            margin-right: 0;\n        }\n    }\n}\n\n:host([mode=horizontal]) {\n    height: fit-content;\n\n    label {\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin: auto auto var(--wcs-radio-gap);\n            display: block;\n        }\n\n        &:empty::before {\n            margin-bottom: 0;\n        }\n    }\n}\n\n:host([mode=option]) {\n    font-weight: var(--wcs-radio-option-text-font-weight-default) !important;\n\n    input {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n        box-sizing: border-box;\n        padding: 0;\n    }\n\n    label {\n        padding: var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);\n        margin-bottom: 0;\n        color: var(--wcs-radio-option-text-color-default);\n        white-space: nowrap;\n        border-radius: var(--wcs-radio-option-border-radius);\n        transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n        background-color: var(--wcs-radio-option-background-color-default);\n    }\n\n    input:focus-visible + label {\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius), $outline-offset: 0);\n    }\n}\n\n:host([mode=option][disabled]) {\n    label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-disabled);\n    }\n}\n\n:host([mode=option][disabled].checked) {\n    label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-selected-disabled);\n    }\n}\n\n:host([mode=option].checked) {\n    label {\n        font-weight: var(--wcs-radio-option-text-font-weight-selected) !important;\n        color: var(--wcs-radio-option-text-color-selected-default);\n        background-color: var(--wcs-radio-option-background-color-selected-default);\n    }\n}\n\n:host([mode=option]:hover.checked:not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-selected-hover);\n        background-color: var(--wcs-radio-option-background-color-selected-hover);\n    }\n}\n\n:host([mode=option]:active.checked:not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-selected-press);\n        background-color: var(--wcs-radio-option-background-color-selected-press);\n    }\n}\n\n:host([mode=option]:hover:not(.checked):not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-hover);\n        background-color: var(--wcs-radio-option-background-color-hover);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover);\n    }\n}\n\n:host([mode=option]:active:not(.checked):not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-press);\n        background-color: var(--wcs-radio-option-background-color-press);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press);\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    State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst RADIO_INHERITED_ATTRS = ['title'];\n\n/**\n * The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n *\n * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n *\n * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n *\n * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n */\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    @Element() private el!: HTMLWcsRadioElement;\n    private nativeRadio!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, the radio is selected. \n     * @private\n     */\n    @State() private checked = false;\n\n    /**\n     * The tabindex of the radio button\n     * @private\n     */\n    @State() private radioTabIndex = -1;\n\n    /**\n     * Sets a unique value for each radio, used to identify which radio button in a group is selected\n     */\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The label text displayed for the user\n     */\n    @Prop({ mutable: true, reflect: true }) label: string;\n    \n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ mutable: true, reflect: true }) disabled = false;\n\n    /**\n     * Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n     */\n    @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Emitted when the radio loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the radio has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * The name of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ mutable: true }) name: string;\n\n\n    /**\n     * The display mode of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    /**\n     * @internal\n     * Checks of unchecks the radio according to it's radio-group value\n     */\n    @Method()\n    async updateState() {\n        const radioGroup = this.getClosestRadioGroup();\n        if (radioGroup) {\n            this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n        }\n    }\n\n    /** @internal */\n    @Method()\n    async setTabIndex(value: number) {\n        this.radioTabIndex = value;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeRadio, attr, value);\n    }\n\n    onFocus(ev: FocusEvent) {\n        this.wcsFocus.emit(ev);\n    }\n\n    onBlur(ev: FocusEvent) {\n        this.wcsBlur.emit(ev);\n    }\n    \n    private getClosestRadioGroup(): HTMLWcsRadioGroupElement | null {\n        return this.el.closest('wcs-radio-group');\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n        \n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, RADIO_INHERITED_ATTRS),\n        };\n    }\n    \n    private onChange(_: Event) {\n        if (this.disabled) return;\n\n        // If the radio is unchecked, then the change represents its transition to the check state.\n        // Only emit the change event when going from unchecked to checked, like the native behavior.\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n        if (!this.checked) {\n            this.checked = true;\n            this.emitRadioChangeEvent();\n        }\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    render() {\n        \n        return (\n            <Host slot=\"option\"\n                  tabIndex={this.disabled ? -1 : this.radioTabIndex}\n                  class={this.checked ? 'checked' : ''}>\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked} // Initial checked state of native input\n                    disabled={this.disabled}\n                    onChange={this.onChange.bind(this)}\n                    onFocus={this.onFocus.bind(this)}\n                    onBlur={this.onBlur.bind(this)}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}\n                    ref={(el) => (this.nativeRadio = el)}\n                    {...this.inheritedAttributes}\n                />\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
 const selectArrow = require('./select-arrow-a8a47fe4.js');
-const helpers = require('./helpers-871f5a3d.js');
-const keyboardEvent = require('./keyboard-event-d2c81ce0.js');
+const helpers = require('./helpers-2f1a8ddc.js');
+const keyboardEvent = require('./keyboard-event-40ecdc27.js');
 const accessibility = require('./accessibility-5f681a74.js');
 const isEqual = require('./isEqual-8a0a6936.js');
 const popper = require('./popper-8d6e7fca.js');
@@ -5324,6 +5324,7 @@ const Select = class {
         this.value = undefined;
         this.placeholder = undefined;
         this.disabled = false;
+        this.required = false;
         this.multiple = false;
         this.autocomplete = false;
         this.serverMode = false;
@@ -6035,14 +6036,14 @@ const Select = class {
     render() {
         var _a;
         const ariaLabelValue = `${this.labelElement ? this.labelElement.innerText : ''} ${this.hasValue ? this.displayText : ''}`.trimEnd();
-        return (index.h(index.Host, Object.assign({ key: '201fc0413dca958b717f8e68a3180475a6d29cc6', 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.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-label": ariaLabelValue }), index.h("div", { key: 'ed3644949eb6b936640af99c24992b041efd3377', class: "wcs-select-control" }, index.h("div", { key: '3760064787fb454b33e4d957110fddc981aa4f30', class: "wcs-select-value-container" }, this.hasValue
+        return (index.h(index.Host, Object.assign({ key: '1fb232b49c0c6982f0fdb25f40b9cbc0b5a4feba', 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 }), index.h("div", { key: '1ffb794dad6a5047bda91a8d8a192542be53807e', class: "wcs-select-control" }, index.h("div", { key: '4a6eb4aee396013cb385c0747a64f5b734cdb671', class: "wcs-select-value-container" }, this.hasValue
             ?
                 (this.chips ?
                     this.values.map((option) => index.h(SelectChips, { disabled: this.disabled, option: option, onRemove: this.removeChip.bind(this) }))
                     : (!this.autocomplete || this.autocomplete && this.multiple) &&
                         index.h("label", { class: "wcs-select-value" }, this.displayText))
-            : !this.autocomplete && index.h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && index.h("input", Object.assign({ key: '5cc152dd3815f8852493876baa56ab513eb1b424', class: "autocomplete-field", value: this.autocompleteValue, role: "combobox", "aria-haspopup": "listbox", "aria-label": ariaLabelValue, "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, 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))), index.h(selectArrow.SelectArrow, { key: '5c555ddc2049519b25316a4c0428e6cd02a02ea8', up: this.expanded })), index.h("div", { key: 'ffed16dd522116e992fba80451a242a34d6efa0d', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, index.h("slot", { key: '296e306aad573f1c71bb23439c501127a5c1b298', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
-            index.h("div", { key: '8f49959dccc48542d89d8425d4659201627b27a8', class: "noresult-container" }, index.h("slot", { key: '16be57220be51e5417b9b1e92f929c678a0f6f02', name: "filter-no-result" }, index.h("span", { key: 'c45dd71a0243a08dd77cafc40577d39c8f7e6d5d' }, "Aucun r\u00E9sultat"))))));
+            : !this.autocomplete && index.h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && index.h("input", Object.assign({ key: '347b45243c453e7c7b9295091107a86953a045e5', class: "autocomplete-field", value: this.autocompleteValue, role: "combobox", "aria-haspopup": "listbox", "aria-label": ariaLabelValue, "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))), index.h(selectArrow.SelectArrow, { key: 'a7465cde16a44865b879d4c69de0fbdba0ab5279', up: this.expanded })), index.h("div", { key: 'dcd17dd6ca295aa4d3cc0e0e4e081cae36d2390e', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, index.h("slot", { key: '2d6ff245cdf496a3b8335fd3896a226209117717', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
+            index.h("div", { key: '26b9e2afd3db161f4c8be2d974825c8be68362d8', class: "noresult-container" }, index.h("slot", { key: '80558760b864f00666398afd6c413cd5e85e660f', name: "filter-no-result" }, index.h("span", { key: 'ba460bf80f8cc3127774bf19db6742766169727a' }, "Aucun r\u00E9sultat"))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -6101,8 +6102,8 @@ const SelectOption = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '5fb9e1a2133b04b3c1e791acec0d923c29e695bc', id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
-            index.h("wcs-checkbox", { key: '9dc934a047192b7bad75e740c5f9889e909a0e35', tabindex: "-1", checked: this.selected, disabled: this.disabled }), index.h("slot", { key: '07f513c6798cce83ab4aa5f553074db71e5b05e2' })));
+        return (index.h(index.Host, { key: 'f23b48f3dbf1219b02651cf96687762cd04670fd', id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
+            index.h("wcs-checkbox", { key: '78a67e83750518e01bab218efc605b7414224cc6', tabindex: "-1", checked: this.selected, disabled: this.disabled }), index.h("slot", { key: 'db2f9f6ef1a341070dac82b570308e08b852460d' })));
     }
     get el() { return index.getElement(this); }
 };