@xplortech/apollo-core 2.5.0 → 2.7.0

package/dist/collection/components/xpl-button/xpl-button.js

@@ -1,9 +1,15 @@
 import { Host, h } from "@stencil/core";
-export class XplButton {
+export class Button {
     constructor() {
+        this.disabled = false;
+        this.fullWidth = false;
+        this.icon = '';
+        this.iconOnly = false;
+        this.iconPosition = 'start';
+        this.isLoading = false;
+        this.sentiment = 'neutral';
         this.size = 'default';
         this.variant = 'primary';
-        this.state = 'neutral';
     }
     componentDidRender() {
         const attrs = this.el.attributes;
@@ -16,28 +22,66 @@ export class XplButton {
             return false;
         })
             .reduce((acc, k) => (Object.assign(Object.assign({}, acc), { [attrs[k].name]: attrs[k].value })), {});
-        const child = this.el.querySelector('button');
-        Object.keys(dataAttrs).forEach((k) => {
-            child.setAttribute(k, dataAttrs[k]);
-            this.el.removeAttribute(k);
-        });
+        const button = this.el.querySelector('button');
+        if (button) {
+            Object.keys(dataAttrs).forEach((k) => {
+                button.setAttribute(k, dataAttrs[k]);
+                this.el.removeAttribute(k);
+            });
+        }
+    }
+    renderIcon() {
+        if (this.icon) {
+            return h("xpl-icon", { icon: this.icon });
+        }
+        return null;
+    }
+    handleLoadingState(e) {
+        if (this.isLoading) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+        }
     }
     render() {
-        let className = `xpl-button
-                    xpl-button--${this.size}
-                    xpl-button--${this.state}
-                    xpl-button--${this.variant}`;
-        if (this.iconOnly)
-            className += ' xpl-button--icon-only';
-        if (this.fullWidth)
-            className += ' xpl-button--full-width';
-        if (this.link && this.disabled)
-            className += ' xpl-button--link-disabled';
-        return (h(Host, { key: '6def1e58f1fc0f0b1cee740c09278ab19ef77be5', class: className }, this.link ? (h("slot", null)) : (h("button", { disabled: this.disabled, name: this.name, type: this.type, value: this.value, form: this.form }, h("slot", null)))));
+        var _a;
+        return (h(Host, { key: 'dc9baff2fca5d300d4f10d854669fe44ce9dcf2b', class: {
+                'xpl-button': true,
+                [`xpl-button--${this.size}`]: true,
+                [`xpl-button--${this.variant}`]: true,
+                [`xpl-button--${this.state ? this.state : this.sentiment}`]: true,
+                [this.icon ? `xpl-button__icon-position--${this.iconPosition}` : '']: !!this.icon,
+                'xpl-button--full-width': this.fullWidth,
+                'xpl-button--icon-only': this.iconOnly,
+                'xpl-button--disabled': this.disabled,
+                'xpl-button--loading': this.isLoading && !this.link,
+            } }, this.link ? (h("slot", null)) : (h("button", Object.assign({}, ((_a = this.controlAttrs) !== null && _a !== void 0 ? _a : {}), { disabled: this.disabled, onClick: (e) => this.handleLoadingState(e), type: this.isLoading &&
+                (this.type === 'submit' ||
+                    this.type === 'reset' ||
+                    this.type === undefined)
+                ? 'button'
+                : this.type, name: this.name, value: this.value, form: this.form, "aria-busy": this.isLoading ? 'true' : undefined }), this.icon && h("span", { class: "xpl-button__icon" }, this.renderIcon()), h("slot", null), this.isLoading && (h("span", { class: "xpl-button__loading-overlay", "aria-hidden": "true" }, h("span", { class: "xpl-button__loading-spinner" }, h("xpl-icon", { icon: "loader-4" }))))))));
     }
     static get is() { return "xpl-button"; }
     static get properties() {
         return {
+            "controlAttrs": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\n        id?: string;\n        role?: string;\n        'aria-controls'?: string;\n        'aria-selected'?: 'true' | 'false';\n        'aria-current'?: string;\n    }",
+                    "resolved": "{ id?: string; role?: string; 'aria-controls'?: string; 'aria-selected'?: \"true\" | \"false\"; 'aria-current'?: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attributes to apply to the inner native `<button>` (e.g., tab a11y wiring).\nUse this instead of setting `id` / `role` / `aria-*` on the host when the\ninner control is the element that needs them (e.g., WAI-ARIA composite widgets)."
+                },
+                "getter": false,
+                "setter": false
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -47,17 +91,37 @@ export class XplButton {
                     "references": {}
                 },
                 "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether button should be disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "whether button should be disabled"
+                    "text": "An optional form attribute for the button if type is submit"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled"
+                "attribute": "form"
             },
-            "link": {
+            "fullWidth": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -66,15 +130,36 @@ export class XplButton {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "whether button should yield a slot for a link tag"
+                    "text": "Whether the button should be of full width as per parent container."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "link"
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to render - icon name as string (from xpl-icon library)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
             },
             "iconOnly": {
                 "type": "boolean",
@@ -85,17 +170,58 @@ export class XplButton {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "whether button should render icon only"
+                    "text": "When true, the button renders in icon-only circular style. Use for icon-only buttons."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon-only"
+                "attribute": "icon-only",
+                "defaultValue": "false"
             },
-            "fullWidth": {
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon position relative to slot content. Ignored if no icon is provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "'start'"
+            },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, shows a loading overlay with spinner over the button. Button is non-interactive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-loading",
+                "defaultValue": "false"
+            },
+            "link": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -107,12 +233,12 @@ export class XplButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "whether button should render with full width"
+                    "text": "whether button should yield a slot for a link tag"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "full-width"
+                "attribute": "link"
             },
             "name": {
                 "type": "string",
@@ -125,151 +251,133 @@ export class XplButton {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{string} - button name attribute"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Name of the button, submitted with form data. Passed through to the native button element."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "name"
             },
-            "size": {
+            "sentiment": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'sm' | 'xs'",
-                    "resolved": "\"default\" | \"sm\" | \"xs\"",
+                    "original": "'neutral' | 'negative' | 'positive'",
+                    "resolved": "\"negative\" | \"neutral\" | \"positive\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{\"default\" | \"sm\" | \"xs\"} - button size"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Sentiment of the button, which applies different color schemes to indicate purpose/intent."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "size",
-                "defaultValue": "'default'"
+                "attribute": "sentiment",
+                "defaultValue": "'neutral'"
             },
-            "type": {
+            "size": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'submit' | 'reset' | 'button'",
-                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "original": "'default' | 'xs' | 'sm'",
+                    "resolved": "\"default\" | \"sm\" | \"xs\"",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{\"submit\" | \"reset\" | \"button\"} - button type attribute"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Button size. Use 'default', 'xs' (extra small), or 'sm' (small)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "type"
+                "attribute": "size",
+                "defaultValue": "'default'"
             },
-            "value": {
+            "state": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'neutral' | 'warning' | 'success'",
+                    "resolved": "\"neutral\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "property",
-                            "text": "{string} - button value attribute"
+                            "name": "deprecated",
+                            "text": ": Use `sentiment` with values \"neutral\", \"negative\", \"positive\" instead of `state` ."
                         }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value"
+                "attribute": "state"
             },
-            "variant": {
+            "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'subtle'",
-                    "resolved": "\"primary\" | \"secondary\" | \"subtle\"",
+                    "original": "'submit' | 'reset' | 'button'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{\"primary\" | \"secondary\" | \"subtle\"} - button variant"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "HTML button type attribute."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "variant",
-                "defaultValue": "'primary'"
+                "attribute": "type"
             },
-            "state": {
+            "value": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'neutral' | 'warning' | 'success'",
-                    "resolved": "\"neutral\" | \"success\" | \"warning\"",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{\"neutral\" | \"warning\" | \"success\"} - button state (color) neutral=purple, success=green, warning=red"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Value of the button, submitted with form data. Passed through to the native button element."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "state",
-                "defaultValue": "'neutral'"
+                "attribute": "value"
             },
-            "form": {
+            "variant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'primary' | 'secondary' | 'tertiary' | 'subtle'",
+                    "resolved": "\"primary\" | \"secondary\" | \"subtle\" | \"tertiary\"",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{string} - An optional form attribute for the button if type is submit"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Button variant/style. Use \"primary\", \"secondary\", \"tertiary\" for new usage. \"subtle\" is deprecated but still supported for backward compatibility."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "form"
+                "attribute": "variant",
+                "defaultValue": "'primary'"
             }
         };
     }

package/dist/collection/components/xpl-button-row/xpl-button-row.js

@@ -1,12 +1,12 @@
 import { Host, h } from "@stencil/core";
-export class XplButtonRow {
+export class ButtonRow {
     constructor() {
         this.onPrimary = () => this.clickPrimary.emit();
         this.onSecondary = () => this.clickSecondary.emit();
         this.onTertiary = () => this.clickTertiary.emit();
     }
     render() {
-        return (h(Host, { key: 'c1d468abe10991fb2de71dd01daba53b00ad088d', class: "xpl-button-row" }, h("div", { key: '102e327fea3824fffb0f04bd7d91e5615aca86e3', class: "xpl-button-row-inner" }, h("div", { key: '745044b4b26b0a368ca5aec8b440ebdaa9677e2b', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: 'e895967af49c96eb3a3e98b24c0d10b30951bb7b', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: 'd35ad947185a638f2f03530ae50a349cebbe5855', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: 'f25895afa16581325345f619085adee0cf092ee5', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: '8f606ced48a532bb1abaf20a7bc9dc570feb7d21', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: 'b6837c20a4adc3af10d4fd6724e226efd1d307ff', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (h(Host, { key: 'e27ee4f9278fe24ab710504fc5a83b4b92b74607', class: "xpl-button-row" }, h("div", { key: 'e7ea1f3ef4dd52fd3026e47679f1e2663f315a98', class: "xpl-button-row-inner" }, h("div", { key: 'da4ccf63f6f00d83f829fb7cf1e2d20c76cffa33', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: 'cb3d7caeba1d66f0f752e19b33a31d627bc26911', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: 'c7342cf52d016482c2ab8e33ecd8c3616061c107', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: '1ed372cc087ef1a0c650282f90aa0117b35745bc', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: '56d88d07742c5e2900831f3a1ecf026d05299632', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: '5bd13162e70b4fc59996b62f507cfc2d4e7418d7', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
     }
     static get is() { return "xpl-button-row"; }
     static get properties() {

package/dist/collection/components/xpl-calendar/calendar.stories.js

@@ -56,4 +56,8 @@ Calendar.parameters = {
             </div>
         `)(),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=21578-117377&p=f&t=aZipOZlFAFwtMW1r-11',
+    },
 };

package/dist/collection/components/xpl-calendar/xpl-calendar.js

@@ -4,7 +4,7 @@ import flatpickr from "flatpickr";
 const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${rotate
     ? 'M0.557948 5.6813L6.06209 0.132167C6.23831 -0.0440556 6.52327 -0.0440556 6.69949 0.132167L7.44187 0.874551C7.61809 1.05077 7.61809 1.33573 7.44187 1.51195L2.99882 6L7.44187 10.488C7.61809 10.6643 7.61809 10.9492 7.44187 11.1254L6.69949 11.8678C6.52327 12.0441 6.23831 12.0441 6.06209 11.8678L0.557948 6.3187C0.381726 6.14248 0.381726 5.85752 0.557948 5.6813Z'
     : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'}" /></svg>`;
-export class XplCalendar {
+export class Calendar {
     constructor() {
         this.inputId = uuid();
         this.dateFormat = 'Y-m-d';
@@ -52,7 +52,7 @@ export class XplCalendar {
         }
     }
     render() {
-        return (h(Host, { key: 'fb4c58e9ddbf919c96d99b2f9433f1e9ffb9f4df', class: "xpl-calendar" }, h("input", { key: '764bc9e43533f1bf921e586ff05a11d102b9015a', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+        return (h(Host, { key: '6f3d6abc79ea25a9f80d8fa15279fda6b4ba5d81', class: "xpl-calendar" }, h("input", { key: '57f4be2ffc9d40943d20f7325cad1f81b0addedb', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
                 this.inputElement = el;
             } })));
     }

package/dist/collection/components/xpl-checkbox/checkbox.stories.js

@@ -76,4 +76,8 @@ Checkbox.parameters = {
             `;
         })(Checkbox.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=3915-91031&p=f&t=aZipOZlFAFwtMW1r-11',
+    },
 };

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

@@ -1,8 +1,9 @@
 import { Host, h } from "@stencil/core";
 import { v4 as uuid } from "uuid";
-export class XplCheckbox {
+export class Checkbox {
     constructor() {
         this.id = uuid();
+        this.ariaLabel = '';
         this.onChange = (event) => {
             const target = event.target;
             if (this.value) {
@@ -14,14 +15,15 @@ export class XplCheckbox {
         };
     }
     render() {
-        return (h(Host, { key: '00250685fca2e8158973a57947ec1ae390b556c4', class: {
+        var _a;
+        return (h(Host, { key: '278efc899d85f3c69d78eae9c893dd95a5c1a0fe', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: 'ead56008991620c8e6c612ee1e6d299a3a88c6d2', class: "xpl-checkbox", type: "checkbox", checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: 'd336163f57e12ac87b1f29da074c66ef1e600a95', class: {
+            } }, h("input", { key: '40ff6da70e68b75c0fda7df23eccfd04c152a4e1', class: "xpl-checkbox", type: "checkbox", "aria-label": ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: '19ebb91dfdb4514b563bb20b7fa2ca06294d2d45', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: 'c317e0a1f2e2ac2e63f95d268443d5ff0c53eb5e' }), this.description && (h("small", { key: 'f6031a5c9db67dbe8bb94f396da56fb7dd28fea4', class: {
+            }, htmlFor: this.id }, h("slot", { key: 'ceb7f27e19f4256b3c5317e17f4bb8512c6962a6' }), this.description && (h("small", { key: '78a5d2ac044006361a8ce075a2ad8d872f384203', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));
@@ -29,6 +31,26 @@ export class XplCheckbox {
     static get is() { return "xpl-checkbox"; }
     static get properties() {
         return {
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the native checkbox input (sets `aria-label` on the `input`).\nUse when there is no visible label text in the default slot.\nDefaults to `''`; empty or whitespace-only values omit `aria-label` on the input so a visible `<label>` remains the sole name source."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "''"
+            },
             "checked": {
                 "type": "boolean",
                 "mutable": false,
@@ -48,6 +70,25 @@ export class XplCheckbox {
                 "reflect": false,
                 "attribute": "checked"
             },
+            "dataId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A custom data attribute for the checkbox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data-id"
+            },
             "description": {
                 "type": "string",
                 "mutable": false,
@@ -124,25 +165,6 @@ export class XplCheckbox {
                 "reflect": false,
                 "attribute": "name"
             },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The value attribute for the checkbox input.\n(submittted in form as name/value pair)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value"
-            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -181,7 +203,7 @@ export class XplCheckbox {
                 "reflect": false,
                 "attribute": "styled"
             },
-            "dataId": {
+            "value": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -193,12 +215,12 @@ export class XplCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A custom data attribute for the checkbox"
+                    "text": "The value attribute for the checkbox input.\n(submittted in form as name/value pair)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "data-id"
+                "attribute": "value"
             }
         };
     }