wcs-core 7.1.0 → 7.2.1

package/dist/esm/wcs-card-body.entry.js

@@ -1,14 +1,21 @@
-import { r as registerInstance, h } from './index-d9de61ce.js';
+import { r as registerInstance, h, H as Host } from './index-d9de61ce.js';
 
-const cardBodyCss = ":host{--wcs-card-body-padding:var(--wcs-semantic-spacing-large);flex:1 1 auto;padding:var(--wcs-card-body-padding)}";
+const cardBodyCss = ":host{--wcs-card-body-padding:var(--wcs-semantic-spacing-base-300);--wcs-card-body-gap:var(--wcs-semantic-spacing-base);flex:1 1 auto;padding:var(--wcs-card-body-padding)}:host(.horizontal),:host(.vertical){display:flex;flex-direction:column;gap:var(--wcs-card-body-gap)}::slotted(p){margin:0}";
 const WcsCardBodyStyle0 = cardBodyCss;
 
 const CardBody = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.orientation = null;
+    }
+    /**
+     * @internal this method is not intended to be used by the user
+     */
+    async setOrientation(orientation) {
+        this.orientation = orientation;
     }
     render() {
-        return (h("slot", { key: '4f5691663c5f43df79027a4fe7d09659c216a8e4' }));
+        return (h(Host, { key: '27547ebfbab0737a4947baf9ff4086d37b494155', class: this.orientation }, h("slot", { key: 'f9444717438f9981b479b39575c03297b04a5847' })));
     }
 };
 CardBody.style = WcsCardBodyStyle0;

package/dist/esm/wcs-card-body.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-card-body.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,qHAAqH,CAAC;AAC1I,0BAAe,WAAW;;MCWb,QAAQ;;;;IACjB,MAAM;QACF,QAAQ,8DAAQ,EAAE;KACrB;;;;;;","names":[],"sources":["src/components/card-body/card-body.scss?tag=wcs-card-body&encapsulation=shadow","src/components/card-body/card-body.tsx"],"sourcesContent":[":host {\n    --wcs-card-body-padding: var(--wcs-semantic-spacing-large);\n\n    flex: 1 1 auto;\n    padding: var(--wcs-card-body-padding);\n}\n","import { Component, ComponentInterface, h } from '@stencil/core';\n\n/**\n * The card-body is a subcomponent of `wcs-card`. It represents content of the card with an extra padding around.\n * \n * @cssprop --wcs-card-body-padding - Padding of the card body\n */\n@Component({\n    tag: 'wcs-card-body',\n    styleUrl: 'card-body.scss',\n    shadow: true\n})\nexport class CardBody implements ComponentInterface {\n    render() {\n        return (<slot />);\n    }\n}\n"],"version":3}
+{"file":"wcs-card-body.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,uSAAuS,CAAC;AAC5T,0BAAe,WAAW;;MCeb,QAAQ;;;2BAC+B,IAAI;;;;;IAMpD,MAAM,cAAc,CAAC,WAA4B;QAC7C,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;KAClC;IAED,MAAM;QACF,QACI,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,WAAW,IACzB,8DAAa,CACV,EACT;KACL;;;;;;","names":[],"sources":["src/components/card-body/card-body.scss?tag=wcs-card-body&encapsulation=shadow","src/components/card-body/card-body.tsx"],"sourcesContent":[":host {\n    --wcs-card-body-padding: var(--wcs-semantic-spacing-base-300);\n    --wcs-card-body-gap: var(--wcs-semantic-spacing-base);\n\n    flex: 1 1 auto;\n    padding: var(--wcs-card-body-padding);\n}\n\n:host(.horizontal), :host(.vertical) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-card-body-gap);\n}\n\n::slotted(p) {\n    margin: 0;\n}\n","import { Component, ComponentInterface, h, Host, Method, State } from '@stencil/core';\nimport { CardOrientation } from '../card/card-interface';\n\n/**\n * The card-body is a subcomponent of `wcs-card`. It represents content of the card with an extra padding around.\n *\n * @slot default - Default slot for the card body content. You can put anything you want. If you want a structured card, you can use `wcs-card-header`, `wcs-card-content`, and `wcs-card-footer` as slot\n *\n * @cssprop --wcs-card-body-padding - Padding of the card body\n * @cssprop --wcs-card-body-gap - Gap between each element in the card body\n */\n@Component({\n    tag: 'wcs-card-body',\n    styleUrl: 'card-body.scss',\n    shadow: true\n})\nexport class CardBody implements ComponentInterface {\n    @State() private orientation: CardOrientation = null;\n\n    /**\n     * @internal this method is not intended to be used by the user\n     */\n    @Method()\n    async setOrientation(orientation: CardOrientation) {\n        this.orientation = orientation;\n    }\n\n    render() {\n        return (\n            <Host class={this.orientation}>\n                <slot></slot>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host } from './index-d9de61ce.js';
+
+const cardContentCss = ":host{--wcs-card-content-color:var(--wcs-semantic-color-text-tertiary);--wcs-card-content-font-size:var(--wcs-semantic-font-size-body-3);display:block;overflow:hidden}::slotted(*){color:var(--wcs-card-content-color);font-size:var(--wcs-card-content-font-size);margin:0}";
+const WcsCardContentStyle0 = cardContentCss;
+
+const CardContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '970e45353d35495c5a4500e168f6b9fda970c7a0' }, h("slot", { key: '26f30084a71090b8894593f8c57f35a7e9f60f65' })));
+    }
+};
+CardContent.style = WcsCardContentStyle0;
+
+export { CardContent as wcs_card_content };
+
+//# sourceMappingURL=wcs-card-content.entry.js.map

package/dist/esm/wcs-card-content.entry.js.map

@@ -0,0 +1 @@
+{"file":"wcs-card-content.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,+QAA+Q,CAAC;AACvS,6BAAe,cAAc;;MCiBhB,WAAW;;;;IAEtB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/card-content/card-content.scss?tag=wcs-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":[":host {\n    --wcs-card-content-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-card-content-font-size: var(--wcs-semantic-font-size-body-3);\n\n    display: block;\n    overflow: hidden;\n}\n\n::slotted(*) {\n    color: var(--wcs-card-content-color);\n    font-size: var(--wcs-card-content-font-size);\n    margin: 0;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * A content for a card inside card-body. Commonly used to provide more details about the card content. \n * The information provided should be concise and easy to read.\n * \n * By default, the margin is removed from the top and bottom of the card description.\n * \n * @slot - The content of the card description.\n * \n * @cssprop --wcs-card-content-color - The color of the card description.\n * @cssprop --wcs-card-content-font-size - The font size of the card description.\n */\n@Component({\n  tag: 'wcs-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host } from './index-d9de61ce.js';
+
+const cardFooterCss = ":host{--wcs-card-footer-gap:var(--wcs-semantic-spacing-base);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-card-footer-gap)}";
+const WcsCardFooterStyle0 = cardFooterCss;
+
+const CardFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '8b600e63a3178bbf9c3d577053b927ff6ea9a48f' }, h("slot", { key: '1ce0728f66cd296c44dcc4d85c9e9d9dcbae853a' })));
+    }
+};
+CardFooter.style = WcsCardFooterStyle0;
+
+export { CardFooter as wcs_card_footer };
+
+//# sourceMappingURL=wcs-card-footer.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"wcs-card-footer.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,iJAAiJ,CAAC;AACxK,4BAAe,aAAa;;MCYf,UAAU;;;;IAEnB,MAAM;QACF,QACI,EAAC,IAAI,uDACD,8DAAa,CACV,EACT;KACL;;;;;;","names":[],"sources":["src/components/card-footer/card-footer.scss?tag=wcs-card-footer&encapsulation=shadow","src/components/card-footer/card-footer.tsx"],"sourcesContent":[":host {\n    --wcs-card-footer-gap: var(--wcs-semantic-spacing-base);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--wcs-card-footer-gap);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * The card footer component is a container that display content at the bottom of the card.\n * It uses a flex layout to organize actions the user can take with a card\n * \n * @cssprop --wcs-card-footer-gap - Gap of the card footer\n */\n@Component({\n    tag: 'wcs-card-footer',\n    styleUrl: 'card-footer.scss',\n    shadow: true,\n})\nexport class CardFooter {\n\n    render() {\n        return (\n            <Host>\n                <slot></slot>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}

package/dist/esm/wcs-card-header.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host } from './index-d9de61ce.js';
+
+const cardHeaderCss = ":host{--wcs-card-header-title-color:var(--wcs-semantic-color-text-primary);--wcs-card-header-title-font-size:var(--wcs-semantic-font-size-heading-5);--wcs-card-header-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-card-header-gap:var(--wcs-semantic-spacing-base-150);display:flex;flex-direction:column;align-items:flex-start;gap:var(--wcs-card-header-gap)}:host wcs-badge{align-self:flex-start}:host .header-content{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}h3{font-size:var(--wcs-card-header-title-font-size);font-weight:var(--wcs-card-header-title-font-weight);color:var(--wcs-card-header-title-color);margin-top:0;margin-bottom:0}";
+const WcsCardHeaderStyle0 = cardHeaderCss;
+
+const CardHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '6a79563b6c56b7c7262e447ea5946d094590afb6' }, h("slot", { key: '74b2f0d43ee991ebee97c0d9d7f6620e30dc9881', name: "badges" }), h("div", { key: '71f110c0e5360352a059d84235c1a1d513c83c0a', class: "header-content" }, h("h3", { key: '4b4763ae375f4b96e0018772df7f9af0a4fd20fe' }, h("slot", { key: 'c2925912655cbca5e351067e42f6a9c67de07083' })), h("slot", { key: '37b2f523adaf2685de1d76dde3942dba5c2379c1', name: "actions" }))));
+    }
+};
+CardHeader.style = WcsCardHeaderStyle0;
+
+export { CardHeader as wcs_card_header };
+
+//# sourceMappingURL=wcs-card-header.entry.js.map

package/dist/esm/wcs-card-header.entry.js.map

@@ -0,0 +1 @@
+{"file":"wcs-card-header.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,4rBAA4rB,CAAC;AACntB,4BAAe,aAAa;;MCmBf,UAAU;;;;IACnB,MAAM;QACF,QACI,EAAC,IAAI,uDACD,6DAAM,IAAI,EAAC,QAAQ,GAAQ,EAC3B,4DAAK,KAAK,EAAC,gBAAgB,IACvB,6DAAI,8DAAa,CAAK,EACtB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CACH,EACT;KACL;;;;;;","names":[],"sources":["src/components/card-header/card-header.scss?tag=wcs-card-header&encapsulation=shadow","src/components/card-header/card-header.tsx"],"sourcesContent":[":host {\n    --wcs-card-header-title-color: var(--wcs-semantic-color-text-primary);\n    --wcs-card-header-title-font-size: var(--wcs-semantic-font-size-heading-5);\n    --wcs-card-header-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-card-header-gap: var(--wcs-semantic-spacing-base-150);\n\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--wcs-card-header-gap);\n\n    wcs-badge {\n        align-self: flex-start;\n    }\n\n    .header-content {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n        align-items: center;\n        width: 100%;\n    }\n}\n\nh3 {\n    font-size: var(--wcs-card-header-title-font-size);\n    font-weight: var(--wcs-card-header-title-font-weight);\n    color: var(--wcs-card-header-title-color);\n    margin-top: 0;\n    margin-bottom: 0;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * The card header component is a container that display a title and an action, it can also display a label as a `<wcs-badge>` component.\n * \n * The default slotted element is displayed as a `<h3>` element\n *\n * @slot badges - Content for the badge label\n * @slot actions - Button or any action to display on the right of the title\n *\n * @cssprop --wcs-card-header-title-color - Color of the title\n * @cssprop --wcs-card-header-title-font-size - Font size of the title\n * @cssprop --wcs-card-header-title-font-weight - Font weight of the title\n * @cssprop --wcs-card-header-gap - Gap between the title and the badge\n */\n@Component({\n    tag: 'wcs-card-header',\n    styleUrl: 'card-header.scss',\n    shadow: true,\n})\nexport class CardHeader {\n    render() {\n        return (\n            <Host>\n                <slot name=\"badges\"></slot>\n                <div class=\"header-content\">\n                    <h3><slot></slot></h3>\n                    <slot name=\"actions\"></slot>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/esm/wcs-card-media.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, h, H as Host } from './index-d9de61ce.js';
+
+const cardMediaCss = ":host{display:block;--wcs-card-media-max-width-horizontal:160px}:host ::slotted(*),:host ::slotted([slot=horizontal]),:host ::slotted([slot=vertical]){display:block;object-fit:cover;width:100%;height:100%}:host(.vertical) ::slotted(*),:host(.vertical) ::slotted([slot=vertical]){border-radius:var(--wcs-card-border-radius) var(--wcs-card-border-radius) 0 0;aspect-ratio:16/9}:host(.horizontal) ::slotted(*),:host(.horizontal) ::slotted([slot=horizontal]){width:var(--wcs-card-media-max-width-horizontal);aspect-ratio:1/1;border-radius:var(--wcs-card-border-radius) 0 0 var(--wcs-card-border-radius)}";
+const WcsCardMediaStyle0 = cardMediaCss;
+
+const CardMedia = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.orientation = 'vertical';
+    }
+    /**
+     * @internal this method is not intended to be used by the user
+     */
+    async setOrientation(orientation) {
+        this.orientation = orientation;
+    }
+    render() {
+        return (h(Host, { key: '8b54a791a4d1c8bfdc772cb5cd16f3a3dfec0682', class: this.orientation }, h("slot", { key: 'a7f5751e8e1f3ef3b1b18af34384cb598a80b690' }), this.orientation === 'vertical' ? h("slot", { name: "vertical" }) : h("slot", { name: "horizontal" })));
+    }
+};
+CardMedia.style = WcsCardMediaStyle0;
+
+export { CardMedia as wcs_card_media };
+
+//# sourceMappingURL=wcs-card-media.entry.js.map

package/dist/esm/wcs-card-media.entry.js.map

@@ -0,0 +1 @@
+{"file":"wcs-card-media.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,ylBAAylB,CAAC;AAC/mB,2BAAe,YAAY;;MCkBd,SAAS;;;2BAC8B,UAAU;;;;;IAM1D,MAAM,cAAc,CAAC,WAA4B;QAC7C,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;KAClC;IAED,MAAM;QACF,QACI,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,WAAW,IACzB,8DAAa,EACZ,IAAI,CAAC,WAAW,KAAK,UAAU,GAAG,YAAM,IAAI,EAAC,UAAU,GAAQ,GAAG,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC/F,EACT;KACL;;;;;;","names":[],"sources":["src/components/card-media/card-media.scss?tag=wcs-card-media&encapsulation=shadow","src/components/card-media/card-media.tsx"],"sourcesContent":[":host {\n    display: block;\n\n    --wcs-card-media-max-width-horizontal: 160px;\n\n    ::slotted(*), ::slotted([slot=\"horizontal\"]), ::slotted([slot=\"vertical\"]) {\n        display: block;\n        object-fit: cover; // object position = 50% 50%\n\n        width: 100%;\n        height: 100%;\n    }\n}\n\n:host(.vertical) {\n    ::slotted(*), ::slotted([slot=\"vertical\"]) {\n        border-radius: var(--wcs-card-border-radius) var(--wcs-card-border-radius) 0 0;\n        aspect-ratio: 16 / 9;\n    }\n}\n\n:host(.horizontal) {\n    ::slotted(*), ::slotted([slot=\"horizontal\"]) {\n        width: var(--wcs-card-media-max-width-horizontal);\n        aspect-ratio: 1 / 1;\n        border-radius: var(--wcs-card-border-radius) 0 0 var(--wcs-card-border-radius);\n    }\n}\n","import { Component, Host, h, Method, State } from '@stencil/core';\nimport { CardOrientation } from \"../card/card-interface\";\n\n/**\n * The card media component is a container that display an image/icon inside a card. \n * On horizontal orientation, the image/icon has an aspect ratio of 1/1\n * On vertical orientation, the image/icon has an aspect ratio of 16/9.\n * \n * @slot - The default slot where the image/icon is displayed\n * @slot vertical - The slot where the image/icon is displayed when the card is vertical\n * @slot horizontal - The slot where the image/icon is displayed when the card is horizontal\n * \n * @cssprop --wcs-card-media-max-width-horizontal - Max width of the image when the card is horizontal\n */\n@Component({\n    tag: 'wcs-card-media',\n    styleUrl: 'card-media.scss',\n    shadow: true,\n})\nexport class CardMedia {\n    @State() private orientation: CardOrientation = 'vertical';\n\n    /**\n     * @internal this method is not intended to be used by the user\n     */\n    @Method()\n    async setOrientation(orientation: CardOrientation) {\n        this.orientation = orientation;\n    }\n\n    render() {\n        return (\n            <Host class={this.orientation}>\n                <slot></slot>\n                {this.orientation === 'vertical' ? <slot name=\"vertical\"></slot> : <slot name=\"horizontal\"></slot>}\n            </Host>\n        );\n    }\n\n}\n"],"version":3}

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

@@ -1,16 +1,44 @@
-import { r as registerInstance, h } from './index-d9de61ce.js';
+import { r as registerInstance, h, g as getElement } from './index-d9de61ce.js';
 
-const cardCss = ":host{--wcs-card-border-color:var(--wcs-semantic-color-border-secondary);--wcs-card-border-radius:var(--wcs-semantic-border-radius-base);--wcs-card-border-width:var(--wcs-semantic-border-width-default);--wcs-card-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-card-text-color:var(--wcs-semantic-color-text-primary);position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-clip:border-box;border-radius:var(--wcs-card-border-radius);background-color:var(--wcs-card-background-color);color:var(--wcs-card-text-color)}:host([mode=raised]){box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}:host([mode=flat]){border:solid var(--wcs-card-border-width) var(--wcs-card-border-color)}";
+const cardCss = ":host{--wcs-card-border-color:var(--wcs-semantic-color-border-secondary);--wcs-card-border-radius:var(--wcs-semantic-border-radius-base);--wcs-card-border-width:var(--wcs-semantic-border-width-default);--wcs-card-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-card-text-color:var(--wcs-semantic-color-text-primary);--wcs-card-horizontal-min-height:160px;position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-clip:border-box;border-radius:var(--wcs-card-border-radius);background-color:var(--wcs-card-background-color);color:var(--wcs-card-text-color)}:host([mode=raised]){box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}:host([mode=flat]){border:solid var(--wcs-card-border-width) var(--wcs-card-border-color)}:host([orientation=horizontal]){flex-direction:row;min-height:var(--wcs-card-horizontal-height)}:host([orientation=vertical]){flex-direction:column}";
 const WcsCardStyle0 = cardCss;
 
 const Card = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.mode = 'flat';
+        this.orientation = null;
+    }
+    orientationChanged() {
+        this.updateWcsCardImageOrientation();
+    }
+    onSlotChange() {
+        if (this.orientation) {
+            this.updateWcsCardBodyOrientation();
+            this.updateWcsCardImageOrientation();
+        }
+    }
+    updateWcsCardImageOrientation() {
+        var _a;
+        (_a = this.findWcsCardMedia()) === null || _a === void 0 ? void 0 : _a.setOrientation(this.orientation);
+    }
+    updateWcsCardBodyOrientation() {
+        var _a;
+        (_a = this.findWcsCardBody()) === null || _a === void 0 ? void 0 : _a.setOrientation(this.orientation);
+    }
+    findWcsCardMedia() {
+        return this.el.querySelector('wcs-card-media');
+    }
+    findWcsCardBody() {
+        return this.el.querySelector('wcs-card-body');
     }
     render() {
-        return (h("slot", { key: 'da921d2df1dcee64b8e8edd17805e37a15544f05' }));
+        return (h("slot", { key: '20a57cf8fc64155e65a98bdb69618ec013ea5a7f', onSlotchange: () => this.onSlotChange() }));
     }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "orientation": ["orientationChanged"]
+    }; }
 };
 Card.style = WcsCardStyle0;
 

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

@@ -1 +1 @@
-{"file":"wcs-card.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,wyBAAwyB,CAAC;AACzzB,sBAAe,OAAO;;MCiBT,IAAI;;;oBAEI,MAAM;;IAGvB,MAAM;QACF,QACI,8DAAO,EACT;KACL;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=wcs-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":[":host {\n    --wcs-card-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-card-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-card-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-card-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-card-text-color: var(--wcs-semantic-color-text-primary);\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    word-wrap: break-word;\n    background-clip: border-box;\n    border-radius: var(--wcs-card-border-radius);\n    background-color: var(--wcs-card-background-color);\n    color: var(--wcs-card-text-color);\n}\n\n:host([mode=\"raised\"]) {\n    /* Card mode raised is deprecated in the new design system */\n    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20)\n}\n\n:host([mode=\"flat\"]) {\n    border: solid var(--wcs-card-border-width) var(--wcs-card-border-color);\n}\n","import { Component, ComponentInterface, h, Prop } from '@stencil/core';\nimport { CardMode } from './card-interface';\n\n/**\n * The card component is a container that display content such as text, images, buttons, and lists.  \n * A card can be a single component, but is often made up of a header, title, subtitle, and content.  \n *\n * @cssprop --wcs-card-border-color - Border color of the card\n * @cssprop --wcs-card-border-radius - Border radius of the card\n * @cssprop --wcs-card-border-width - Border width of the card\n * @cssprop --wcs-card-background-color - Background color of the card\n * @cssprop --wcs-card-text-color - Text color of the card\n */\n@Component({\n    tag: 'wcs-card',\n    styleUrl: 'card.scss',\n    shadow: true\n})\nexport class Card implements ComponentInterface {\n    @Prop({reflect: true, mutable: true})\n    mode: CardMode = 'flat';\n\n\n    render() {\n        return (\n            <slot/>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-card.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,m+BAAm+B,CAAC;AACp/B,sBAAe,OAAO;;MCuBT,IAAI;;;oBAGI,MAAM;2BAKQ,IAAI;;IAGnC,kBAAkB;QACd,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACxC;IAEO,YAAY;QAChB,IAAG,IAAI,CAAC,WAAW,EAAE;YACjB,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACpC,IAAI,CAAC,6BAA6B,EAAE,CAAC;SACxC;KACJ;IAEO,6BAA6B;;QACjC,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7D;IAEO,4BAA4B;;QAChC,MAAA,IAAI,CAAC,eAAe,EAAE,0CAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC5D;IAEO,gBAAgB;QACpB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;KAClD;IAEO,eAAe;QACnB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;KACjD;IAED,MAAM;QACF,QACI,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAG,EAClD;KACL;;;;;;;;;;","names":[],"sources":["src/components/card/card.scss?tag=wcs-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":[":host {\n    --wcs-card-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-card-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-card-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-card-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-card-text-color: var(--wcs-semantic-color-text-primary);\n\n    --wcs-card-horizontal-min-height: 160px;\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    word-wrap: break-word;\n    background-clip: border-box;\n    border-radius: var(--wcs-card-border-radius);\n    background-color: var(--wcs-card-background-color);\n    color: var(--wcs-card-text-color);\n}\n\n:host([mode=\"raised\"]) {\n    /* Card mode raised is deprecated in the new design system */\n    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20)\n}\n\n:host([mode=\"flat\"]) {\n    border: solid var(--wcs-card-border-width) var(--wcs-card-border-color);\n}\n\n:host([orientation=\"horizontal\"]) {\n    flex-direction: row;\n    min-height: var(--wcs-card-horizontal-height);\n}\n\n:host([orientation=\"vertical\"]) {\n    flex-direction: column;\n}\n","import { Component, ComponentInterface, h, Prop, Element, Watch } from '@stencil/core';\nimport { CardMode, CardOrientation } from './card-interface';\n\n/**\n * The card component is a container that display content such as text, images, buttons, and lists.  \n * A card can be a single component, but is often made up of a header, title, subtitle, and content.\n * \n * While they're very flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body`\n * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to make sure the card is well-designed.\n *\n * @slot - Default slot for the card content\n * \n * @cssprop --wcs-card-border-color - Border color of the card\n * @cssprop --wcs-card-border-radius - Border radius of the card\n * @cssprop --wcs-card-border-width - Border width of the card\n * @cssprop --wcs-card-background-color - Background color of the card\n * @cssprop --wcs-card-text-color - Text color of the card\n * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal\n */\n@Component({\n    tag: 'wcs-card',\n    styleUrl: 'card.scss',\n    shadow: true\n})\nexport class Card implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n    @Prop({reflect: true, mutable: true})\n    mode: CardMode = 'flat';\n    /**\n     * The orientation of the card, can be horizontal or vertical\n     */\n    @Prop({reflect: true})\n    orientation: CardOrientation = null;\n\n    @Watch('orientation')\n    orientationChanged() {\n        this.updateWcsCardImageOrientation();\n    }\n\n    private onSlotChange() {\n        if(this.orientation) {\n            this.updateWcsCardBodyOrientation();\n            this.updateWcsCardImageOrientation();\n        }\n    }\n\n    private updateWcsCardImageOrientation() {\n        this.findWcsCardMedia()?.setOrientation(this.orientation);\n    }\n\n    private updateWcsCardBodyOrientation() {\n        this.findWcsCardBody()?.setOrientation(this.orientation);\n    }\n\n    private findWcsCardMedia(): HTMLWcsCardMediaElement {\n        return this.el.querySelector('wcs-card-media');\n    }\n\n    private findWcsCardBody(): HTMLWcsCardBodyElement {\n        return this.el.querySelector('wcs-card-body');\n    }\n\n    render() {\n        return (\n            <slot onSlotchange={() => this.onSlotChange()}/>\n        );\n    }\n}\n"],"version":3}

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

@@ -81,7 +81,7 @@ const Checkbox = class {
         }
     }
     render() {
-        return (h(Host, { key: 'a20390ff38ab6bf7ec5a0868d396857edd93daa1' }, h("label", { key: 'ab9d5f22c1f48f84dbd75ad4d4699f403cbfb059', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, h("input", Object.assign({ key: '05afab86b77b327fe9e4f3c9e1e44d67d3c7678d', onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), onFocus: this.handleFocus.bind(this), onClick: this.handleInputClick.bind(this), checked: this.checked, class: "wcs-checkbox", type: "checkbox", ref: (el) => (this.nativeInput = el), name: this.name, disabled: this.disabled, id: this.name }, this.inheritedAttributes)), h("span", { key: 'f864ab3331ce992ea6b769b06cb29485485300e8', class: "wcs-checkmark" }), h("span", { key: '5709887a3b90454c7a2f711f553f3d95a6f98326', class: "text" }, h("slot", { key: 'ed2dc70d43b7915962c531e901a7abb84b1d34b6', onSlotchange: (_) => this.onSlotChange() })))));
+        return (h(Host, { key: 'a2215c880bbe8e2751505e44275e5cd085266baa' }, h("label", { key: 'ce09cb611a5e40695e2c2a8734501b28a04fe581', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, h("input", Object.assign({ key: 'ac1a253cfe304ed08e83383137f83e3bcc2403b9', onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), onFocus: this.handleFocus.bind(this), onClick: this.handleInputClick.bind(this), checked: this.checked, class: "wcs-checkbox", type: "checkbox", ref: (el) => (this.nativeInput = el), name: this.name, disabled: this.disabled, id: this.name }, this.inheritedAttributes)), h("span", { key: '04814a8a11514ee090d04b708095553c73aea6f8', class: "wcs-checkmark" }), h("span", { key: '8a2894a93d030a2854b39a47cad63066d0b6904a', class: "text" }, h("slot", { key: '40d804d00c1e3ba9eff5aa510b252a95a089e416', onSlotchange: (_) => this.onSlotChange() })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

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

@@ -1 +1 @@
-{"file":"wcs-checkbox.entry.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=wcs-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-default);\n    --wcs-checkbox-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-checkbox-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-checkbox-border-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-checkbox-border-color-indeterminate: var(--wcs-semantic-color-border-control-indicator-selected);\n\n    --wcs-checkbox-border-radius: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-checkbox-border-width: var(--wcs-semantic-border-width-large);\n\n    --wcs-checkbox-size: calc(2 * var(--wcs-semantic-size-base));\n\n    --wcs-checkbox-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-disabled: var(--wcs-semantic-color-text-tertiary);\n    --wcs-checkbox-text-color-hover: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-selected: var(--wcs-semantic-color-text-primary);\n\n    --wcs-checkbox-text-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-checkbox-text-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-checkbox-background-color-default: transparent;\n    --wcs-checkbox-background-color-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n    --wcs-checkbox-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-checkbox-background-color-indeterminate: var(--wcs-semantic-color-background-control-indicator-selected);\n\n    --wcs-checkbox-outline-radius-focus: var(--wcs-semantic-border-radius-base);\n    --wcs-checkbox-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-checkbox-gap: var(--wcs-semantic-spacing-base);\n    --wcs-checkmark-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-checkmark-height: 0.5rem;\n    --wcs-checkmark-width: 0.1875rem;\n    --wcs-checkmark-border-width: 0.125rem;\n\n    --wcs-indeterminate-bar-width: 0.625rem;\n    --wcs-indeterminate-bar-height: 0.125rem;\n    --wcs-indeterminate-bar-border-radius: 0.0625rem;\n    --wcs-indeterminate-bar-background-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n\n    --wcs-checkbox-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: inline-flex;\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-checkbox-text-color-disabled);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n    }\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n:host([checked]:not([indeterminate][disabled])) {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-selected);\n}\n\n.wcs-checkmark {\n    transition-property: border-color, background-color, color;\n    transition: var(--wcs-checkbox-transition-duration) ease-in-out;\n\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    font-size: var(--wcs-checkbox-text-font-size);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n    user-select: none;\n    display: flex;\n    gap: var(--wcs-checkbox-gap);\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]){\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]){\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]){\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default checkbox */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n.wcs-container:hover:not([aria-disabled]), input:focus {\n    .text {\n        color: var(--wcs-checkbox-text-color-hover);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-hover);\n    }\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n}\n\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n    }\n}\n\n/* Create a custom checkbox */\n.wcs-checkmark {\n    flex: 0 0 var(--wcs-checkbox-size);\n    width: var(--wcs-checkbox-size);\n    height: var(--wcs-checkbox-size);\n    background-color: var(--wcs-checkbox-background-color-default);\n    border: var(--wcs-checkbox-border-width) solid var(--wcs-checkbox-border-color);\n    border-radius: var(--wcs-checkbox-border-radius);\n    box-sizing: border-box;\n}\n\n:host([indeterminate]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-indeterminate);\n        background: var(--wcs-checkbox-background-color-indeterminate);\n    }\n}\n\n:host([indeterminate][disabled]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n        background: var(--wcs-checkbox-background-color-disabled);\n    }\n}\n\n/* When the checkbox is checked, add a blue background */\n.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-selected);\n}\n.wcs-container[aria-disabled] input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-disabled);\n}\n\n/* Create the wcs-checkmark/indicator (hidden when not checked) */\n.wcs-checkmark:after {\n    content: \"\";\n    position: absolute;\n    display: none;\n}\n\n.wcs-checkmark {\n    position: relative;\n}\n\n:host([checked]), :host([indeterminate]) {\n    /* Show the wcs-checkmark when checked */\n    .wcs-container input~.wcs-checkmark:after {\n        display: flex;\n    }\n\n    /* Handle hover when checked/indeterminate */\n    .wcs-container:not([aria-disabled]):hover {\n        .wcs-checkmark {\n            background-color: var(--wcs-checkbox-background-color-hover);\n        }\n    }\n}\n\n:host(:not([indeterminate])) {\n    /* Style the wcs-checkmark/indicator */\n    .wcs-container .wcs-checkmark:after {\n        left: 0.25rem;\n        width: var(--wcs-checkmark-width);\n        height: var(--wcs-checkmark-height);\n        border: solid var(--wcs-checkmark-color, white);\n        border-width: 0 var(--wcs-checkmark-border-width) var(--wcs-checkmark-border-width) 0;\n        -webkit-transform: rotate(45deg);\n        -ms-transform: rotate(45deg);\n        transform: rotate(45deg);\n    }\n}\n\n:host([indeterminate]) {\n    .wcs-container .wcs-checkmark:after {\n        position: absolute;\n        background-color: var(--wcs-indeterminate-bar-background-color);\n        left: calc(50% - (var(--wcs-indeterminate-bar-width) / 2));\n        top: calc(50% - (var(--wcs-indeterminate-bar-height) / 2));\n        width: var(--wcs-indeterminate-bar-width);\n        height: var(--wcs-indeterminate-bar-height);\n        border-radius: var(--wcs-indeterminate-bar-border-radius);\n    }\n}\n\n.wcs-container:not([aria-disabled]) input:not(:checked)~.text {\n    color: var(--wcs-checkbox-text-color-default);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.wcs-container:not([aria-disabled]) input:checked~.text {\n    color: var(--wcs-checkbox-text-color-selected);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.hidden {\n    display: none;\n}\n","import {\n    Component,\n    Prop,\n    Event,\n    EventEmitter,\n    ComponentInterface,\n    h,\n    Host,\n    Method,\n    Element,\n    Listen\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.\n * \n * @cssprop --wcs-checkbox-border-color-default - Default color of the border\n * @cssprop --wcs-checkbox-border-color-hover - Color of the border when hovered\n * @cssprop --wcs-checkbox-border-color-disabled - Color of the border when disabled\n * @cssprop --wcs-checkbox-border-color-selected - Color of the border when selected\n * @cssprop --wcs-checkbox-border-color-indeterminate - Color of the border when indeterminate\n * \n * @cssprop --wcs-checkbox-border-radius - Border radius of the checkbox\n * @cssprop --wcs-checkbox-border-width - Width of the border of the checkbox\n * \n * @cssprop --wcs-checkbox-size - Size of the checkbox\n * \n * @cssprop --wcs-checkbox-text-color-default - Color of the text when the checkbox is not selected\n * @cssprop --wcs-checkbox-text-color-disabled - Color of the text when the checkbox is disabled\n * @cssprop --wcs-checkbox-text-color-hover - Color of the text when the checkbox is hovered\n * @cssprop --wcs-checkbox-text-color-selected - Color of the text when the checkbox is selected\n * \n * @cssprop --wcs-checkbox-text-font-size - Font size of the text\n * @cssprop --wcs-checkbox-text-font-weight - Font weight of the text\n * \n * @cssprop --wcs-checkbox-background-color-default - Default background color of the checkbox\n * @cssprop --wcs-checkbox-background-color-hover - Background color of the checkbox when hovered\n * @cssprop --wcs-checkbox-background-color-disabled - Background color of the checkbox when disabled\n * @cssprop --wcs-checkbox-background-color-selected - Background color of the checkbox when selected\n * @cssprop --wcs-checkbox-background-color-indeterminate - Background color of the checkbox when indeterminate\n * \n * @cssprop --wcs-checkbox-outline-radius-focus - Border radius of the focus outline\n * @cssprop --wcs-checkbox-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-checkbox-gap - Gap between the checkbox and the label\n * @cssprop --wcs-checkmark-color - Color of the checkmark\n * @cssprop --wcs-checkmark-height - Height of the checkmark (From the bottom left to the top right of the checkmark)\n * @cssprop --wcs-checkmark-width - Width of the checkmark (From the bottom right to the top left of the checkmark)\n * @cssprop --wcs-checkmark-border-width - Width of the border of the checkmark\n *\n * @cssprop --wcs-indeterminate-bar-width - Width of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-height - Height of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-border-radius - Border-radius of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-background-color - Color of the indeterminate bar\n * \n * @cssprop --wcs-checkbox-transition-duration - Duration of the transition\n */\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: {\n        delegatesFocus: true,\n    },\n})\nexport class Checkbox implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n    @Element() private el!: HTMLElement;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n\n    @Prop() name = this.checkboxId;\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify whether the checkbox is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    /**\n     * Emitted when the checkbox has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the checkbox loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, CHECKBOX_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.onSlotChange();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    @Method()\n    async getLabel(): Promise<string> {\n        return getSlottedContentText(this.el);\n    }\n\n    handleChange(e: Event) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        this.toggleCheckboxState();\n    }\n    \n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n        \n        this.toggleCheckboxState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleCheckboxState() {\n        if (this.disabled) return;\n        \n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n    \n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    onSlotChange() { \n        const slot = this.el.shadowRoot.querySelector('slot');\n        if (slot) {\n            // TODO: remove when pseudo-class that indicate a slot has content is supported in all major browsers \n            //  (https://github.com/w3c/csswg-drafts/issues/6867)\n            // https://developer.mozilla.org/en-US/docs/Web/CSS/:empty\n            const assignedNodes = slot.assignedNodes();\n            if (assignedNodes.length > 0) {\n                this.el.shadowRoot.querySelector('.text').classList.remove('hidden');\n            } else {\n                this.el.shadowRoot.querySelector('.text').classList.add('hidden');\n            }\n        }\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input\n                        onBlur={this.handleBlur.bind(this)}\n                        onChange={this.handleChange.bind(this)}\n                        onFocus={this.handleFocus.bind(this)}\n                        onClick={this.handleInputClick.bind(this)}\n                        checked={this.checked}\n                        class=\"wcs-checkbox\"\n                        type=\"checkbox\"\n                        ref={(el) => (this.nativeInput = el)}\n                        name={this.name}\n                        disabled={this.disabled}\n                        id={this.name}\n                        {...this.inheritedAttributes}\n                    ></input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot onSlotchange={(_) => this.onSlotChange()} />\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"],"version":3}
+{"file":"wcs-checkbox.entry.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=wcs-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-default);\n    --wcs-checkbox-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-checkbox-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-checkbox-border-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-checkbox-border-color-indeterminate: var(--wcs-semantic-color-border-control-indicator-selected);\n\n    --wcs-checkbox-border-radius: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-checkbox-border-width: var(--wcs-semantic-border-width-large);\n\n    --wcs-checkbox-size: calc(2 * var(--wcs-semantic-size-base));\n\n    --wcs-checkbox-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-disabled: var(--wcs-semantic-color-text-tertiary);\n    --wcs-checkbox-text-color-hover: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-selected: var(--wcs-semantic-color-text-primary);\n\n    --wcs-checkbox-text-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-checkbox-text-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-checkbox-background-color-default: transparent;\n    --wcs-checkbox-background-color-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n    --wcs-checkbox-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-checkbox-background-color-indeterminate: var(--wcs-semantic-color-background-control-indicator-selected);\n\n    --wcs-checkbox-outline-radius-focus: var(--wcs-semantic-border-radius-base);\n    --wcs-checkbox-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-checkbox-gap: var(--wcs-semantic-spacing-base);\n    --wcs-checkmark-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-checkmark-height: 0.5rem;\n    --wcs-checkmark-width: 0.1875rem;\n    --wcs-checkmark-border-width: 0.125rem;\n\n    --wcs-indeterminate-bar-width: 0.625rem;\n    --wcs-indeterminate-bar-height: 0.125rem;\n    --wcs-indeterminate-bar-border-radius: 0.0625rem;\n    --wcs-indeterminate-bar-background-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n\n    --wcs-checkbox-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: inline-flex;\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-checkbox-text-color-disabled);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n    }\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n:host([checked]:not([indeterminate][disabled])) {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-selected);\n}\n\n.wcs-checkmark {\n    transition-property: border-color, background-color, color;\n    transition: var(--wcs-checkbox-transition-duration) ease-in-out;\n\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    font-size: var(--wcs-checkbox-text-font-size);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n    user-select: none;\n    display: flex;\n    gap: var(--wcs-checkbox-gap);\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]){\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]){\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]){\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default checkbox */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n.wcs-container:hover:not([aria-disabled]), input:focus {\n    .text {\n        color: var(--wcs-checkbox-text-color-hover);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-hover);\n    }\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n}\n\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n    }\n}\n\n/* Create a custom checkbox */\n.wcs-checkmark {\n    flex: 0 0 var(--wcs-checkbox-size);\n    width: var(--wcs-checkbox-size);\n    height: var(--wcs-checkbox-size);\n    background-color: var(--wcs-checkbox-background-color-default);\n    border: var(--wcs-checkbox-border-width) solid var(--wcs-checkbox-border-color);\n    border-radius: var(--wcs-checkbox-border-radius);\n    box-sizing: border-box;\n}\n\n:host([indeterminate]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-indeterminate);\n        background: var(--wcs-checkbox-background-color-indeterminate);\n    }\n}\n\n:host([indeterminate][disabled]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n        background: var(--wcs-checkbox-background-color-disabled);\n    }\n}\n\n/* When the checkbox is checked, add a blue background */\n.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-selected);\n}\n.wcs-container[aria-disabled] input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-disabled);\n}\n\n/* Create the wcs-checkmark/indicator (hidden when not checked) */\n.wcs-checkmark:after {\n    content: \"\";\n    position: absolute;\n    display: none;\n}\n\n.wcs-checkmark {\n    position: relative;\n}\n\n:host([checked]), :host([indeterminate]) {\n    /* Show the wcs-checkmark when checked */\n    .wcs-container input~.wcs-checkmark:after {\n        display: flex;\n    }\n\n    /* Handle hover when checked/indeterminate */\n    .wcs-container:not([aria-disabled]):hover {\n        .wcs-checkmark {\n            background-color: var(--wcs-checkbox-background-color-hover);\n        }\n    }\n}\n\n:host(:not([indeterminate])) {\n    /* Style the wcs-checkmark/indicator */\n    .wcs-container .wcs-checkmark:after {\n        left: 0.25rem;\n        width: var(--wcs-checkmark-width);\n        height: var(--wcs-checkmark-height);\n        border: solid var(--wcs-checkmark-color, white);\n        border-width: 0 var(--wcs-checkmark-border-width) var(--wcs-checkmark-border-width) 0;\n        -webkit-transform: rotate(45deg);\n        -ms-transform: rotate(45deg);\n        transform: rotate(45deg);\n    }\n}\n\n:host([indeterminate]) {\n    .wcs-container .wcs-checkmark:after {\n        position: absolute;\n        background-color: var(--wcs-indeterminate-bar-background-color);\n        left: calc(50% - (var(--wcs-indeterminate-bar-width) / 2));\n        top: calc(50% - (var(--wcs-indeterminate-bar-height) / 2));\n        width: var(--wcs-indeterminate-bar-width);\n        height: var(--wcs-indeterminate-bar-height);\n        border-radius: var(--wcs-indeterminate-bar-border-radius);\n    }\n}\n\n.wcs-container:not([aria-disabled]) input:not(:checked)~.text {\n    color: var(--wcs-checkbox-text-color-default);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.wcs-container:not([aria-disabled]) input:checked~.text {\n    color: var(--wcs-checkbox-text-color-selected);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.hidden {\n    display: none;\n}\n","import {\n    Component,\n    Prop,\n    Event,\n    EventEmitter,\n    ComponentInterface,\n    h,\n    Host,\n    Method,\n    Element,\n    Listen\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.\n * \n * @cssprop --wcs-checkbox-border-color-default - Default color of the border\n * @cssprop --wcs-checkbox-border-color-hover - Color of the border when hovered\n * @cssprop --wcs-checkbox-border-color-disabled - Color of the border when disabled\n * @cssprop --wcs-checkbox-border-color-selected - Color of the border when selected\n * @cssprop --wcs-checkbox-border-color-indeterminate - Color of the border when indeterminate\n * \n * @cssprop --wcs-checkbox-border-radius - Border radius of the checkbox\n * @cssprop --wcs-checkbox-border-width - Width of the border of the checkbox\n * \n * @cssprop --wcs-checkbox-size - Size of the checkbox\n * \n * @cssprop --wcs-checkbox-text-color-default - Color of the text when the checkbox is not selected\n * @cssprop --wcs-checkbox-text-color-disabled - Color of the text when the checkbox is disabled\n * @cssprop --wcs-checkbox-text-color-hover - Color of the text when the checkbox is hovered\n * @cssprop --wcs-checkbox-text-color-selected - Color of the text when the checkbox is selected\n * \n * @cssprop --wcs-checkbox-text-font-size - Font size of the text\n * @cssprop --wcs-checkbox-text-font-weight - Font weight of the text\n * \n * @cssprop --wcs-checkbox-background-color-default - Default background color of the checkbox\n * @cssprop --wcs-checkbox-background-color-hover - Background color of the checkbox when hovered\n * @cssprop --wcs-checkbox-background-color-disabled - Background color of the checkbox when disabled\n * @cssprop --wcs-checkbox-background-color-selected - Background color of the checkbox when selected\n * @cssprop --wcs-checkbox-background-color-indeterminate - Background color of the checkbox when indeterminate\n * \n * @cssprop --wcs-checkbox-outline-radius-focus - Border radius of the focus outline\n * @cssprop --wcs-checkbox-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-checkbox-gap - Gap between the checkbox and the label\n * @cssprop --wcs-checkmark-color - Color of the checkmark\n * @cssprop --wcs-checkmark-height - Height of the checkmark (From the bottom left to the top right of the checkmark)\n * @cssprop --wcs-checkmark-width - Width of the checkmark (From the bottom right to the top left of the checkmark)\n * @cssprop --wcs-checkmark-border-width - Width of the border of the checkmark\n *\n * @cssprop --wcs-indeterminate-bar-width - Width of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-height - Height of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-border-radius - Border-radius of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-background-color - Color of the indeterminate bar\n * \n * @cssprop --wcs-checkbox-transition-duration - Duration of the transition\n */\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: {\n        delegatesFocus: true,\n    },\n})\nexport class Checkbox implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n    @Element() private el!: HTMLElement;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n\n    @Prop() name = this.checkboxId;\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify whether the checkbox is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    /**\n     * Emitted when the checkbox has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the checkbox loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, CHECKBOX_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.onSlotChange();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    @Method()\n    async getLabel(): Promise<string> {\n        return getSlottedContentText(this.el);\n    }\n\n    handleChange(e: Event) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        this.toggleCheckboxState();\n    }\n    \n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n        \n        this.toggleCheckboxState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleCheckboxState() {\n        if (this.disabled) return;\n        \n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n    \n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    onSlotChange() { \n        const slot = this.el.shadowRoot.querySelector('slot');\n        if (slot) {\n            // TODO: remove when pseudo-class that indicate a slot has content is supported in all major browsers \n            //  (https://github.com/w3c/csswg-drafts/issues/6867)\n            // https://developer.mozilla.org/en-US/docs/Web/CSS/:empty\n            const assignedNodes = slot.assignedNodes();\n            if (assignedNodes.length > 0) {\n                this.el.shadowRoot.querySelector('.text').classList.remove('hidden');\n            } else {\n                this.el.shadowRoot.querySelector('.text').classList.add('hidden');\n            }\n        }\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input\n                        onBlur={this.handleBlur.bind(this)}\n                        onChange={this.handleChange.bind(this)}\n                        onFocus={this.handleFocus.bind(this)}\n                        onClick={this.handleInputClick.bind(this)}\n                        checked={this.checked}\n                        class=\"wcs-checkbox\"\n                        type=\"checkbox\"\n                        ref={(el) => (this.nativeInput = el)}\n                        name={this.name}\n                        disabled={this.disabled}\n                        id={this.name}\n                        {...this.inheritedAttributes}\n                    ></input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot onSlotchange={(_) => this.onSlotChange()} />\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"],"version":3}

package/dist/esm/wcs-com-nav-category.entry.js

@@ -82,9 +82,9 @@ const ComNavCategory = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'f94c0352af2387f55d0d86905c492c14a8bdbc8d', role: "listitem", onClick: evt => this.onClick(evt) }, this.currentActiveSizing === 'mobile' ?
+        return (h(Host, { key: '0b5d69d30228c1585c17d74bf8183f6fe91c1696', role: "listitem", onClick: evt => this.onClick(evt) }, this.currentActiveSizing === 'mobile' ?
             h("h3", { role: "presentation", class: "label-container" }, h("span", { class: "label" }, this.label))
-            : h("button", Object.assign({ class: "label-container", "aria-controls": this.categoryItemsId, "aria-expanded": this.categoryOpen ? 'true' : 'false', ref: (el) => (this.nativeButton = el), onClick: _ => this.categoryOpen = !this.categoryOpen }, this.inheritedAttributes), h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))), h("div", { key: 'd87c57a169663daa987d2031b94f973d88ae82c1', class: "item-container", role: "list", "aria-label": this.label, id: this.categoryItemsId, tabIndex: -1, "data-open": this.categoryOpen, onKeyDown: evt => this.handleCategoryItemsKeyDown(evt), onClick: (evt) => this.handleItemClick(evt) }, h("slot", { key: '27089cf41dfcdc7bd0e5364d41d02e33ba43f731' }))));
+            : h("button", Object.assign({ class: "label-container", "aria-controls": this.categoryItemsId, "aria-expanded": this.categoryOpen ? 'true' : 'false', ref: (el) => (this.nativeButton = el), onClick: _ => this.categoryOpen = !this.categoryOpen }, this.inheritedAttributes), h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))), h("div", { key: '8269a3a8eb304343e6beef3cfde1e20976e02bbb', class: "item-container", role: "list", "aria-label": this.label, id: this.categoryItemsId, tabIndex: -1, "data-open": this.categoryOpen, onKeyDown: evt => this.handleCategoryItemsKeyDown(evt), onClick: (evt) => this.handleItemClick(evt) }, h("slot", { key: '0cd3f5916499f4e14d554e7fe963a2a384c4b39d' }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/wcs-com-nav-item.entry.js

@@ -12,7 +12,7 @@ const ComNavItem = class {
         this.wcsClickOnFinalAction.emit();
     }
     render() {
-        return (h(Host, { key: 'ebafe8ee7fa4dfb839095a00119b1fb60ec9f61f', role: "listitem" }, h("slot", { key: '4dd33801a76cd03665c107afb6a1640f2843d3cd' }), h("span", { key: 'a9fe68e0e7b0e4221ba6b1a6b3e6802876082ce4', class: "arrow-container" }, h("span", { key: 'b0d3aa7fbfb967e7910ea6f446e1dd0489d39265', "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))));
+        return (h(Host, { key: '25690c3eecac76d2b29b0aeda90f5e1bf5fd0b22', role: "listitem" }, h("slot", { key: '236d67ffd9fefb7650d2b67cee685852030adb4b' }), h("span", { key: '2ef478d77dc28d169817500145c8d9df525bd439', class: "arrow-container" }, h("span", { key: '0fafbba11e817663ad7e18ff6947cdbd07494f69', "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))));
     }
 };
 ComNavItem.style = WcsComNavItemStyle0;

package/dist/esm/wcs-com-nav-submenu.entry.js

@@ -104,9 +104,9 @@ const ComNavSubmenu = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '0da088c42404db11beb214d4a16c8526771e3e2a', onClick: evt => this.onClick(evt), role: "listitem", "data-open": this.menuOpen }, this.currentActiveSizing === 'mobile' ?
+        return (h(Host, { key: '935e78a3daf751160c21e7375e86be186bcfdec9', onClick: evt => this.onClick(evt), role: "listitem", "data-open": this.menuOpen }, this.currentActiveSizing === 'mobile' ?
             h("h2", { role: "presentation", class: "menu-button" }, h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { class: "arrow-icon", "data-open": this.menuOpen }, "\uF107")))
-            : h("button", Object.assign({ onClick: _ => this.menuOpen = !this.menuOpen, "aria-expanded": this.menuOpen ? 'true' : 'false', "aria-controls": this.menuItemsId, class: "menu-button", ref: (el) => (this.nativeButton = el) }, this.inheritedAttributes), h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { "aria-hidden": "true", class: "arrow-icon", "data-open": this.menuOpen }, "\uF107"))), h("div", { key: 'de27fc80404612471d359ff1eafd4958f78679c7', class: "drawer", "data-open": this.menuOpen, tabIndex: -1 }, h("div", { key: '7d90bef599ee51aa5af9d4bd1a6dc9a62a959b2f', class: "drawer-container" }, h("div", { key: '4a8896393732017a6084be1df1af5e4d938326d7', class: "drawer-content" }, h("div", { key: '92559e9ba3f21ddce21aa4c5d84de33aa8c7b59c', class: "drawer-description" }, h("h3", { key: 'a8b4f0865ab5ac5396669372c32020feea08c37a' }, this.panelTitle), h("p", { key: 'f2f778c761bf171204eb4fda3b376bdd92724b73' }, this.panelDescription)), h("div", { key: '640e6d45453c46469116a0f2d34e9bdaa2d9372f', role: "list", "aria-label": this.label, id: this.menuItemsId, class: "menu-items", onClick: (evt) => this.handleMenuItemsClick(evt), onKeyDown: evt => this.handleMenuItemsKeyDown(evt) }, h("slot", { key: '92e67731f2da01db2852a49b7ff255d384881157' })))))));
+            : h("button", Object.assign({ onClick: _ => this.menuOpen = !this.menuOpen, "aria-expanded": this.menuOpen ? 'true' : 'false', "aria-controls": this.menuItemsId, class: "menu-button", ref: (el) => (this.nativeButton = el) }, this.inheritedAttributes), h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { "aria-hidden": "true", class: "arrow-icon", "data-open": this.menuOpen }, "\uF107"))), h("div", { key: '1e654c7f9a74f3e6bb92e9cd3589ea3b7ee9ed99', class: "drawer", "data-open": this.menuOpen, tabIndex: -1 }, h("div", { key: '1c2d8a56d7e91071fcb43f537173850ecf62fb28', class: "drawer-container" }, h("div", { key: '4880e09bcf8e06464db2984ac43dbd01ee9a0af3', class: "drawer-content" }, h("div", { key: 'd2e6e97442a73ff8d24ba4165587fd544b2ff853', class: "drawer-description" }, h("h3", { key: '04b20b11befc1dc63e719fda8dda51fe248e93cd' }, this.panelTitle), h("p", { key: '69810728510063a77b97845d91f684fe2abfa347' }, this.panelDescription)), h("div", { key: 'ed35406cc3a5ced0155181239dc96b4afcaa2871', role: "list", "aria-label": this.label, id: this.menuItemsId, class: "menu-items", onClick: (evt) => this.handleMenuItemsClick(evt), onKeyDown: evt => this.handleMenuItemsKeyDown(evt) }, h("slot", { key: '3059b3ccbef8b9483e05e4d400b1643d9ab23273' })))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/wcs-com-nav.entry.js

@@ -53,11 +53,11 @@ const ComNav = class {
     }
     render() {
         const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;
-        return (h(Host, { key: '85451701261dc64faebd405a0186b857d1881655' }, h("div", { key: '84e33d688f36901ee1608b765c3c20c26d099f83', class: "container" }, h("div", { key: 'f8fe43fcf24ce46ad57d010a46bb19ebbea8175c', class: "container-left" }, h("div", { key: '246da8710a8b10e52753a865b1345ce8a9d6f0e9', class: "app-name" }, this.appName, h("slot", { key: '0c6ad2ea30db8cc6ae51ec44d4f6e253b7cca850', name: "app-name" })), this.currentActiveSizing === 'desktop' ?
+        return (h(Host, { key: 'b39ff3dbd6d304ad0252e0fcfd2e0c5716b666db' }, h("div", { key: 'f84b73c9cee6295a7776576afeb61b65b71ea34e', class: "container" }, h("div", { key: 'a39b867e9d102abb4e4c13503a544681cd9b7fd8', class: "container-left" }, h("div", { key: '49db5dd80f097a9b2ccaf39fc64be9f6100108be', class: "app-name" }, this.appName, h("slot", { key: '2936888d5a805c67a3be4079a7eea62d460d42fe', name: "app-name" })), this.currentActiveSizing === 'desktop' ?
             h("nav", Object.assign({ role: "navigation" }, this.inheritedAttributes), h("div", { class: "menu-bar", role: "list" }, this.currentActiveSizing === 'desktop'
                 ? h("slot", null)
                 : null))
-            : null), h("div", { key: '34e2eb03491479f033a891d1f2bf46814e45057c', class: "container-right" }, h("slot", { key: '18bd4464e1ce6725f63d152dba5ddff4a73e48cf', name: "actions" }), this.currentActiveSizing === 'mobile' ?
+            : null), h("div", { key: 'c2c97d21d21d542a18fb141f90ce7ce91d0b12c0', class: "container-right" }, h("slot", { key: '51912b232ac4d51baf1d2c164e90ab59a787924e', name: "actions" }), this.currentActiveSizing === 'mobile' ?
             h("nav", Object.assign({ id: "wcs-com-nav-mobile-menu", role: "navigation" }, this.inheritedAttributes), h("button", { id: "mobile-menu-icon", "aria-label": menuAriaLabel, "aria-expanded": this.mobileMenuOpen ? "true" : "false", "aria-controls": "wcs-com-nav-mobile-menu", onClick: () => this.mobileMenuIconClick() }), this.currentActiveSizing === 'mobile'
                 ? h("div", { class: "mobile-overlay", "data-mobile-open": this.mobileMenuOpen, role: "list" }, h("slot", null))
                 : null)

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

@@ -1,13 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d9de61ce.js';
 import { i as inheritAriaAttributes, a as inheritAttributes, p as parseCssTimeValueToMilliseconds, s as setOrRemoveAttribute, e as isKeyup, f as isKeydown, h as isHomeKey, j as isEndKey } from './helpers-ece6a2d3.js';
 
-const WcsCounterSizeValues = ['m', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
-function isWcsCounterSize(size) {
-    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues
-    return WcsCounterSizeValues.includes(size);
-}
-
-const counterCss = "@keyframes spin-animation-up{0%{transform:translateY(0);transform-origin:center;opacity:1}50%{opacity:0.5}100%{transform:translateY(30px);transform-origin:center;opacity:1}}@keyframes spin-animation-down{0%{transform:translateY(0);transform-origin:center;opacity:1}50%{opacity:0.5}100%{transform:translateY(-30px);transform-origin:center;opacity:1}}:host{--wcs-counter-border-radius:var(--wcs-semantic-border-radius-full);--wcs-counter-value-color-default:var(--wcs-semantic-color-text-primary);--wcs-counter-value-color-disabled:var(--wcs-semantic-color-text-tertiary);--wcs-counter-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-counter-height-m:var(--wcs-semantic-size-m);--wcs-counter-height-l:var(--wcs-semantic-size-l);--wcs-counter-font-size-m:var(--wcs-semantic-font-size-m);--wcs-counter-font-size-l:var(--wcs-semantic-font-size-l);--wcs-counter-padding-m:var(--wcs-semantic-spacing-small);--wcs-counter-padding-l:var(--wcs-semantic-spacing-base);--wcs-counter-background-color:var(--wcs-semantic-color-background-surface-secondary);--wcs-counter-gap:var(--wcs-counter-gap-size-m);--wcs-counter-gap-size-m:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-counter-gap-size-l:calc(2 * var(--wcs-semantic-spacing-base));--wcs-counter-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-counter-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:flex}:host .counter{box-sizing:border-box;height:var(--wcs-counter-height);font-family:var(--wcs-font-sans-serif);font-size:var(--wcs-counter-font-size);font-weight:var(--wcs-counter-font-weight);color:var(--wcs-counter-value-color-default);display:flex;align-items:center;padding:var(--wcs-counter-padding);width:fit-content;overflow:hidden;border-radius:var(--wcs-counter-border-radius);background-color:var(--wcs-counter-background-color);background-clip:padding-box;gap:var(--wcs-counter-gap)}:host .counter:focus-within{outline:none}:host .counter:has(.current-value:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);outline-offset:0;border-radius:var(--wcs-counter-border-radius)}@supports not selector(&:has(.current-value:focus-visible)){:host .counter:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);outline-offset:0;border-radius:var(--wcs-counter-border-radius)}}:host .counter-container{height:var(--wcs-counter-height);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}:host .outliers{position:absolute}:host #outlier-down{top:calc(var(--wcs-counter-height) / 2 * -1)}:host #outlier-up{bottom:calc(var(--wcs-counter-height) / 2 * -1)}:host .current-value{outline:none}:host .animate-up{animation:spin-animation-up var(--wcs-counter-transition-duration) ease-in-out}:host .animate-down{animation:spin-animation-down var(--wcs-counter-transition-duration) ease-in-out}:host [hidden]{opacity:0}:host([size=m]){--wcs-counter-padding:var(--wcs-counter-padding-m);--wcs-counter-height:var(--wcs-counter-height-m);--wcs-counter-font-size:var(--wcs-counter-font-size-m);--wcs-counter-gap:var(--wcs-counter-gap-size-m)}:host([size=l]){--wcs-counter-padding:var(--wcs-counter-padding-l);--wcs-counter-height:var(--wcs-counter-height-l);--wcs-counter-font-size:var(--wcs-counter-font-size-l);--wcs-counter-gap:var(--wcs-counter-gap-size-l)}:host([disabled]){cursor:not-allowed}:host([disabled]) .counter{color:var(--wcs-counter-value-color-disabled)}";
+const counterCss = "@keyframes spin-animation-up{0%{transform:translateY(0);transform-origin:center;opacity:1}50%{opacity:0.5}100%{transform:translateY(30px);transform-origin:center;opacity:1}}@keyframes spin-animation-down{0%{transform:translateY(0);transform-origin:center;opacity:1}50%{opacity:0.5}100%{transform:translateY(-30px);transform-origin:center;opacity:1}}:host{--wcs-counter-border-radius:var(--wcs-semantic-border-radius-full);--wcs-counter-value-color-default:var(--wcs-semantic-color-text-primary);--wcs-counter-value-color-disabled:var(--wcs-semantic-color-text-tertiary);--wcs-counter-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-counter-height-m:var(--wcs-semantic-size-m);--wcs-counter-height-l:var(--wcs-semantic-size-l);--wcs-counter-font-size-m:var(--wcs-semantic-font-size-m);--wcs-counter-font-size-l:var(--wcs-semantic-font-size-l);--wcs-counter-padding-m:var(--wcs-semantic-spacing-small);--wcs-counter-padding-l:var(--wcs-semantic-spacing-base);--wcs-counter-background-color:var(--wcs-semantic-color-background-surface-secondary);--wcs-counter-gap-size-m:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-counter-gap-size-l:calc(2 * var(--wcs-semantic-spacing-base));--wcs-counter-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-counter-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-counter-padding:var(--wcs-counter-padding-m);--wcs-counter-height:var(--wcs-counter-height-m);--wcs-counter-font-size:var(--wcs-counter-font-size-m);--wcs-counter-gap:var(--wcs-counter-gap-size-m);display:flex}:host .counter{box-sizing:border-box;height:var(--wcs-counter-height);font-family:var(--wcs-font-sans-serif);font-size:var(--wcs-counter-font-size);font-weight:var(--wcs-counter-font-weight);color:var(--wcs-counter-value-color-default);display:flex;align-items:center;padding:var(--wcs-counter-padding);width:fit-content;overflow:hidden;border-radius:var(--wcs-counter-border-radius);background-color:var(--wcs-counter-background-color);background-clip:padding-box;gap:var(--wcs-counter-gap)}:host .counter:focus-within{outline:none}:host .counter:has(.current-value:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);outline-offset:0;border-radius:var(--wcs-counter-border-radius)}@supports not selector(&:has(.current-value:focus-visible)){:host .counter:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);outline-offset:0;border-radius:var(--wcs-counter-border-radius)}}:host .counter-container{height:var(--wcs-counter-height);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}:host .outliers{position:absolute}:host #outlier-down{top:calc(var(--wcs-counter-height) / 2 * -1)}:host #outlier-up{bottom:calc(var(--wcs-counter-height) / 2 * -1)}:host .current-value{outline:none}:host .animate-up{animation:spin-animation-up var(--wcs-counter-transition-duration) ease-in-out}:host .animate-down{animation:spin-animation-down var(--wcs-counter-transition-duration) ease-in-out}:host [hidden]{opacity:0}:host([size=m]){--wcs-counter-padding:var(--wcs-counter-padding-m);--wcs-counter-height:var(--wcs-counter-height-m);--wcs-counter-font-size:var(--wcs-counter-font-size-m);--wcs-counter-gap:var(--wcs-counter-gap-size-m)}:host([size=l]){--wcs-counter-padding:var(--wcs-counter-padding-l);--wcs-counter-height:var(--wcs-counter-height-l);--wcs-counter-font-size:var(--wcs-counter-font-size-l);--wcs-counter-gap:var(--wcs-counter-gap-size-l)}:host([disabled]){cursor:not-allowed}:host([disabled]) .counter{color:var(--wcs-counter-value-color-disabled)}";
 const WcsCounterStyle0 = counterCss;
 
 const COUNTER_INHERITED_ATTRS = ['tabindex', 'title'];
@@ -77,10 +71,6 @@ const Counter = class {
     }
     componentWillLoad() {
         this.handleValueChange();
-        if (!isWcsCounterSize(this.size)) {
-            console.warn(`Invalid size value for wcs-counter : "${this.size}". Must be one of "${WcsCounterSizeValues.join(', ')}"`);
-            this.size = "m"; // Default fallback value
-        }
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, COUNTER_INHERITED_ATTRS));
     }
     componentDidRender() {
@@ -156,7 +146,7 @@ const Counter = class {
         });
     }
     render() {
-        return (h(Host, { key: 'a957d407947a81ebdc48dde3977ab2b2a19006ad' }, h("div", { key: 'dbc569a37c06b78b6e2dabb87731db62590b347f', class: "counter" }, h("wcs-button", { key: 'c7a9f3e34ac9907789a4218fc44b34698a5897e9', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.min }, h("wcs-mat-icon", { key: 'd6467a23f871a6beab70aff5d7c333c544eb9913', icon: "remove", size: "s" })), h("div", { key: '2a1fd878363e0667b2f14a5d767a0367aa6b7149', class: "counter-container", ref: input => this.counterContainer = input }, h("span", { key: '7741dec6872c3c1ba72b0191cb081b41cb43e303', id: "outlier-down", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue - this.step), h("span", Object.assign({ key: '20e00232af8397a0fc042f6570d4c1d74fd14bb5', tabindex: this.disabled ? -1 : 0, role: "spinbutton", ref: (el) => this.spinButton = el, class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-disabled": this.disabled ? 'true' : null, "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.inheritedAttributes), this.displayedValue), h("span", { key: '2794cbc223820ec7bd6fa055aed3ba6fe92fc319', id: "outlier-up", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue + this.step)), h("wcs-button", { key: 'cbce7b7dba69d9c0546152e6b283fd85f389e7fc', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.max }, h("wcs-mat-icon", { key: 'af515fae89b19516f9706f1582a77b9daababb3b', icon: "add", size: "s" })))));
+        return (h(Host, { key: '6f1d46e231cc1f88a92a2faa0122e1ed7b9dd834' }, h("div", { key: 'c3ed2c944c2a8f61ab862411b1d503a84ac37ae4', class: "counter" }, h("wcs-button", { key: 'c0d0d41e07a99ef0730b22d029529e629ff2f8d3', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.min }, h("wcs-mat-icon", { key: '5003db6a007f8ede51d567a76ea18160fdb60949', icon: "remove", size: "s" })), h("div", { key: 'ae3b0ca61a95fe908583df73748b7e7d19242fd0', class: "counter-container", ref: input => this.counterContainer = input }, h("span", { key: '499a0d0ff7f38fcae6664b118991aeb39f5d6034', id: "outlier-down", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue - this.step), h("span", Object.assign({ key: '62cab421b796106f0b2957e4d8445266bd6ba754', tabindex: this.disabled ? -1 : 0, role: "spinbutton", ref: (el) => this.spinButton = el, class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-disabled": this.disabled ? 'true' : null, "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.inheritedAttributes), this.displayedValue), h("span", { key: '339b6949d2b64262085f7bda19897f9533166cb4', id: "outlier-up", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue + this.step)), h("wcs-button", { key: 'ee77cee6c9d08225c1844d1c4703ea6868c054da', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.max }, h("wcs-mat-icon", { key: 'b1b6cc395186ee871801d47ad2b9b62791f64b29', icon: "add", size: "s" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

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

@@ -1 +1 @@
-{"file":"wcs-counter.entry.js","mappings":"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","names":[],"sources":["src/components/counter/counter-interface.ts","src/components/counter/counter.scss?tag=wcs-counter&encapsulation=shadow","src/components/counter/counter.tsx"],"sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface CounterChangeEventDetail {\n    value: number;\n}\n\nexport const WcsCounterSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsCounterSize = Extract<WcsSize, typeof WcsCounterSizeValues[number]>;\n\nexport function isWcsCounterSize(size: string): size is WcsCounterSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsCounterSizeValues.includes(size);\n}\n","@import '../../style/focus-outline.scss';\n\n@keyframes spin-animation-up {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n@keyframes spin-animation-down {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(-30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n:host {\n    --wcs-counter-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-counter-value-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-counter-value-color-disabled: var(--wcs-semantic-color-text-tertiary);\n    --wcs-counter-font-weight: var(--wcs-semantic-font-weight-heavy);\n\n    --wcs-counter-height-m: var(--wcs-semantic-size-m);\n    --wcs-counter-height-l: var(--wcs-semantic-size-l);\n    --wcs-counter-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-counter-font-size-l: var(--wcs-semantic-font-size-l);\n    --wcs-counter-padding-m: var(--wcs-semantic-spacing-small);\n    --wcs-counter-padding-l: var(--wcs-semantic-spacing-base);\n\n    --wcs-counter-background-color: var(--wcs-semantic-color-background-surface-secondary);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-m);\n    --wcs-counter-gap-size-m: calc(1.5 * var(--wcs-semantic-spacing-base));\n    --wcs-counter-gap-size-l: calc(2 * var(--wcs-semantic-spacing-base));\n    --wcs-counter-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-counter-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: flex;\n\n\n    .counter {\n        box-sizing: border-box;\n        height: var(--wcs-counter-height);\n        font-family: var(--wcs-font-sans-serif);\n        font-size: var(--wcs-counter-font-size);\n        font-weight: var(--wcs-counter-font-weight);\n        color: var(--wcs-counter-value-color-default);\n        display: flex;\n        align-items: center;\n        padding: var(--wcs-counter-padding);\n        width: fit-content;\n        overflow: hidden;\n        border-radius: var(--wcs-counter-border-radius);\n        background-color: var(--wcs-counter-background-color);\n        background-clip: padding-box;\n        gap: var(--wcs-counter-gap);\n\n        &:focus-within {\n            outline: none;\n        }\n\n        &:has(.current-value:focus-visible) {\n            @include focus-outline($outline-color: var(--wcs-counter-outline-color-focus), $border-radius: var(--wcs-counter-border-radius), $outline-offset: 0);\n        }\n\n        @supports not selector(&:has(.current-value:focus-visible)){\n            &:focus-within {\n                @include focus-outline($outline-color: var(--wcs-counter-outline-color-focus), $border-radius: var(--wcs-counter-border-radius), $outline-offset: 0);\n            }\n        }\n    }\n\n    .counter-container {\n        height: var(--wcs-counter-height);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n    }\n\n    .outliers {\n        position: absolute;\n    }\n\n    #outlier-down {\n        top: calc((var(--wcs-counter-height) / 2) * -1);\n    }\n\n    #outlier-up {\n        bottom: calc((var(--wcs-counter-height) / 2) * -1);\n    }\n\n    .current-value {\n        outline: none;\n    }\n\n    .animate-up {\n        animation: spin-animation-up var(--wcs-counter-transition-duration) ease-in-out;\n    }\n\n    .animate-down {\n        animation: spin-animation-down var(--wcs-counter-transition-duration) ease-in-out;\n    }\n\n    [hidden] {\n        opacity: 0;\n    }\n}\n\n:host([size='m']) { // Default\n    --wcs-counter-padding: var(--wcs-counter-padding-m);\n    --wcs-counter-height: var(--wcs-counter-height-m);\n    --wcs-counter-font-size: var(--wcs-counter-font-size-m);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-m);\n}\n\n:host([size='l']) {\n    --wcs-counter-padding: var(--wcs-counter-padding-l);\n    --wcs-counter-height: var(--wcs-counter-height-l);\n    --wcs-counter-font-size: var(--wcs-counter-font-size-l);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-l);\n}\n\n:host([disabled]) {\n    cursor: not-allowed;\n\n    .counter {\n        color: var(--wcs-counter-value-color-disabled);\n    }\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEndKey,\n    isHomeKey,\n    isKeydown,\n    isKeyup,\n    parseCssTimeValueToMilliseconds,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { CounterChangeEventDetail, isWcsCounterSize, WcsCounterSize, WcsCounterSizeValues } from './counter-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst COUNTER_INHERITED_ATTRS = ['tabindex', 'title'];\n\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n * \n * @cssprop --wcs-counter-border-radius - Border radius of the counter\n * \n * @cssprop --wcs-counter-value-color-default - Default color of the value \n * @cssprop --wcs-counter-value-color-disabled - Color of the text when the counter is disabled\n * @cssprop --wcs-counter-font-weight - Font weight of the value\n * \n * @cssprop --wcs-counter-height-m - Height medium of the counter\n * @cssprop --wcs-counter-height-l - Height large of the counter\n * @cssprop --wcs-counter-font-size-m - Font size medium of the counter\n * @cssprop --wcs-counter-font-size-l - Font size large of the counter\n * @cssprop --wcs-counter-padding-m - Padding medium of the counter\n * @cssprop --wcs-counter-padding-l - Padding large of the counter\n * \n * @cssprop --wcs-counter-background-color - Background color of the counter\n * @cssprop --wcs-counter-gap - Gap between the buttons and the label\n * @cssprop --wcs-counter-gap-size-m - Gap between the buttons and the label when the size is M\n * @cssprop --wcs-counter-gap-size-l - Gap between the buttons and the label when the size is L\n * @cssprop --wcs-counter-outline-color-focus - Color of the focus outline\n *\n * @cssprop --wcs-counter-transition-duration - Duration of the animation\n * \n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Counter implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private spinButton!: HTMLSpanElement;\n    private counterContainer!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Default animation duration, in milliseconds\n     * @private\n     */\n    private ANIMATION_DURATION = 150;\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * Specify whether the counter is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * The current value of the counter.\n     */\n    @Prop({mutable: true}) value!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    private animateRunning = false;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.handleValueChange();\n\n        if (!isWcsCounterSize(this.size)) {\n            console.warn(`Invalid size value for wcs-counter : \"${this.size}\". Must be one of \"${WcsCounterSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COUNTER_INHERITED_ATTRS),\n        };\n    }\n    \n    componentDidRender() {\n        this.ANIMATION_DURATION = parseCssTimeValueToMilliseconds(window.getComputedStyle(this.el).getPropertyValue('--wcs-counter-transition-duration') ?? '150ms') ?? 150;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.spinButton, attr, value);\n    }\n    \n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('value')\n    valueChange(newVal: any, oldVal: any) {\n        if(oldVal === newVal) return;\n\n        this.handleValueChange();\n    }\n\n    private handleValueChange() {\n        this.setMinimumIfValueIsUndefinedOrNull();\n        this.ensureValueIsNotOutOfMinMax();\n        this.updateDisplayValueIfNoAnimationRunning();\n    }\n\n    private updateDisplayValueIfNoAnimationRunning() {\n        if (!this.animateRunning) {\n            this.displayedValue = this.value;\n        }\n    }\n\n    private ensureValueIsNotOutOfMinMax() {\n        if (this.max !== undefined && this.value > this.max) {\n            this.value = this.max;\n        } else if (this.min !== undefined && this.value < this.min) {\n            this.value = this.min;\n        }\n    }\n\n    private setMinimumIfValueIsUndefinedOrNull() {\n        if (this.value === undefined || this.value === null) {\n            this.value = this.min ?? 0;\n        }\n    }\n\n    onKeyDown(_event: KeyboardEvent) {\n        if (this.disabled) return; \n        \n        if (isKeyup(_event)) {\n            _event.preventDefault();\n            this.handleIncrement()\n        }\n        if (isKeydown(_event)) {\n            _event.preventDefault();\n            this.handleDecrement()\n        }\n        if (isHomeKey(_event)) {\n            _event.preventDefault();\n            if (this.min != null) {\n                this.value = this.min;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            if (this.max != null) {\n                this.value = this.max;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n    }\n\n    private notifyChange() {\n        this.wcsChange.emit({\n            value: this.value\n        });\n    }\n    \n    private handleDecrement = () => {\n        if (this.disabled) return;\n        if (this.min === undefined || this.value > this.min) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value -= this.step;\n            this.notifyChange();\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.disabled) return;\n        if (this.max === undefined || this.value < this.max) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value += this.step;\n            this.notifyChange();\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down'): void => {\n        // In case someone call animate function, we want ensured that animateRunning is set to true to prevent other \n        // method to mutate the displayedValue.\n        this.animateRunning = true;  \n\n        const outliers = Array.from(this.counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        this.counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.hidden = false;\n        });\n        setTimeout(() => {\n            this.counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.hidden = true;\n            });\n            this.displayedValue = this.value;\n\n            this.animateRunning = false;\n        }, this.ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"counter\">\n                    <wcs-button class=\"wcs-primary\"\n                                shape=\"round\"\n                                size=\"s\"\n                                tabindex={-1}\n                                onClick={() => this.handleDecrement()}\n                                onBlur={(event) => this.wcsBlur.emit(event)}\n                                disabled={this.disabled || this.value === this.min}>\n                        <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>  \n                    </wcs-button>\n                    <div class=\"counter-container\" ref={input => this.counterContainer = input}>\n                        <span id=\"outlier-down\"\n                              class=\"outliers\"\n                              hidden\n                              aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                        <span tabindex={this.disabled ? -1 : 0}\n                              role=\"spinbutton\"\n                              ref={(el) => this.spinButton = el}\n                              class=\"current-value\"\n                              onBlur={(event) => this.wcsBlur.emit(event)}\n                              onKeyDown={(event) => this.onKeyDown(event)}\n                              aria-disabled={this.disabled ? 'true' : null}\n                              aria-valuenow={this.value}\n                              aria-valuetext={this.value}\n                              aria-valuemin={this.min}\n                              aria-valuemax={this.max}\n                              aria-label={this.label}\n                              {...this.inheritedAttributes}>{this.displayedValue}</span>\n                        <span id=\"outlier-up\"\n                              class=\"outliers\"\n                              hidden\n                              aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                    </div>\n                    <wcs-button class=\"wcs-primary\"\n                                shape=\"round\"\n                                size=\"s\"\n                                tabindex={-1}\n                                onClick={() => this.handleIncrement()}\n                                onBlur={(event) => this.wcsBlur.emit(event)}\n                                disabled={this.disabled || this.value === this.max}>\n                        <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                    </wcs-button>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-counter.entry.js","mappings":"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","names":[],"sources":["src/components/counter/counter.scss?tag=wcs-counter&encapsulation=shadow","src/components/counter/counter.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n@keyframes spin-animation-up {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n@keyframes spin-animation-down {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(-30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n:host {\n    --wcs-counter-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-counter-value-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-counter-value-color-disabled: var(--wcs-semantic-color-text-tertiary);\n    --wcs-counter-font-weight: var(--wcs-semantic-font-weight-heavy);\n\n    --wcs-counter-height-m: var(--wcs-semantic-size-m);\n    --wcs-counter-height-l: var(--wcs-semantic-size-l);\n    --wcs-counter-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-counter-font-size-l: var(--wcs-semantic-font-size-l);\n    --wcs-counter-padding-m: var(--wcs-semantic-spacing-small);\n    --wcs-counter-padding-l: var(--wcs-semantic-spacing-base);\n\n    --wcs-counter-background-color: var(--wcs-semantic-color-background-surface-secondary);\n    --wcs-counter-gap-size-m: calc(1.5 * var(--wcs-semantic-spacing-base));\n    --wcs-counter-gap-size-l: calc(2 * var(--wcs-semantic-spacing-base));\n    --wcs-counter-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-counter-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    // Default\n    --wcs-counter-padding: var(--wcs-counter-padding-m);\n    --wcs-counter-height: var(--wcs-counter-height-m);\n    --wcs-counter-font-size: var(--wcs-counter-font-size-m);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-m);\n\n    display: flex;\n\n\n    .counter {\n        box-sizing: border-box;\n        height: var(--wcs-counter-height);\n        font-family: var(--wcs-font-sans-serif);\n        font-size: var(--wcs-counter-font-size);\n        font-weight: var(--wcs-counter-font-weight);\n        color: var(--wcs-counter-value-color-default);\n        display: flex;\n        align-items: center;\n        padding: var(--wcs-counter-padding);\n        width: fit-content;\n        overflow: hidden;\n        border-radius: var(--wcs-counter-border-radius);\n        background-color: var(--wcs-counter-background-color);\n        background-clip: padding-box;\n        gap: var(--wcs-counter-gap);\n\n        &:focus-within {\n            outline: none;\n        }\n\n        &:has(.current-value:focus-visible) {\n            @include focus-outline($outline-color: var(--wcs-counter-outline-color-focus), $border-radius: var(--wcs-counter-border-radius), $outline-offset: 0);\n        }\n\n        @supports not selector(&:has(.current-value:focus-visible)){\n            &:focus-within {\n                @include focus-outline($outline-color: var(--wcs-counter-outline-color-focus), $border-radius: var(--wcs-counter-border-radius), $outline-offset: 0);\n            }\n        }\n    }\n\n    .counter-container {\n        height: var(--wcs-counter-height);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n    }\n\n    .outliers {\n        position: absolute;\n    }\n\n    #outlier-down {\n        top: calc((var(--wcs-counter-height) / 2) * -1);\n    }\n\n    #outlier-up {\n        bottom: calc((var(--wcs-counter-height) / 2) * -1);\n    }\n\n    .current-value {\n        outline: none;\n    }\n\n    .animate-up {\n        animation: spin-animation-up var(--wcs-counter-transition-duration) ease-in-out;\n    }\n\n    .animate-down {\n        animation: spin-animation-down var(--wcs-counter-transition-duration) ease-in-out;\n    }\n\n    [hidden] {\n        opacity: 0;\n    }\n}\n\n:host([size='m']) { // Default\n    --wcs-counter-padding: var(--wcs-counter-padding-m);\n    --wcs-counter-height: var(--wcs-counter-height-m);\n    --wcs-counter-font-size: var(--wcs-counter-font-size-m);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-m);\n}\n\n:host([size='l']) {\n    --wcs-counter-padding: var(--wcs-counter-padding-l);\n    --wcs-counter-height: var(--wcs-counter-height-l);\n    --wcs-counter-font-size: var(--wcs-counter-font-size-l);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-l);\n}\n\n:host([disabled]) {\n    cursor: not-allowed;\n\n    .counter {\n        color: var(--wcs-counter-value-color-disabled);\n    }\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEndKey,\n    isHomeKey,\n    isKeydown,\n    isKeyup,\n    parseCssTimeValueToMilliseconds,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { CounterChangeEventDetail, WcsCounterSize } from './counter-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst COUNTER_INHERITED_ATTRS = ['tabindex', 'title'];\n\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n * \n * @cssprop --wcs-counter-border-radius - Border radius of the counter\n * \n * @cssprop --wcs-counter-value-color-default - Default color of the value \n * @cssprop --wcs-counter-value-color-disabled - Color of the text when the counter is disabled\n * @cssprop --wcs-counter-font-weight - Font weight of the value\n * \n * @cssprop --wcs-counter-height-m - Height medium of the counter\n * @cssprop --wcs-counter-height-l - Height large of the counter\n * @cssprop --wcs-counter-font-size-m - Font size medium of the counter\n * @cssprop --wcs-counter-font-size-l - Font size large of the counter\n * @cssprop --wcs-counter-padding-m - Padding medium of the counter\n * @cssprop --wcs-counter-padding-l - Padding large of the counter\n * \n * @cssprop --wcs-counter-background-color - Background color of the counter\n * @cssprop --wcs-counter-gap - Gap between the buttons and the label\n * @cssprop --wcs-counter-gap-size-m - Gap between the buttons and the label when the size is M\n * @cssprop --wcs-counter-gap-size-l - Gap between the buttons and the label when the size is L\n * @cssprop --wcs-counter-outline-color-focus - Color of the focus outline\n *\n * @cssprop --wcs-counter-transition-duration - Duration of the animation\n * \n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Counter implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private spinButton!: HTMLSpanElement;\n    private counterContainer!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Default animation duration, in milliseconds\n     * @private\n     */\n    private ANIMATION_DURATION = 150;\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * Specify whether the counter is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * The current value of the counter.\n     */\n    @Prop({mutable: true}) value!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    private animateRunning: boolean = false;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.handleValueChange();\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COUNTER_INHERITED_ATTRS),\n        };\n    }\n    \n    componentDidRender() {\n        this.ANIMATION_DURATION = parseCssTimeValueToMilliseconds(window.getComputedStyle(this.el).getPropertyValue('--wcs-counter-transition-duration') ?? '150ms') ?? 150;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.spinButton, attr, value);\n    }\n    \n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('value')\n    valueChange(newVal: any, oldVal: any) {\n        if(oldVal === newVal) return;\n\n        this.handleValueChange();\n    }\n\n    private handleValueChange() {\n        this.setMinimumIfValueIsUndefinedOrNull();\n        this.ensureValueIsNotOutOfMinMax();\n        this.updateDisplayValueIfNoAnimationRunning();\n    }\n\n    private updateDisplayValueIfNoAnimationRunning() {\n        if (!this.animateRunning) {\n            this.displayedValue = this.value;\n        }\n    }\n\n    private ensureValueIsNotOutOfMinMax() {\n        if (this.max !== undefined && this.value > this.max) {\n            this.value = this.max;\n        } else if (this.min !== undefined && this.value < this.min) {\n            this.value = this.min;\n        }\n    }\n\n    private setMinimumIfValueIsUndefinedOrNull() {\n        if (this.value === undefined || this.value === null) {\n            this.value = this.min ?? 0;\n        }\n    }\n\n    onKeyDown(_event: KeyboardEvent) {\n        if (this.disabled) return; \n        \n        if (isKeyup(_event)) {\n            _event.preventDefault();\n            this.handleIncrement()\n        }\n        if (isKeydown(_event)) {\n            _event.preventDefault();\n            this.handleDecrement()\n        }\n        if (isHomeKey(_event)) {\n            _event.preventDefault();\n            if (this.min != null) {\n                this.value = this.min;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            if (this.max != null) {\n                this.value = this.max;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n    }\n\n    private notifyChange() {\n        this.wcsChange.emit({\n            value: this.value\n        });\n    }\n    \n    private handleDecrement = () => {\n        if (this.disabled) return;\n        if (this.min === undefined || this.value > this.min) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value -= this.step;\n            this.notifyChange();\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.disabled) return;\n        if (this.max === undefined || this.value < this.max) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value += this.step;\n            this.notifyChange();\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down'): void => {\n        // In case someone call animate function, we want ensured that animateRunning is set to true to prevent other \n        // method to mutate the displayedValue.\n        this.animateRunning = true;  \n\n        const outliers = Array.from(this.counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        this.counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.hidden = false;\n        });\n        setTimeout(() => {\n            this.counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.hidden = true;\n            });\n            this.displayedValue = this.value;\n\n            this.animateRunning = false;\n        }, this.ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"counter\">\n                    <wcs-button class=\"wcs-primary\"\n                                shape=\"round\"\n                                size=\"s\"\n                                tabindex={-1}\n                                onClick={() => this.handleDecrement()}\n                                onBlur={(event) => this.wcsBlur.emit(event)}\n                                disabled={this.disabled || this.value === this.min}>\n                        <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>  \n                    </wcs-button>\n                    <div class=\"counter-container\" ref={input => this.counterContainer = input}>\n                        <span id=\"outlier-down\"\n                              class=\"outliers\"\n                              hidden\n                              aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                        <span tabindex={this.disabled ? -1 : 0}\n                              role=\"spinbutton\"\n                              ref={(el) => this.spinButton = el}\n                              class=\"current-value\"\n                              onBlur={(event) => this.wcsBlur.emit(event)}\n                              onKeyDown={(event) => this.onKeyDown(event)}\n                              aria-disabled={this.disabled ? 'true' : null}\n                              aria-valuenow={this.value}\n                              aria-valuetext={this.value}\n                              aria-valuemin={this.min}\n                              aria-valuemax={this.max}\n                              aria-label={this.label}\n                              {...this.inheritedAttributes}>{this.displayedValue}</span>\n                        <span id=\"outlier-up\"\n                              class=\"outliers\"\n                              hidden\n                              aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                    </div>\n                    <wcs-button class=\"wcs-primary\"\n                                shape=\"round\"\n                                size=\"s\"\n                                tabindex={-1}\n                                onClick={() => this.handleIncrement()}\n                                onBlur={(event) => this.wcsBlur.emit(event)}\n                                disabled={this.disabled || this.value === this.max}>\n                        <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                    </wcs-button>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -8,7 +8,7 @@ const Divider = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '19525963d8b8e0153b9644369ca44959cea01efa' }));
+        return (h(Host, { key: 'cf4452e90a52e1bb419fec0db2d9c0838ad7b134' }));
     }
 };
 Divider.style = WcsDividerStyle0;

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

@@ -8,7 +8,7 @@ const DropdownDivider = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '81d4f1fbc372b6905c0abfa9ab2e17da62e66bb7', slot: "item", tabindex: "-1", "aria-hidden": "true" }));
+        return (h(Host, { key: '52d90154f003445f1d62badde51df437a38d6f19', slot: "item", tabindex: "-1", "aria-hidden": "true" }));
     }
 };
 DropdownDivider.style = WcsDropdownDividerStyle0;