wcs-core 7.0.0 → 7.2.0

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

@@ -4,15 +4,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.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) {
         index.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 (index.h("slot", { key: '4f5691663c5f43df79027a4fe7d09659c216a8e4' }));
+        return (index.h(index.Host, { key: '27547ebfbab0737a4947baf9ff4086d37b494155', class: this.orientation }, index.h("slot", { key: 'f9444717438f9981b479b39575c03297b04a5847' })));
     }
 };
 CardBody.style = WcsCardBodyStyle0;

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

@@ -1 +1 @@
-{"file":"wcs-card-body.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,qHAAqH,CAAC;AAC1I,0BAAe,WAAW;;MCWb,QAAQ;;;;IACjB,MAAM;QACF,QAAQA,oEAAQ,EAAE;KACrB;;;;;;","names":["h"],"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.cjs.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,QACIA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,WAAW,IACzBD,oEAAa,CACV,EACT;KACL;;;;;;","names":["h","Host"],"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/cjs/wcs-card-content.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6f0140d8.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) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '970e45353d35495c5a4500e168f6b9fda970c7a0' }, index.h("slot", { key: '26f30084a71090b8894593f8c57f35a7e9f60f65' })));
+    }
+};
+CardContent.style = WcsCardContentStyle0;
+
+exports.wcs_card_content = CardContent;
+
+//# sourceMappingURL=wcs-card-content.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"wcs-card-content.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,+QAA+Q,CAAC;AACvS,6BAAe,cAAc;;MCiBhB,WAAW;;;;IAEtB,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"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/cjs/wcs-card-footer.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6f0140d8.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) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '8b600e63a3178bbf9c3d577053b927ff6ea9a48f' }, index.h("slot", { key: '1ce0728f66cd296c44dcc4d85c9e9d9dcbae853a' })));
+    }
+};
+CardFooter.style = WcsCardFooterStyle0;
+
+exports.wcs_card_footer = CardFooter;
+
+//# sourceMappingURL=wcs-card-footer.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"wcs-card-footer.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,iJAAiJ,CAAC;AACxK,4BAAe,aAAa;;MCYf,UAAU;;;;IAEnB,MAAM;QACF,QACIA,QAACC,UAAI,uDACDD,oEAAa,CACV,EACT;KACL;;;;;;","names":["h","Host"],"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/cjs/wcs-card-header.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6f0140d8.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) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '6a79563b6c56b7c7262e447ea5946d094590afb6' }, index.h("slot", { key: '74b2f0d43ee991ebee97c0d9d7f6620e30dc9881', name: "badges" }), index.h("div", { key: '71f110c0e5360352a059d84235c1a1d513c83c0a', class: "header-content" }, index.h("h3", { key: '4b4763ae375f4b96e0018772df7f9af0a4fd20fe' }, index.h("slot", { key: 'c2925912655cbca5e351067e42f6a9c67de07083' })), index.h("slot", { key: '37b2f523adaf2685de1d76dde3942dba5c2379c1', name: "actions" }))));
+    }
+};
+CardHeader.style = WcsCardHeaderStyle0;
+
+exports.wcs_card_header = CardHeader;
+
+//# sourceMappingURL=wcs-card-header.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"wcs-card-header.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,4rBAA4rB,CAAC;AACntB,4BAAe,aAAa;;MCmBf,UAAU;;;;IACnB,MAAM;QACF,QACIA,QAACC,UAAI,uDACDD,mEAAM,IAAI,EAAC,QAAQ,GAAQ,EAC3BA,kEAAK,KAAK,EAAC,gBAAgB,IACvBA,mEAAIA,oEAAa,CAAK,EACtBA,mEAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CACH,EACT;KACL;;;;;;","names":["h","Host"],"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/cjs/wcs-card-media.cjs.entry.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6f0140d8.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) {
+        index.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 (index.h(index.Host, { key: '8b54a791a4d1c8bfdc772cb5cd16f3a3dfec0682', class: this.orientation }, index.h("slot", { key: 'a7f5751e8e1f3ef3b1b18af34384cb598a80b690' }), this.orientation === 'vertical' ? index.h("slot", { name: "vertical" }) : index.h("slot", { name: "horizontal" })));
+    }
+};
+CardMedia.style = WcsCardMediaStyle0;
+
+exports.wcs_card_media = CardMedia;
+
+//# sourceMappingURL=wcs-card-media.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"wcs-card-media.entry.cjs.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,QACIA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,WAAW,IACzBD,oEAAa,EACZ,IAAI,CAAC,WAAW,KAAK,UAAU,GAAGA,kBAAM,IAAI,EAAC,UAAU,GAAQ,GAAGA,kBAAM,IAAI,EAAC,YAAY,GAAQ,CAC/F,EACT;KACL;;;;;;","names":["h","Host"],"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/cjs/wcs-card.cjs.entry.js

@@ -4,17 +4,45 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.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) {
         index.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 (index.h("slot", { key: 'da921d2df1dcee64b8e8edd17805e37a15544f05' }));
+        return (index.h("slot", { key: '20a57cf8fc64155e65a98bdb69618ec013ea5a7f', onSlotchange: () => this.onSlotChange() }));
     }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "orientation": ["orientationChanged"]
+    }; }
 };
 Card.style = WcsCardStyle0;
 

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

@@ -1 +1 @@
-{"file":"wcs-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,wyBAAwyB,CAAC;AACzzB,sBAAe,OAAO;;MCiBT,IAAI;;;oBAEI,MAAM;;IAGvB,MAAM;QACF,QACIA,oEAAO,EACT;KACL;;;;;;","names":["h"],"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.cjs.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,QACIA,mEAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAG,EAClD;KACL;;;;;;;;;;","names":["h"],"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/cjs/wcs-checkbox.cjs.entry.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const helpers = require('./helpers-2f1a8ddc.js');
+const controlComponentInterface = require('./control-component-interface-d9b68f28.js');
 
 const checkboxCss = ":host{--wcs-checkbox-border-color:var(--wcs-checkbox-border-color-default);--wcs-checkbox-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-checkbox-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-checkbox-border-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-checkbox-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-checkbox-border-color-indeterminate:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-checkbox-border-radius:calc(0.5 * var(--wcs-semantic-size-base));--wcs-checkbox-border-width:var(--wcs-semantic-border-width-large);--wcs-checkbox-size:calc(2 * var(--wcs-semantic-size-base));--wcs-checkbox-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-checkbox-text-color-disabled:var(--wcs-semantic-color-text-tertiary);--wcs-checkbox-text-color-hover:var(--wcs-semantic-color-text-secondary);--wcs-checkbox-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-checkbox-text-font-size:var(--wcs-semantic-font-size-label-1);--wcs-checkbox-text-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-checkbox-background-color-default:transparent;--wcs-checkbox-background-color-hover:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-checkbox-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-checkbox-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-checkbox-background-color-indeterminate:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-checkbox-outline-radius-focus:var(--wcs-semantic-border-radius-base);--wcs-checkbox-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-checkbox-gap:var(--wcs-semantic-spacing-base);--wcs-checkmark-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-checkmark-height:0.5rem;--wcs-checkmark-width:0.1875rem;--wcs-checkmark-border-width:0.125rem;--wcs-indeterminate-bar-width:0.625rem;--wcs-indeterminate-bar-height:0.125rem;--wcs-indeterminate-bar-border-radius:0.0625rem;--wcs-indeterminate-bar-background-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-checkbox-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:inline-flex}:host([disabled]) .text{color:var(--wcs-checkbox-text-color-disabled)}:host([disabled]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-disabled)}:host([disabled]) .wcs-container{cursor:not-allowed}:host([checked]:not([indeterminate][disabled])){--wcs-checkbox-border-color:var(--wcs-checkbox-border-color-selected)}.wcs-checkmark{transition-property:border-color, background-color, color;transition:var(--wcs-checkbox-transition-duration) ease-in-out}.wcs-container{position:relative;font-size:var(--wcs-checkbox-text-font-size);font-weight:var(--wcs-checkbox-text-font-weight);user-select:none;display:flex;gap:var(--wcs-checkbox-gap)}.wcs-container:not([aria-disabled]){cursor:pointer}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.wcs-container:hover:not([aria-disabled]) .text,input:focus .text{color:var(--wcs-checkbox-text-color-hover)}.wcs-container:hover:not([aria-disabled]) .wcs-checkmark,input:focus .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-hover)}.wcs-container:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-checkbox-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-checkbox-outline-radius-focus)}@supports not selector(.wcs-container:has(input:focus-visible)){.wcs-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-checkbox-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-checkbox-outline-radius-focus)}}.wcs-checkmark{flex:0 0 var(--wcs-checkbox-size);width:var(--wcs-checkbox-size);height:var(--wcs-checkbox-size);background-color:var(--wcs-checkbox-background-color-default);border:var(--wcs-checkbox-border-width) solid var(--wcs-checkbox-border-color);border-radius:var(--wcs-checkbox-border-radius);box-sizing:border-box}:host([indeterminate]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-indeterminate);background:var(--wcs-checkbox-background-color-indeterminate)}:host([indeterminate][disabled]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-disabled);background:var(--wcs-checkbox-background-color-disabled)}.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark{background-color:var(--wcs-checkbox-background-color-selected)}.wcs-container[aria-disabled] input:checked~.wcs-checkmark{background-color:var(--wcs-checkbox-background-color-disabled)}.wcs-checkmark:after{content:\"\";position:absolute;display:none}.wcs-checkmark{position:relative}:host([checked]),:host([indeterminate]){}:host([checked]) .wcs-container input~.wcs-checkmark:after,:host([indeterminate]) .wcs-container input~.wcs-checkmark:after{display:flex}:host([checked]) .wcs-container:not([aria-disabled]):hover .wcs-checkmark,:host([indeterminate]) .wcs-container:not([aria-disabled]):hover .wcs-checkmark{background-color:var(--wcs-checkbox-background-color-hover)}:host(:not([indeterminate])){}:host(:not([indeterminate])) .wcs-container .wcs-checkmark:after{left:0.25rem;width:var(--wcs-checkmark-width);height:var(--wcs-checkmark-height);border:solid var(--wcs-checkmark-color, white);border-width:0 var(--wcs-checkmark-border-width) var(--wcs-checkmark-border-width) 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}:host([indeterminate]) .wcs-container .wcs-checkmark:after{position:absolute;background-color:var(--wcs-indeterminate-bar-background-color);left:calc(50% - var(--wcs-indeterminate-bar-width) / 2);top:calc(50% - var(--wcs-indeterminate-bar-height) / 2);width:var(--wcs-indeterminate-bar-width);height:var(--wcs-indeterminate-bar-height);border-radius:var(--wcs-indeterminate-bar-border-radius)}.wcs-container:not([aria-disabled]) input:not(:checked)~.text{color:var(--wcs-checkbox-text-color-default);font-weight:var(--wcs-checkbox-text-font-weight)}.wcs-container:not([aria-disabled]) input:checked~.text{color:var(--wcs-checkbox-text-color-selected);font-weight:var(--wcs-checkbox-text-font-weight)}.hidden{display:none}";
 const WcsCheckboxStyle0 = checkboxCss;
@@ -32,6 +33,9 @@ const Checkbox = class {
     async setAriaAttribute(attr, value) {
         helpers.setOrRemoveAttribute(this.nativeInput, attr, value);
     }
+    async getLabel() {
+        return controlComponentInterface.getSlottedContentText(this.el);
+    }
     handleChange(e) {
         e.stopImmediatePropagation();
         e.preventDefault();
@@ -81,7 +85,7 @@ const Checkbox = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '67abc5dd72a4af40cbea9532440bda5fa3485806' }, index.h("label", { key: 'f71f0db26cb3088bb29899b2125a8f31e7c2e568', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, index.h("input", Object.assign({ key: '48ad738d5678ef550017b9bcae3d5d9283f9655e', 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)), index.h("span", { key: 'a8e25ca97f455ca1d6b6baa466ae7900e8e2476c', class: "wcs-checkmark" }), index.h("span", { key: '215e0a4f6aa986f38d67e783954a0d7ca7bba877', class: "text" }, index.h("slot", { key: '928615492124aa1febec5baf593272e02094bef9', onSlotchange: (_) => this.onSlotChange() })))));
+        return (index.h(index.Host, { key: 'a2215c880bbe8e2751505e44275e5cd085266baa' }, index.h("label", { key: 'ce09cb611a5e40695e2c2a8734501b28a04fe581', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, index.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)), index.h("span", { key: '04814a8a11514ee090d04b708095553c73aea6f8', class: "wcs-checkmark" }), index.h("span", { key: '8a2894a93d030a2854b39a47cad63066d0b6904a', class: "text" }, index.h("slot", { key: '40d804d00c1e3ba9eff5aa510b252a95a089e416', onSlotchange: (_) => this.onSlotChange() })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

@@ -1 +1 @@
-{"file":"wcs-checkbox.entry.cjs.js","mappings":"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","names":["inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","h","Host"],"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\";\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 {\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    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.cjs.js","mappings":"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","names":["inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","getSlottedContentText","h","Host"],"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/cjs/wcs-com-nav-category.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
-const comNavUtils = require('./com-nav-utils-9f6c99b8.js');
+const helpers = require('./helpers-2f1a8ddc.js');
+const comNavUtils = require('./com-nav-utils-ff4f0bef.js');
 
 const comNavCategoryCss = ":host{--wcs-com-nav-category-label-mobile-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-category-label-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-label-font-size:var(--wcs-semantic-font-size-label-1);--wcs-com-nav-category-label-desktop-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-label-desktop-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-label-desktop-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-category-label-desktop-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-category-item-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-item-mobile-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-item-mobile-spacing-top:var(--wcs-semantic-spacing-large);--wcs-com-nav-category-item-mobile-spacing-left:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-category-item-mobile-gap:calc(var(--wcs-semantic-spacing-base) * 1.5);--wcs-com-nav-category-desktop-menu-background-color:transparent;--wcs-com-nav-category-desktop-menu-border-left-width:var(--wcs-semantic-border-width-default);--wcs-com-nav-category-desktop-menu-border-left-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-category-desktop-menu-background-indicator-color:transparent;--wcs-com-nav-category-desktop-menu-gap:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-category-item-desktop-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-item-desktop-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-desktop-menu-padding-top:50px;--wcs-com-nav-category-desktop-menu-padding-bottom:50px;--wcs-com-nav-category-desktop-menu-padding-left:50px;--wcs-com-nav-category-desktop-menu-padding-right:0;display:block;height:fit-content}:host button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:initial}:host .label-container{margin:0;font-size:var(--wcs-com-nav-category-label-font-size);font-weight:var(--wcs-com-nav-category-label-mobile-font-weight);display:block;color:var(--wcs-com-nav-category-label-mobile-color)}:host .label-container .arrow-container{display:none}:host .label-container .arrow-icon{display:none}:host .item-container{display:flex;flex-direction:column;gap:var(--wcs-com-nav-category-item-mobile-gap);margin-left:var(--wcs-com-nav-category-item-mobile-spacing-left);margin-top:var(--wcs-com-nav-category-item-mobile-spacing-top)}:host .item-container ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-category-item-mobile-color);font-weight:var(--wcs-com-nav-category-item-mobile-font-weight)}@media (min-width: 576px){:host{padding-bottom:unset}:host .item-container:not([data-open]){display:none}:host button{cursor:pointer}:host .label-container{display:flex;align-items:center;gap:var(--wcs-com-nav-category-label-desktop-gap);font-weight:var(--wcs-com-nav-category-label-desktop-font-weight);cursor:pointer;user-select:none;padding-left:unset;color:var(--wcs-com-nav-category-label-desktop-color)}:host .label-container .arrow-icon{display:inline-block;font-family:icons;font-size:0.6rem;line-height:1;box-sizing:border-box}:host .label-container .arrow-container{display:unset}:host .label-container:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-label-desktop-focus-outline-color);outline-offset:0.1rem;border-radius:5px}@supports not selector(.label-container:focus-visible){:host .label-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-label-desktop-focus-outline-color);outline-offset:0.1rem;border-radius:5px}}:host button.label-container[aria-expanded=true]:after{position:absolute;left:calc(50% + var(--wcs-com-content-max-width) / 8 - 0.5625rem);z-index:2;display:block;width:1.125rem;height:1.125rem;content:\"\";background-color:var(--wcs-com-nav-category-desktop-menu-background-indicator-color);transform:rotate(45deg)}:host .item-container[data-open]{position:absolute;border-left:solid var(--wcs-com-nav-category-desktop-menu-border-left-width) var(--wcs-com-nav-category-desktop-menu-border-left-color);left:calc(50% + var(--wcs-com-content-max-width) / 8);top:0;right:0;padding:var(--wcs-com-nav-category-desktop-menu-padding-top) var(--wcs-com-nav-category-desktop-menu-padding-right) var(--wcs-com-nav-category-desktop-menu-padding-bottom) var(--wcs-com-nav-category-desktop-menu-padding-left);background-blend-mode:multiply;background-color:var(--wcs-com-nav-category-desktop-menu-background-color);box-sizing:border-box;height:100%;margin-left:unset;margin-top:unset;display:flex;flex-direction:column;gap:var(--wcs-com-nav-category-desktop-menu-gap);align-items:start}:host .item-container[data-open] ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-category-item-desktop-color);font-weight:var(--wcs-com-nav-category-item-desktop-font-weight)}:host .item-container[data-open] ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-item-desktop-color);outline-offset:0.1rem;border-radius:2px}}";
 const WcsComNavCategoryStyle0 = comNavCategoryCss;
@@ -86,9 +86,9 @@ const ComNavCategory = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: 'f94c0352af2387f55d0d86905c492c14a8bdbc8d', role: "listitem", onClick: evt => this.onClick(evt) }, this.currentActiveSizing === 'mobile' ?
+        return (index.h(index.Host, { key: '0b5d69d30228c1585c17d74bf8183f6fe91c1696', role: "listitem", onClick: evt => this.onClick(evt) }, this.currentActiveSizing === 'mobile' ?
             index.h("h3", { role: "presentation", class: "label-container" }, index.h("span", { class: "label" }, this.label))
-            : index.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), index.h("span", { class: "label" }, this.label), index.h("span", { class: "arrow-container" }, index.h("span", { "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))), index.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) }, index.h("slot", { key: '27089cf41dfcdc7bd0e5364d41d02e33ba43f731' }))));
+            : index.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), index.h("span", { class: "label" }, this.label), index.h("span", { class: "arrow-container" }, index.h("span", { "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))), index.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) }, index.h("slot", { key: '0cd3f5916499f4e14d554e7fe963a2a384c4b39d' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
 
-const comNavItemCss = ":host{--wcs-com-nav-item-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-item-font-size:var(--wcs-semantic-font-size-label-1);--wcs-com-nav-item-arrow-icon-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-arrow-icon-font-size:0.6rem;--wcs-com-nav-item-arrow-icon-font-family:icons;--wcs-com-nav-item-arrow-icon-line-height:1;--wcs-com-nav-item-focus-outline-color:var(--wcs-semantic-color-border-focus-base);position:relative;display:inline-flex;align-items:center;gap:var(--wcs-com-nav-item-gap);height:fit-content;padding:0 8px;font:inherit;}:host ::slotted(a){user-select:none;cursor:pointer;text-decoration:none;font-size:var(--wcs-com-nav-item-font-size);color:inherit;font-weight:inherit;display:flex;align-items:center}:host .arrow-icon{display:inline-block;font-family:icons;color:var(--wcs-com-nav-item-arrow-icon-color);font-size:var(--wcs-com-nav-item-arrow-icon-font-size);line-height:var(--wcs-com-nav-item-arrow-icon-line-height);box-sizing:border-box}:host .arrow-container{display:unset}:host ::slotted(a:focus-visible){outline:none}:host :host(:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-item-focus-outline-color);outline-offset:0.5rem;border-radius:2px}@media screen and (min-width: 576px){:host ::slotted(a){display:flex;align-items:center;height:100%;padding-top:unset;padding-bottom:unset;padding-left:unset}}";
+const comNavItemCss = ":host{--wcs-com-nav-item-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-item-font-size:var(--wcs-semantic-font-size-label-1);--wcs-com-nav-item-arrow-icon-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-arrow-icon-font-size:0.6rem;--wcs-com-nav-item-arrow-icon-font-family:icons;--wcs-com-nav-item-arrow-icon-line-height:1;--wcs-com-nav-item-focus-outline-color:var(--wcs-semantic-color-border-focus-base);position:relative;display:inline-flex;align-items:center;gap:var(--wcs-com-nav-item-gap);height:fit-content;padding:0 8px;font:inherit;}:host ::slotted(a){user-select:none;cursor:pointer;text-decoration:none;font-size:var(--wcs-com-nav-item-font-size);color:inherit;font-weight:inherit;display:flex;align-items:center}:host .arrow-icon{display:inline-block;font-family:icons;color:var(--wcs-com-nav-item-arrow-icon-color);font-size:var(--wcs-com-nav-item-arrow-icon-font-size);line-height:var(--wcs-com-nav-item-arrow-icon-line-height);box-sizing:border-box}:host .arrow-container{display:unset}:host ::slotted(a:focus-visible){outline:none}:host(:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-item-focus-outline-color);outline-offset:0.5rem;border-radius:2px}@media screen and (min-width: 576px){:host ::slotted(a){display:flex;align-items:center;height:100%;padding-top:unset;padding-bottom:unset;padding-left:unset}}";
 const WcsComNavItemStyle0 = comNavItemCss;
 
 const ComNavItem = class {
@@ -16,7 +16,7 @@ const ComNavItem = class {
         this.wcsClickOnFinalAction.emit();
     }
     render() {
-        return (index.h(index.Host, { key: 'ebafe8ee7fa4dfb839095a00119b1fb60ec9f61f', role: "listitem" }, index.h("slot", { key: '4dd33801a76cd03665c107afb6a1640f2843d3cd' }), index.h("span", { key: 'a9fe68e0e7b0e4221ba6b1a6b3e6802876082ce4', class: "arrow-container" }, index.h("span", { key: 'b0d3aa7fbfb967e7910ea6f446e1dd0489d39265', "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))));
+        return (index.h(index.Host, { key: '25690c3eecac76d2b29b0aeda90f5e1bf5fd0b22', role: "listitem" }, index.h("slot", { key: '236d67ffd9fefb7650d2b67cee685852030adb4b' }), index.h("span", { key: '2ef478d77dc28d169817500145c8d9df525bd439', class: "arrow-container" }, index.h("span", { key: '0fafbba11e817663ad7e18ff6947cdbd07494f69', "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))));
     }
 };
 ComNavItem.style = WcsComNavItemStyle0;

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

@@ -1 +1 @@
-{"file":"wcs-com-nav-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,s4CAAs4C,CAAC;AAC75C,4BAAe,aAAa;;MCcf,UAAU;;;;;IASnB,OAAO;QACH,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;KACrC;IAED,MAAM;QACF,QACIA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,IACjBD,oEAAa,EACbA,mEAAM,KAAK,EAAC,iBAAiB,IACrBA,kFAAkB,MAAM,EAAC,KAAK,EAAC,YAAY,aAAgB,CAC5D,CACJ,EACT;KACL;;;;;;","names":["h","Host"],"sources":["src/components/com-nav-item/com-nav-item.scss?tag=wcs-com-nav-item&encapsulation=shadow","src/components/com-nav-item/com-nav-item.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../com-nav/com-nav-focus.scss';\n\n/* Default style and mobile behaviour */\n:host {\n    --wcs-com-nav-item-gap: var(--wcs-semantic-spacing-base);\n    --wcs-com-nav-item-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-com-nav-item-arrow-icon-color: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-com-nav-item-arrow-icon-font-size: 0.6rem;\n    --wcs-com-nav-item-arrow-icon-font-family: icons;\n    --wcs-com-nav-item-arrow-icon-line-height: 1;\n\n    --wcs-com-nav-item-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--wcs-com-nav-item-gap);\n    height: fit-content;\n    padding: 0 8px;\n\n    font: inherit;\n\n    ::slotted(a) {\n        /* Default */\n        user-select: none;\n        cursor: pointer;\n        text-decoration: none;\n        font-size: var(--wcs-com-nav-item-font-size);\n        color: inherit;\n        font-weight: inherit;\n\n        display: flex;\n        align-items: center;\n    }\n\n    /* Common behaviour between Large Screen and Small Screens */\n    .arrow-icon {\n        display: inline-block;\n        font-family: icons;\n        color: var(--wcs-com-nav-item-arrow-icon-color);\n        font-size: var(--wcs-com-nav-item-arrow-icon-font-size);\n        line-height: var(--wcs-com-nav-item-arrow-icon-line-height);\n        box-sizing: border-box;\n    }\n\n    .arrow-container {\n        display: unset;\n    }\n\n    /**For mobile*/\n    ::slotted(a:focus-visible) {\n        outline: none;\n    }\n\n    :host(:focus-within) {\n        @include com-nav-item-mobile-focus-outline(var(--wcs-com-nav-item-focus-outline-color));\n    }\n}\n\n/* Large screen, specific behaviour */\n@media screen and (min-width: 576px) {\n    :host {\n        ::slotted(a) {\n            display: flex;\n            align-items: center;\n            height: 100%;\n\n            /* Reset for pc */\n            padding-top: unset;\n            padding-bottom: unset;\n            padding-left: unset;\n        }\n\n        // Focus outline style is handling by com-nav, com-nav-submenu and com-nav-category in desktop mode\n    }\n}\n","import { Component, Host, h, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * The com-nav-item is a subcomponent of `wcs-com-nav`. It represents a list-item wrapper around a link.\n * \n * @cssprop --wcs-com-nav-item-gap - Gap between text and arrow\n * @cssprop --wcs-com-nav-item-font-weight - Font-weight of item\n * @cssprop --wcs-com-nav-item-arrow-icon-font-size - Arrow size\n * @cssprop --wcs-com-nav-item-focus-outline-color - Focus outline color\n */\n@Component({\n    tag: 'wcs-com-nav-item',\n    styleUrl: './com-nav-item.scss',\n    shadow: true\n})\nexport class ComNavItem {\n    /**\n     * Emitted when a user click on a final navigation action.\n     *\n     * Used by the com-nav component to close the mobile menu overlay when a user click on a final action.\n     */\n    @Event() private wcsClickOnFinalAction: EventEmitter<void>;\n    \n    @Listen('click')\n    onClick() {\n        this.wcsClickOnFinalAction.emit();\n    }\n    \n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot></slot>\n                <span class=\"arrow-container\">\n                        <span aria-hidden=\"true\" class=\"arrow-icon\">&#xf107;</span>\n                </span>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}
+{"file":"wcs-com-nav-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,g4CAAg4C,CAAC;AACv5C,4BAAe,aAAa;;MCcf,UAAU;;;;;IASnB,OAAO;QACH,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;KACrC;IAED,MAAM;QACF,QACIA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,IACjBD,oEAAa,EACbA,mEAAM,KAAK,EAAC,iBAAiB,IACrBA,kFAAkB,MAAM,EAAC,KAAK,EAAC,YAAY,aAAgB,CAC5D,CACJ,EACT;KACL;;;;;;","names":["h","Host"],"sources":["src/components/com-nav-item/com-nav-item.scss?tag=wcs-com-nav-item&encapsulation=shadow","src/components/com-nav-item/com-nav-item.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../com-nav/com-nav-focus.scss';\n\n/* Default style and mobile behaviour */\n:host {\n    --wcs-com-nav-item-gap: var(--wcs-semantic-spacing-base);\n    --wcs-com-nav-item-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-com-nav-item-arrow-icon-color: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-com-nav-item-arrow-icon-font-size: 0.6rem;\n    --wcs-com-nav-item-arrow-icon-font-family: icons;\n    --wcs-com-nav-item-arrow-icon-line-height: 1;\n\n    --wcs-com-nav-item-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--wcs-com-nav-item-gap);\n    height: fit-content;\n    padding: 0 8px;\n\n    font: inherit;\n\n    ::slotted(a) {\n        /* Default */\n        user-select: none;\n        cursor: pointer;\n        text-decoration: none;\n        font-size: var(--wcs-com-nav-item-font-size);\n        color: inherit;\n        font-weight: inherit;\n\n        display: flex;\n        align-items: center;\n    }\n\n    /* Common behaviour between Large Screen and Small Screens */\n    .arrow-icon {\n        display: inline-block;\n        font-family: icons;\n        color: var(--wcs-com-nav-item-arrow-icon-color);\n        font-size: var(--wcs-com-nav-item-arrow-icon-font-size);\n        line-height: var(--wcs-com-nav-item-arrow-icon-line-height);\n        box-sizing: border-box;\n    }\n\n    .arrow-container {\n        display: unset;\n    }\n\n    /**For mobile*/\n    ::slotted(a:focus-visible) {\n        outline: none;\n    }\n}\n\n:host(:focus-within) {\n    @include com-nav-item-mobile-focus-outline(var(--wcs-com-nav-item-focus-outline-color));\n}\n\n/* Large screen, specific behaviour */\n@media screen and (min-width: 576px) {\n    :host {\n        ::slotted(a) {\n            display: flex;\n            align-items: center;\n            height: 100%;\n\n            /* Reset for pc */\n            padding-top: unset;\n            padding-bottom: unset;\n            padding-left: unset;\n        }\n\n        // Focus outline style is handling by com-nav, com-nav-submenu and com-nav-category in desktop mode\n    }\n}\n","import { Component, Host, h, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * The com-nav-item is a subcomponent of `wcs-com-nav`. It represents a list-item wrapper around a link.\n * \n * @cssprop --wcs-com-nav-item-gap - Gap between text and arrow\n * @cssprop --wcs-com-nav-item-font-weight - Font-weight of item\n * @cssprop --wcs-com-nav-item-arrow-icon-font-size - Arrow size\n * @cssprop --wcs-com-nav-item-focus-outline-color - Focus outline color\n */\n@Component({\n    tag: 'wcs-com-nav-item',\n    styleUrl: './com-nav-item.scss',\n    shadow: true\n})\nexport class ComNavItem {\n    /**\n     * Emitted when a user click on a final navigation action.\n     *\n     * Used by the com-nav component to close the mobile menu overlay when a user click on a final action.\n     */\n    @Event() private wcsClickOnFinalAction: EventEmitter<void>;\n    \n    @Listen('click')\n    onClick() {\n        this.wcsClickOnFinalAction.emit();\n    }\n    \n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot></slot>\n                <span class=\"arrow-container\">\n                        <span aria-hidden=\"true\" class=\"arrow-icon\">&#xf107;</span>\n                </span>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
-const comNavUtils = require('./com-nav-utils-9f6c99b8.js');
+const helpers = require('./helpers-2f1a8ddc.js');
+const comNavUtils = require('./com-nav-utils-ff4f0bef.js');
 
 const comNavSubmenuCss = ":host{--wcs-com-nav-submenu-button-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-button-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-submenu-button-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-submenu-button-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-submenu-desktop-menu-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-submenu-desktop-menu-text-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-desktop-menu-link-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-desktop-menu-heading-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-submenu-desktop-menu-description-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-desktop-menu-description-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-submenu-desktop-menu-padding:50px;--wcs-com-nav-submenu-desktop-menu-items-padding-left:50px;--wcs-com-nav-submenu-desktop-menu-items-padding-right:80px;--wcs-com-nav-submenu-mobile-text-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-mobile-link-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-mobile-spacing-top:var(--wcs-semantic-spacing-large);--wcs-com-nav-submenu-mobile-spacing-bottom:var(--wcs-semantic-spacing-large);--wcs-com-nav-submenu-mobile-spacing-left:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-submenu-mobile-gap:calc(var(--wcs-semantic-spacing-base) * 3);display:block;padding-bottom:var(--wcs-com-nav-submenu-mobile-spacing-bottom)}:host button{display:block;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host .arrow-icon{display:none}:host .arrow-container{display:none}:host .label{text-transform:uppercase;font-size:16px;cursor:unset;font-weight:var(--wcs-com-nav-submenu-button-font-weight);color:var(--wcs-com-nav-submenu-button-color);text-decoration:none}:host .drawer{display:contents}:host .drawer-container{display:contents}:host .drawer-description{display:none}:host .menu-items{display:flex;flex-direction:column;gap:var(--wcs-com-nav-submenu-mobile-gap)}:host .menu-items ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-submenu-mobile-text-color);font-weight:var(--wcs-com-nav-submenu-mobile-link-font-weight)}@media (max-width: 575px){:host .menu-button{margin:0}:host .menu-items{margin-top:var(--wcs-com-nav-submenu-mobile-spacing-top);margin-left:var(--wcs-com-nav-submenu-mobile-spacing-left)}}@media (min-width: 576px){:host{height:100%;padding-bottom:unset}:host .menu-button{display:flex;align-items:center;height:100%;cursor:pointer;user-select:none;font-weight:unset;padding-left:unset}:host .menu-button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-button-focus-outline-color);outline-offset:0.1rem;border-radius:2px}@supports not selector(.menu-button:focus-visible){:host{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-button-focus-outline-color);outline-offset:0.1rem;border-radius:2px}}:host .label{text-transform:unset;cursor:pointer}:host .arrow-icon{display:inline-block;font-family:icons;font-size:0.6rem;line-height:1;box-sizing:border-box}:host .arrow-container{display:unset;margin-left:var(--wcs-com-nav-submenu-button-gap)}:host .arrow-icon:not([data-open]){transform:rotate(90deg)}:host .arrow-icon[data-open]{transform:rotate(-90deg)}:host .drawer{display:none;position:absolute;top:calc(var(--wcs-com-nav-menu-bar-height) + var(--wcs-com-nav-border-width));z-index:8888;left:0;width:100%;box-sizing:border-box;padding:var(--wcs-com-nav-submenu-desktop-menu-padding);background-color:var(--wcs-com-nav-submenu-desktop-menu-background-color);color:var(--wcs-com-nav-submenu-desktop-menu-text-color);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.08)}:host .drawer-content{display:flex;justify-content:space-between;max-width:62.5%;flex:1}:host .drawer-content div:first-child{flex:0.8}:host .drawer-content div{max-width:260px}:host .menu-items{padding:0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-right) 0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-left);display:flex;flex-direction:column;align-items:flex-end}:host .menu-items ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-submenu-desktop-menu-text-color);font-weight:var(--wcs-com-nav-submenu-desktop-menu-link-font-weight)}:host .menu-items ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-desktop-menu-text-color);outline-offset:0.1rem;border-radius:2px}:host .drawer-container{display:flex;max-width:var(--wcs-com-content-max-width);margin:0 auto}:host .drawer-container h3{margin:0 0 var(--wcs-com-nav-submenu-desktop-menu-description-gap) 0;font-size:1.5rem;line-height:1.25;font-weight:var(--wcs-com-nav-submenu-desktop-menu-heading-font-weight)}:host .drawer-container p{margin-top:0;margin-bottom:1rem;font-weight:var(--wcs-com-nav-submenu-desktop-menu-description-font-weight);font-size:1rem;line-height:1.375}:host .drawer[data-open]{display:block}:host .drawer-description{display:block}}";
 const WcsComNavSubmenuStyle0 = comNavSubmenuCss;
@@ -108,9 +108,9 @@ const ComNavSubmenu = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: '0da088c42404db11beb214d4a16c8526771e3e2a', onClick: evt => this.onClick(evt), role: "listitem", "data-open": this.menuOpen }, this.currentActiveSizing === 'mobile' ?
+        return (index.h(index.Host, { key: '935e78a3daf751160c21e7375e86be186bcfdec9', onClick: evt => this.onClick(evt), role: "listitem", "data-open": this.menuOpen }, this.currentActiveSizing === 'mobile' ?
             index.h("h2", { role: "presentation", class: "menu-button" }, index.h("span", { class: "label" }, this.label), index.h("span", { class: "arrow-container" }, index.h("span", { class: "arrow-icon", "data-open": this.menuOpen }, "\uF107")))
-            : index.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), index.h("span", { class: "label" }, this.label), index.h("span", { class: "arrow-container" }, index.h("span", { "aria-hidden": "true", class: "arrow-icon", "data-open": this.menuOpen }, "\uF107"))), index.h("div", { key: 'de27fc80404612471d359ff1eafd4958f78679c7', class: "drawer", "data-open": this.menuOpen, tabIndex: -1 }, index.h("div", { key: '7d90bef599ee51aa5af9d4bd1a6dc9a62a959b2f', class: "drawer-container" }, index.h("div", { key: '4a8896393732017a6084be1df1af5e4d938326d7', class: "drawer-content" }, index.h("div", { key: '92559e9ba3f21ddce21aa4c5d84de33aa8c7b59c', class: "drawer-description" }, index.h("h3", { key: 'a8b4f0865ab5ac5396669372c32020feea08c37a' }, this.panelTitle), index.h("p", { key: 'f2f778c761bf171204eb4fda3b376bdd92724b73' }, this.panelDescription)), index.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) }, index.h("slot", { key: '92e67731f2da01db2852a49b7ff255d384881157' })))))));
+            : index.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), index.h("span", { class: "label" }, this.label), index.h("span", { class: "arrow-container" }, index.h("span", { "aria-hidden": "true", class: "arrow-icon", "data-open": this.menuOpen }, "\uF107"))), index.h("div", { key: '1e654c7f9a74f3e6bb92e9cd3589ea3b7ee9ed99', class: "drawer", "data-open": this.menuOpen, tabIndex: -1 }, index.h("div", { key: '1c2d8a56d7e91071fcb43f537173850ecf62fb28', class: "drawer-container" }, index.h("div", { key: '4880e09bcf8e06464db2984ac43dbd01ee9a0af3', class: "drawer-content" }, index.h("div", { key: 'd2e6e97442a73ff8d24ba4165587fd544b2ff853', class: "drawer-description" }, index.h("h3", { key: '04b20b11befc1dc63e719fda8dda51fe248e93cd' }, this.panelTitle), index.h("p", { key: '69810728510063a77b97845d91f684fe2abfa347' }, this.panelDescription)), index.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) }, index.h("slot", { key: '3059b3ccbef8b9483e05e4d400b1643d9ab23273' })))))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const comNavUtils = require('./com-nav-utils-9f6c99b8.js');
-const helpers = require('./helpers-871f5a3d.js');
+const comNavUtils = require('./com-nav-utils-ff4f0bef.js');
+const helpers = require('./helpers-2f1a8ddc.js');
 
 const comNavCss = ":host{--wcs-com-nav-menu-bar-height:calc(var(--wcs-semantic-size-base) * 8);--wcs-com-nav-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-border-width:var(--wcs-semantic-border-width-default);--wcs-com-nav-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-app-name-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-app-name-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-app-name-font-size:var(--wcs-semantic-font-size-heading-5);--wcs-com-nav-app-name-line-height:var(--wcs-semantic-font-line-height-large);--wcs-com-nav-item-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-vertical-padding:0;--wcs-com-nav-horizontal-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-gap:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-menu-icon-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-mobile-menu-icon-gap:calc(var(--wcs-semantic-spacing-base) * 2);--wcs-com-nav-mobile-menu-icon-margin-left:var(--wcs-semantic-spacing-base);--wcs-com-nav-mobile-menu-icon-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-com-nav-menu-bar-gap:calc(var(--wcs-semantic-spacing-base) * 5);--wcs-com-nav-menu-bar-margin-left:calc(var(--wcs-semantic-spacing-base) * 6.25);display:block;position:relative;height:var(--wcs-com-nav-menu-bar-height);border-bottom:var(--wcs-com-nav-border-width) solid var(--wcs-com-nav-border-color)}:host .container{padding:var(--wcs-com-nav-vertical-padding) var(--wcs-com-nav-horizontal-padding);height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between}:host .container nav{display:flex;align-items:center}:host .container-left{display:flex;height:100%;align-items:center;flex-direction:row}:host .container-right{display:flex;align-items:center}:host .app-name{font-weight:var(--wcs-com-nav-app-name-font-weight);font-size:var(--wcs-com-nav-app-name-font-size);line-height:var(--wcs-com-nav-app-name-line-height);color:var(--wcs-com-nav-app-name-color)}:host .menu-bar{display:none}:host #mobile-menu-icon{display:flex;align-items:center;flex-wrap:nowrap;color:var(--wcs-com-nav-mobile-menu-icon-color);padding-left:var(--wcs-com-nav-mobile-menu-icon-gap);margin-left:var(--wcs-com-nav-mobile-menu-icon-margin-left);border-left:solid 1px var(--wcs-com-nav-mobile-menu-icon-border-color)}:host #mobile-menu-icon:focus{outline:none}:host #mobile-menu-icon:focus-visible::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(#mobile-menu-icon:focus-visible::after){:host #mobile-menu-icon:focus::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}:host button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host #mobile-menu-icon:after{font-family:icons;font-size:18px;cursor:pointer;content:\"\\f198\";line-height:1;box-sizing:border-box}:host #mobile-menu-icon[aria-expanded=true]:after{content:\"\\f129\"}:host .mobile-overlay{display:none}:host .mobile-overlay[data-mobile-open]{padding:var(--wcs-com-nav-mobile-overlay-padding);position:absolute;top:var(--wcs-com-nav-menu-bar-height);left:0;right:0;display:flex;flex-direction:column;gap:var(--wcs-com-nav-mobile-overlay-gap);z-index:9999;background-color:var(--wcs-com-nav-background-color)}:host .mobile-overlay[data-mobile-open] ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}@media (min-width: 576px){:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width)}:host nav{height:100%}:host .menu-bar{display:flex;align-items:center;height:100%;margin-left:var(--wcs-com-nav-menu-bar-margin-left)}:host .menu-bar ::slotted(*:not(:first-child)){margin-left:var(--wcs-com-nav-menu-bar-gap)}:host .menu-bar ::slotted(wcs-com-nav-item){height:100%;color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}:host .menu-bar ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:0.1rem;border-radius:2px}:host #mobile-menu-icon{display:none}:host .mobile-overlay{display:none !important}}";
 const WcsComNavStyle0 = comNavCss;
@@ -57,11 +57,11 @@ const ComNav = class {
     }
     render() {
         const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;
-        return (index.h(index.Host, { key: '85451701261dc64faebd405a0186b857d1881655' }, index.h("div", { key: '84e33d688f36901ee1608b765c3c20c26d099f83', class: "container" }, index.h("div", { key: 'f8fe43fcf24ce46ad57d010a46bb19ebbea8175c', class: "container-left" }, index.h("div", { key: '246da8710a8b10e52753a865b1345ce8a9d6f0e9', class: "app-name" }, this.appName, index.h("slot", { key: '0c6ad2ea30db8cc6ae51ec44d4f6e253b7cca850', name: "app-name" })), this.currentActiveSizing === 'desktop' ?
+        return (index.h(index.Host, { key: 'b39ff3dbd6d304ad0252e0fcfd2e0c5716b666db' }, index.h("div", { key: 'f84b73c9cee6295a7776576afeb61b65b71ea34e', class: "container" }, index.h("div", { key: 'a39b867e9d102abb4e4c13503a544681cd9b7fd8', class: "container-left" }, index.h("div", { key: '49db5dd80f097a9b2ccaf39fc64be9f6100108be', class: "app-name" }, this.appName, index.h("slot", { key: '2936888d5a805c67a3be4079a7eea62d460d42fe', name: "app-name" })), this.currentActiveSizing === 'desktop' ?
             index.h("nav", Object.assign({ role: "navigation" }, this.inheritedAttributes), index.h("div", { class: "menu-bar", role: "list" }, this.currentActiveSizing === 'desktop'
                 ? index.h("slot", null)
                 : null))
-            : null), index.h("div", { key: '34e2eb03491479f033a891d1f2bf46814e45057c', class: "container-right" }, index.h("slot", { key: '18bd4464e1ce6725f63d152dba5ddff4a73e48cf', name: "actions" }), this.currentActiveSizing === 'mobile' ?
+            : null), index.h("div", { key: 'c2c97d21d21d542a18fb141f90ce7ce91d0b12c0', class: "container-right" }, index.h("slot", { key: '51912b232ac4d51baf1d2c164e90ab59a787924e', name: "actions" }), this.currentActiveSizing === 'mobile' ?
             index.h("nav", Object.assign({ id: "wcs-com-nav-mobile-menu", role: "navigation" }, this.inheritedAttributes), index.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'
                 ? index.h("div", { class: "mobile-overlay", "data-mobile-open": this.mobileMenuOpen, role: "list" }, index.h("slot", null))
                 : null)