wcs-core 7.0.0 → 7.2.0

package/dist/collection/components/card-body/card-body.js

@@ -1,12 +1,24 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 /**
  * The card-body is a subcomponent of `wcs-card`. It represents content of the card with an extra padding around.
  *
+ * @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
+ *
  * @cssprop --wcs-card-body-padding - Padding of the card body
+ * @cssprop --wcs-card-body-gap - Gap between each element in the card body
  */
 export class CardBody {
+    constructor() {
+        this.orientation = null;
+    }
+    /**
+     * @internal this method is not intended to be used by the user
+     */
+    async setOrientation(orientation) {
+        this.orientation = orientation;
+    }
     render() {
-        return (h("slot", { key: '4f5691663c5f43df79027a4fe7d09659c216a8e4' }));
+        return (h(Host, { key: '27547ebfbab0737a4947baf9ff4086d37b494155', class: this.orientation }, h("slot", { key: 'f9444717438f9981b479b39575c03297b04a5847' })));
     }
     static get is() { return "wcs-card-body"; }
     static get encapsulation() { return "shadow"; }
@@ -20,5 +32,43 @@ export class CardBody {
             "$": ["card-body.css"]
         };
     }
+    static get states() {
+        return {
+            "orientation": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setOrientation": {
+                "complexType": {
+                    "signature": "(orientation: CardOrientation) => Promise<void>",
+                    "parameters": [{
+                            "name": "orientation",
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CardOrientation": {
+                            "location": "import",
+                            "path": "../card/card-interface",
+                            "id": "src/components/card/card-interface.ts::CardOrientation"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "this method is not intended to be used by the user"
+                        }]
+                }
+            }
+        };
+    }
 }
 //# sourceMappingURL=card-body.js.map

package/dist/collection/components/card-body/card-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-body.js","sourceRoot":"","sources":["../../../src/components/card-body/card-body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,MAAM,eAAe,CAAC;AAEjE;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;IACjB,MAAM;QACF,OAAO,CAAC,8DAAQ,CAAC,CAAC;IACtB,CAAC;;;;;;;;;CACJ","sourcesContent":["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":"card-body.js","sourceRoot":"","sources":["../../../src/components/card-body/card-body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtF;;;;;;;GAOG;AAMH,MAAM,OAAO,QAAQ;;2BAC+B,IAAI;;IAEpD;;OAEG;IAEH,KAAK,CAAC,cAAc,CAAC,WAA4B;QAC7C,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IACnC,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,WAAW;YACzB,8DAAa,CACV,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["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"]}

package/dist/collection/components/card-content/card-content.css

@@ -0,0 +1,12 @@
+: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;
+}

package/dist/collection/components/card-content/card-content.js

@@ -0,0 +1,30 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A content for a card inside card-body. Commonly used to provide more details about the card content.
+ * The information provided should be concise and easy to read.
+ *
+ * By default, the margin is removed from the top and bottom of the card description.
+ *
+ * @slot - The content of the card description.
+ *
+ * @cssprop --wcs-card-content-color - The color of the card description.
+ * @cssprop --wcs-card-content-font-size - The font size of the card description.
+ */
+export class CardContent {
+    render() {
+        return (h(Host, { key: '970e45353d35495c5a4500e168f6b9fda970c7a0' }, h("slot", { key: '26f30084a71090b8894593f8c57f35a7e9f60f65' })));
+    }
+    static get is() { return "wcs-card-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["card-content.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["card-content.css"]
+        };
+    }
+}
+//# sourceMappingURL=card-content.js.map

package/dist/collection/components/card-content/card-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-content.js","sourceRoot":"","sources":["../../../src/components/card-content/card-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,WAAW;IAEtB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CAEF","sourcesContent":["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"]}

package/dist/collection/components/card-footer/card-footer.css

@@ -0,0 +1,7 @@
+:host {
+  --wcs-card-footer-gap: var(--wcs-semantic-spacing-base);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--wcs-card-footer-gap);
+}

package/dist/collection/components/card-footer/card-footer.js

@@ -0,0 +1,25 @@
+import { Host, h } from "@stencil/core";
+/**
+ * The card footer component is a container that display content at the bottom of the card.
+ * It uses a flex layout to organize actions the user can take with a card
+ *
+ * @cssprop --wcs-card-footer-gap - Gap of the card footer
+ */
+export class CardFooter {
+    render() {
+        return (h(Host, { key: '8b600e63a3178bbf9c3d577053b927ff6ea9a48f' }, h("slot", { key: '1ce0728f66cd296c44dcc4d85c9e9d9dcbae853a' })));
+    }
+    static get is() { return "wcs-card-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["card-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["card-footer.css"]
+        };
+    }
+}
+//# sourceMappingURL=card-footer.js.map

package/dist/collection/components/card-footer/card-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-footer.js","sourceRoot":"","sources":["../../../src/components/card-footer/card-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAMH,MAAM,OAAO,UAAU;IAEnB,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,8DAAa,CACV,CACV,CAAC;IACN,CAAC;;;;;;;;;CAEJ","sourcesContent":["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"]}

package/dist/collection/components/card-header/card-header.css

@@ -0,0 +1,28 @@
+: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;
+}

package/dist/collection/components/card-header/card-header.js

@@ -0,0 +1,32 @@
+import { Host, h } from "@stencil/core";
+/**
+ * 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.
+ *
+ * The default slotted element is displayed as a `<h3>` element
+ *
+ * @slot badges - Content for the badge label
+ * @slot actions - Button or any action to display on the right of the title
+ *
+ * @cssprop --wcs-card-header-title-color - Color of the title
+ * @cssprop --wcs-card-header-title-font-size - Font size of the title
+ * @cssprop --wcs-card-header-title-font-weight - Font weight of the title
+ * @cssprop --wcs-card-header-gap - Gap between the title and the badge
+ */
+export class CardHeader {
+    render() {
+        return (h(Host, { key: '6a79563b6c56b7c7262e447ea5946d094590afb6' }, h("slot", { key: '74b2f0d43ee991ebee97c0d9d7f6620e30dc9881', name: "badges" }), h("div", { key: '71f110c0e5360352a059d84235c1a1d513c83c0a', class: "header-content" }, h("h3", { key: '4b4763ae375f4b96e0018772df7f9af0a4fd20fe' }, h("slot", { key: 'c2925912655cbca5e351067e42f6a9c67de07083' })), h("slot", { key: '37b2f523adaf2685de1d76dde3942dba5c2379c1', name: "actions" }))));
+    }
+    static get is() { return "wcs-card-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["card-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["card-header.css"]
+        };
+    }
+}
+//# sourceMappingURL=card-header.js.map

package/dist/collection/components/card-header/card-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-header.js","sourceRoot":"","sources":["../../../src/components/card-header/card-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,UAAU;IACnB,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,6DAAM,IAAI,EAAC,QAAQ,GAAQ;YAC3B,4DAAK,KAAK,EAAC,gBAAgB;gBACvB;oBAAI,8DAAa,CAAK;gBACtB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;CACJ","sourcesContent":["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"]}

package/dist/collection/components/card-media/card-media.css

@@ -0,0 +1,21 @@
+: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);
+}

package/dist/collection/components/card-media/card-media.js

@@ -0,0 +1,77 @@
+import { Host, h } from "@stencil/core";
+/**
+ * The card media component is a container that display an image/icon inside a card.
+ * On horizontal orientation, the image/icon has an aspect ratio of 1/1
+ * On vertical orientation, the image/icon has an aspect ratio of 16/9.
+ *
+ * @slot - The default slot where the image/icon is displayed
+ * @slot vertical - The slot where the image/icon is displayed when the card is vertical
+ * @slot horizontal - The slot where the image/icon is displayed when the card is horizontal
+ *
+ * @cssprop --wcs-card-media-max-width-horizontal - Max width of the image when the card is horizontal
+ */
+export class CardMedia {
+    constructor() {
+        this.orientation = 'vertical';
+    }
+    /**
+     * @internal this method is not intended to be used by the user
+     */
+    async setOrientation(orientation) {
+        this.orientation = orientation;
+    }
+    render() {
+        return (h(Host, { key: '8b54a791a4d1c8bfdc772cb5cd16f3a3dfec0682', class: this.orientation }, h("slot", { key: 'a7f5751e8e1f3ef3b1b18af34384cb598a80b690' }), this.orientation === 'vertical' ? h("slot", { name: "vertical" }) : h("slot", { name: "horizontal" })));
+    }
+    static get is() { return "wcs-card-media"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["card-media.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["card-media.css"]
+        };
+    }
+    static get states() {
+        return {
+            "orientation": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setOrientation": {
+                "complexType": {
+                    "signature": "(orientation: CardOrientation) => Promise<void>",
+                    "parameters": [{
+                            "name": "orientation",
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CardOrientation": {
+                            "location": "import",
+                            "path": "../card/card-interface",
+                            "id": "src/components/card/card-interface.ts::CardOrientation"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "this method is not intended to be used by the user"
+                        }]
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=card-media.js.map

package/dist/collection/components/card-media/card-media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-media.js","sourceRoot":"","sources":["../../../src/components/card-media/card-media.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGlE;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,SAAS;;2BAC8B,UAAU;;IAE1D;;OAEG;IAEH,KAAK,CAAC,cAAc,CAAC,WAA4B;QAC7C,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IACnC,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,WAAW;YACzB,8DAAa;YACZ,IAAI,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,UAAU,GAAQ,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC/F,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEJ","sourcesContent":["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"]}

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from "../../utils/helpers";
+import { getSlottedContentText } from "../../utils/control-component-interface";
 const CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];
 /**
  * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.
@@ -64,6 +65,9 @@ export class Checkbox {
     async setAriaAttribute(attr, value) {
         setOrRemoveAttribute(this.nativeInput, attr, value);
     }
+    async getLabel() {
+        return getSlottedContentText(this.el);
+    }
     handleChange(e) {
         e.stopImmediatePropagation();
         e.preventDefault();
@@ -113,7 +117,7 @@ export class Checkbox {
         }
     }
     render() {
-        return (h(Host, { key: '67abc5dd72a4af40cbea9532440bda5fa3485806' }, h("label", { key: 'f71f0db26cb3088bb29899b2125a8f31e7c2e568', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, 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)), h("span", { key: 'a8e25ca97f455ca1d6b6baa466ae7900e8e2476c', class: "wcs-checkmark" }), h("span", { key: '215e0a4f6aa986f38d67e783954a0d7ca7bba877', class: "text" }, h("slot", { key: '928615492124aa1febec5baf593272e02094bef9', onSlotchange: (_) => this.onSlotChange() })))));
+        return (h(Host, { key: 'a2215c880bbe8e2751505e44275e5cd085266baa' }, h("label", { key: 'ce09cb611a5e40695e2c2a8734501b28a04fe581', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, h("input", Object.assign({ key: 'ac1a253cfe304ed08e83383137f83e3bcc2403b9', onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), onFocus: this.handleFocus.bind(this), onClick: this.handleInputClick.bind(this), checked: this.checked, class: "wcs-checkbox", type: "checkbox", ref: (el) => (this.nativeInput = el), name: this.name, disabled: this.disabled, id: this.name }, this.inheritedAttributes)), h("span", { key: '04814a8a11514ee090d04b708095553c73aea6f8', class: "wcs-checkmark" }), h("span", { key: '8a2894a93d030a2854b39a47cad63066d0b6904a', class: "text" }, h("slot", { key: '40d804d00c1e3ba9eff5aa510b252a95a089e416', onSlotchange: (_) => this.onSlotChange() })))));
     }
     static get is() { return "wcs-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -323,6 +327,23 @@ export class Checkbox {
                     "text": "",
                     "tags": []
                 }
+            },
+            "getLabel": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Get the label text",
+                    "tags": []
+                }
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,IAAI,EACJ,KAAK,EAGL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,OAAO,EACP,MAAM,EACT,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAErG,MAAM,wBAAwB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAQH,MAAM,OAAO,QAAQ;;QAGT,wBAAmB,GAAyB,EAAE,CAAC;QAC/C,eAAU,GAAG,gBAAgB,WAAW,EAAE,EAAE,CAAC;oBAEtC,IAAI,CAAC,UAAU;6BAI0B,KAAK;uBAKX,KAAK;8BAK0B,QAAQ;wBAK5C,KAAK;;IAiBlD,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,wBAAwB,CAAC,CAC1D,CAAC;IACN,CAAC;IAED,gBAAgB;QACZ,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACxD,CAAC;IAED,YAAY,CAAC,CAAQ;QACjB,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAGD,KAAK,CAAC,eAAe,CAAC,CAAQ;QAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAED,gBAAgB,CAAC,EAAgB;QAC7B,4DAA4D;QAC5D,kGAAkG;QAClG,IAAI,EAAE,CAAC,MAAM,EAAE,CAAC;YACZ,EAAE,CAAC,wBAAwB,EAAE,CAAA;YAC7B,EAAE,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACL,CAAC;IAED,mBAAmB;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAChB,OAAO,EAAE,IAAI,CAAC,OAAO;SACxB,CAAC,CAAC;IACP,CAAC;IAED,WAAW,CAAC,KAAiB;QACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,UAAU,CAAC,KAAiB;QACxB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;IAED,YAAY;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,IAAI,EAAE,CAAC;YACP,sGAAsG;YACtG,qDAAqD;YACrD,0DAA0D;YAC1D,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAC3C,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC3B,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YACzE,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YACtE,CAAC;QACL,CAAC;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,8DAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ;gBACzE,4EACI,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAClC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EACtC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,UAAU,EACf,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,IAAI,IACT,IAAI,CAAC,mBAAmB,EACvB;gBACT,6DAAM,KAAK,EAAC,eAAe,GAAQ;gBACnC,6DAAM,KAAK,EAAC,MAAM;oBACd,6DAAM,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAAI,CAC/C,CACH,CACL,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ;AAED,IAAI,WAAW,GAAG,CAAC,CAAC","sourcesContent":["import {\n    Component,\n    Prop,\n    Event,\n    EventEmitter,\n    ComponentInterface,\n    h,\n    Host,\n    Method,\n    Element,\n    Listen\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\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":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    Event,\n    EventEmitter,\n    ComponentInterface,\n    h,\n    Host,\n    Method,\n    Element,\n    Listen\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.\n * \n * @cssprop --wcs-checkbox-border-color-default - Default color of the border\n * @cssprop --wcs-checkbox-border-color-hover - Color of the border when hovered\n * @cssprop --wcs-checkbox-border-color-disabled - Color of the border when disabled\n * @cssprop --wcs-checkbox-border-color-selected - Color of the border when selected\n * @cssprop --wcs-checkbox-border-color-indeterminate - Color of the border when indeterminate\n * \n * @cssprop --wcs-checkbox-border-radius - Border radius of the checkbox\n * @cssprop --wcs-checkbox-border-width - Width of the border of the checkbox\n * \n * @cssprop --wcs-checkbox-size - Size of the checkbox\n * \n * @cssprop --wcs-checkbox-text-color-default - Color of the text when the checkbox is not selected\n * @cssprop --wcs-checkbox-text-color-disabled - Color of the text when the checkbox is disabled\n * @cssprop --wcs-checkbox-text-color-hover - Color of the text when the checkbox is hovered\n * @cssprop --wcs-checkbox-text-color-selected - Color of the text when the checkbox is selected\n * \n * @cssprop --wcs-checkbox-text-font-size - Font size of the text\n * @cssprop --wcs-checkbox-text-font-weight - Font weight of the text\n * \n * @cssprop --wcs-checkbox-background-color-default - Default background color of the checkbox\n * @cssprop --wcs-checkbox-background-color-hover - Background color of the checkbox when hovered\n * @cssprop --wcs-checkbox-background-color-disabled - Background color of the checkbox when disabled\n * @cssprop --wcs-checkbox-background-color-selected - Background color of the checkbox when selected\n * @cssprop --wcs-checkbox-background-color-indeterminate - Background color of the checkbox when indeterminate\n * \n * @cssprop --wcs-checkbox-outline-radius-focus - Border radius of the focus outline\n * @cssprop --wcs-checkbox-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-checkbox-gap - Gap between the checkbox and the label\n * @cssprop --wcs-checkmark-color - Color of the checkmark\n * @cssprop --wcs-checkmark-height - Height of the checkmark (From the bottom left to the top right of the checkmark)\n * @cssprop --wcs-checkmark-width - Width of the checkmark (From the bottom right to the top left of the checkmark)\n * @cssprop --wcs-checkmark-border-width - Width of the border of the checkmark\n *\n * @cssprop --wcs-indeterminate-bar-width - Width of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-height - Height of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-border-radius - Border-radius of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-background-color - Color of the indeterminate bar\n * \n * @cssprop --wcs-checkbox-transition-duration - Duration of the transition\n */\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: {\n        delegatesFocus: true,\n    },\n})\nexport class Checkbox implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n    @Element() private el!: HTMLElement;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n\n    @Prop() name = this.checkboxId;\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify whether the checkbox is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    /**\n     * Emitted when the checkbox has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the checkbox loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, CHECKBOX_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.onSlotChange();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    @Method()\n    async getLabel(): Promise<string> {\n        return getSlottedContentText(this.el);\n    }\n\n    handleChange(e: Event) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        this.toggleCheckboxState();\n    }\n    \n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n        \n        this.toggleCheckboxState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleCheckboxState() {\n        if (this.disabled) return;\n        \n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n    \n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    onSlotChange() { \n        const slot = this.el.shadowRoot.querySelector('slot');\n        if (slot) {\n            // TODO: remove when pseudo-class that indicate a slot has content is supported in all major browsers \n            //  (https://github.com/w3c/csswg-drafts/issues/6867)\n            // https://developer.mozilla.org/en-US/docs/Web/CSS/:empty\n            const assignedNodes = slot.assignedNodes();\n            if (assignedNodes.length > 0) {\n                this.el.shadowRoot.querySelector('.text').classList.remove('hidden');\n            } else {\n                this.el.shadowRoot.querySelector('.text').classList.add('hidden');\n            }\n        }\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input\n                        onBlur={this.handleBlur.bind(this)}\n                        onChange={this.handleChange.bind(this)}\n                        onFocus={this.handleFocus.bind(this)}\n                        onClick={this.handleInputClick.bind(this)}\n                        checked={this.checked}\n                        class=\"wcs-checkbox\"\n                        type=\"checkbox\"\n                        ref={(el) => (this.nativeInput = el)}\n                        name={this.name}\n                        disabled={this.disabled}\n                        id={this.name}\n                        {...this.inheritedAttributes}\n                    ></input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot onSlotchange={(_) => this.onSlotChange()} />\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"]}

package/dist/collection/components/com-nav/com-nav.js

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

package/dist/collection/components/com-nav-category/com-nav-category.js

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

package/dist/collection/components/com-nav-item/com-nav-item.css

@@ -49,7 +49,8 @@
 :host ::slotted(a:focus-visible) {
   outline: none;
 }
-:host :host(:focus-within) {
+
+: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;

package/dist/collection/components/com-nav-item/com-nav-item.js

@@ -12,7 +12,7 @@ export class ComNavItem {
         this.wcsClickOnFinalAction.emit();
     }
     render() {
-        return (h(Host, { key: 'ebafe8ee7fa4dfb839095a00119b1fb60ec9f61f', role: "listitem" }, h("slot", { key: '4dd33801a76cd03665c107afb6a1640f2843d3cd' }), h("span", { key: 'a9fe68e0e7b0e4221ba6b1a6b3e6802876082ce4', class: "arrow-container" }, h("span", { key: 'b0d3aa7fbfb967e7910ea6f446e1dd0489d39265', "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))));
+        return (h(Host, { key: '25690c3eecac76d2b29b0aeda90f5e1bf5fd0b22', role: "listitem" }, h("slot", { key: '236d67ffd9fefb7650d2b67cee685852030adb4b' }), h("span", { key: '2ef478d77dc28d169817500145c8d9df525bd439', class: "arrow-container" }, h("span", { key: '0fafbba11e817663ad7e18ff6947cdbd07494f69', "aria-hidden": "true", class: "arrow-icon" }, "\uF107"))));
     }
     static get is() { return "wcs-com-nav-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/com-nav-submenu/com-nav-submenu.js

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

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

@@ -1,6 +1,2 @@
-export const WcsCounterSizeValues = ['m', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
-export function isWcsCounterSize(size) {
-    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues
-    return WcsCounterSizeValues.includes(size);
-}
+export {};
 //# sourceMappingURL=counter-interface.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"counter-interface.js","sourceRoot":"","sources":["../../../src/components/counter/counter-interface.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,GAAG,EAAE,GAAG,CAAU,CAAC,CAAC,iGAAiG;AAI1J,MAAM,UAAU,gBAAgB,CAAC,IAAY;IACzC,0EAA0E;IAC1E,OAAO,oBAAoB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC/C,CAAC","sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface CounterChangeEventDetail {\n    value: number;\n}\n\nexport const WcsCounterSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsCounterSize = Extract<WcsSize, typeof WcsCounterSizeValues[number]>;\n\nexport function isWcsCounterSize(size: string): size is WcsCounterSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsCounterSizeValues.includes(size);\n}\n"]}
+{"version":3,"file":"counter-interface.js","sourceRoot":"","sources":["../../../src/components/counter/counter-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface CounterChangeEventDetail {\n    value: number;\n}\n\nexport type WcsCounterSize = Extract<WcsSize, 'm' | 'l'>;\n"]}

package/dist/collection/components/counter/counter.css

@@ -44,11 +44,14 @@
   --wcs-counter-padding-m: var(--wcs-semantic-spacing-small);
   --wcs-counter-padding-l: var(--wcs-semantic-spacing-base);
   --wcs-counter-background-color: var(--wcs-semantic-color-background-surface-secondary);
-  --wcs-counter-gap: var(--wcs-counter-gap-size-m);
   --wcs-counter-gap-size-m: calc(1.5 * var(--wcs-semantic-spacing-base));
   --wcs-counter-gap-size-l: calc(2 * var(--wcs-semantic-spacing-base));
   --wcs-counter-outline-color-focus: var(--wcs-semantic-color-border-focus-base);
   --wcs-counter-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);
+  --wcs-counter-padding: var(--wcs-counter-padding-m);
+  --wcs-counter-height: var(--wcs-counter-height-m);
+  --wcs-counter-font-size: var(--wcs-counter-font-size-m);
+  --wcs-counter-gap: var(--wcs-counter-gap-size-m);
   display: flex;
 }
 :host .counter {
@@ -68,6 +71,9 @@
   background-clip: padding-box;
   gap: var(--wcs-counter-gap);
 }
+:host .counter:focus-within {
+  outline: none;
+}
 :host .counter:has(.current-value:focus-visible) {
   outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);
   outline-offset: 0;