bromcom-ui-next 0.1.29 → 0.1.31

package/dist/collection/components/switch/switch.component.js

@@ -1,204 +1,358 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import { generateId } from "../../utils/id/generate-id";
 import { tv } from "../../utils/tv";
+import { BaseChoiceControl } from "../_shared/form/base-choice-control";
 /**
  * @component BcmSwitch
- * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.
- * Supports different sizes, label positions, error states, and accessibility features.
+ * @description
+ * A form-associated toggle switch component representing a boolean choice.
+ * It behaves like a checkbox and integrates with native HTML forms via ElementInternals.
+ *
+ * This component supports **three validation strategies** via `validation-mode`:
+ *
+ * - **`native`**:
+ *   - Uses native browser constraint validation.
+ *   - Sets the underlying input's `required` attribute.
+ *   - Browser may show the native validation bubble when the form calls `reportValidity()` / submit validation runs.
+ *
+ * - **`silent`**:
+ *   - Does **not** rely on native `required` (prevents the browser bubble).
+ *   - Computes the "missing required" state internally and exposes it via `error` + `caption`.
+ *   - UI errors are **gated**: they appear only after the control is touched or after a submit attempt.
+ *
+ * - **`none`**:
+ *   - Value-only mode (headless): participates in form value submission but never becomes invalid.
+ *
+ * ## UI error gating (silent mode)
+ * To avoid showing errors on initial render, the component tracks:
+ * - `touched`: set after the first user interaction
+ * - `submitAttempted`: set when the parent form emits `submit`
+ *
+ * Only when `touched || submitAttempted` the component will show `error/caption` in `silent` mode.
+ *
+ * ## Value behavior
+ * - When checked, the component submits its `value` (default: `"on"`).
+ * - When unchecked, no value is submitted.
+ * - When disabled, the component does not participate in submission or validity.
  *
  * @example Basic usage
- * <bcm-switch label="Enable notifications"></bcm-switch>
+ * <bcm-switch name="newsletter" label="Receive newsletter?" />
+ *
+ * @example Required with silent validation (no native bubble)
+ * <form>
+ *   <bcm-switch
+ *     name="terms"
+ *     label="Accept terms"
+ *     required
+ *     validation-mode="silent">
+ *   </bcm-switch>
+ *   <button type="submit">Submit</button>
+ * </form>
  *
- * @example With error state
- * <bcm-switch
- *   label="Accept terms"
- *   error={true}
- *   caption="You must accept the terms to continue">
- * </bcm-switch>
+ * @example Native validation mode (may show native bubble)
+ * <bcm-switch name="terms" label="Accept terms" required validation-mode="native" />
  *
- * @example Disabled state
- * <bcm-switch
- *   label="Advanced features"
- *   disabled={true}>
- * </bcm-switch>
+ * @example Value-only mode (no validation)
+ * <bcm-switch name="analytics" label="Allow analytics" validation-mode="none" />
  *
- * @example With custom size and label position
- * <bcm-switch
- *   label="Dark mode"
- *   size="large"
- *   labelPosition="left">
- * </bcm-switch>
+ * @csspart base - Root container
+ * @csspart switch-wrapper - Wrapper containing label + track
+ * @csspart input - Hidden native input
+ * @csspart label - Text label
+ * @csspart dot-container - Switch track
+ * @csspart dot - Switch knob
+ * @csspart caption - Helper/error text
  */
-export class BcmSwitch {
+export class BcmSwitch extends BaseChoiceControl {
     constructor() {
-        /** Whether the switch is checked or not */
-        this.checked = false;
-        /** Whether the switch is disabled */
-        this.disabled = false;
-        /** Position of the label relative to the switch */
-        this.labelPosition = 'right';
-        /** Whether to display the switch in an error state */
+        super();
+    }
+    el;
+    internals;
+    /** Unique id (optional). Generated by default. */
+    _id = generateId('bcm-switch');
+    /** Visible label text */
+    label;
+    /** Position of the label relative to the switch */
+    labelPosition = 'right';
+    /** Visual error state (manual/external). In silent mode this can be auto-managed. */
+    error = false;
+    /** Helper / error text shown under the switch */
+    caption;
+    /** Size variant */
+    size = 'medium';
+    /** Internal checked mirror for UI (kept to preserve old DOM/class behavior) */
+    internalChecked = false;
+    /** Gate for silent-mode error UI */
+    touched = false;
+    /** Gate for silent-mode error UI */
+    submitAttempted = false;
+    /** Emitted when the switch toggles */
+    bcmSwitchChange;
+    inputEl;
+    // --------------------------------------------------
+    // Lifecycle
+    // --------------------------------------------------
+    componentWillLoad() {
+        this.internalChecked = !!this.checked;
+        this.updateFormValueAndValidity({ setUi: false });
+    }
+    componentDidLoad() {
+        this.syncNativeInput();
+        const form = this.internals?.form;
+        if (form) {
+            // capture = true: ensures we hear submit early
+            form.addEventListener('submit', this.onFormSubmit, true);
+        }
+    }
+    disconnectedCallback() {
+        const form = this.internals?.form;
+        if (form) {
+            form.removeEventListener('submit', this.onFormSubmit, true);
+        }
+    }
+    onFormSubmit = () => {
+        this.submitAttempted = true;
+        this.updateFormValueAndValidity({ setUi: true });
+    };
+    formResetCallback() {
+        super.formResetCallback();
+        this.internalChecked = false;
+        // reset gating
+        this.touched = false;
+        this.submitAttempted = false;
+        // reset UI
         this.error = false;
-        /** Size variant of the switch */
-        this.size = 'medium';
-        /** Whether the switch is in readonly mode */
-        this.readonly = false;
-        /** Whether the switch is required in a form */
-        this.required = false;
-        this.switchId = generateId('switch');
-        this.switchStyle = () => {
-            const defaultStyle = {
-                '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',
-                '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',
-                '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',
-            };
-            const checkedStyle = {
-                '--switch-bg': 'var(--bcm-ui-color-background-info-default)',
-                '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',
-            };
-            const errorStyle = {
-                '--switch-bg': 'var(--bcm-ui-color-background-error-default)',
-                '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',
-            };
-            const readonlyStyle = {
-                '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',
-                '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',
-                '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',
-            };
-            const disabledStyle = {
-                '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',
-                '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',
-                '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',
-            };
-            return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultStyle), (this.checked && checkedStyle)), (this.error && errorStyle)), (this.readonly && readonlyStyle)), (this.disabled && disabledStyle));
+        this.caption = undefined;
+        this.syncNativeInput();
+        this.updateFormValueAndValidity({ setUi: false });
+    }
+    // --------------------------------------------------
+    // Watchers
+    // --------------------------------------------------
+    onBaseCheckedChange(newVal) {
+        this.internalChecked = !!newVal;
+        this.syncNativeInput();
+    }
+    // --------------------------------------------------
+    // Native sync
+    // --------------------------------------------------
+    syncNativeInput() {
+        if (!this.inputEl)
+            return;
+        this.inputEl.checked = this.internalChecked;
+        this.inputEl.disabled = this.disabled;
+        // ✅ Prevent native validation bubble in silent/none:
+        // only native mode applies native "required"
+        this.inputEl.required = this.validationMode === 'native' && this.required;
+    }
+    // --------------------------------------------------
+    // Form internals
+    // --------------------------------------------------
+    updateFormValueAndValidity(opts) {
+        const setUi = opts?.setUi ?? true;
+        if (!this.internals)
+            return;
+        // Disabled -> no value, no validity, no UI errors
+        if (this.disabled) {
+            this.internals.setFormValue(null);
+            this.internals.setValidity({});
+            if (setUi) {
+                this.error = false;
+                this.caption = undefined;
+            }
+            return;
+        }
+        // Always set submitted value (even if validation is off)
+        const formValue = this.checked ? this.value ?? 'on' : null;
+        this.internals.setFormValue(formValue);
+        // none -> never invalid
+        if (this.validationMode === 'none') {
+            this.internals.setValidity({});
+            if (setUi) {
+                this.error = false;
+                this.caption = undefined;
+            }
+            return;
+        }
+        const isMissing = this.required && !this.checked;
+        // silent -> no validity, only gated UI
+        if (this.validationMode === 'silent') {
+            this.internals.setValidity({});
+            if (setUi) {
+                const shouldShow = this.touched || this.submitAttempted;
+                this.error = shouldShow && isMissing;
+                this.caption = shouldShow && isMissing ? 'This field is required' : undefined;
+            }
+            return;
+        }
+        // native -> real validity participation
+        if (isMissing) {
+            this.internals.setValidity({ valueMissing: true }, 'This field is required', this.inputEl ?? undefined);
+            // native mode uses browser UI; don't double-show component UI
+            if (setUi) {
+                this.error = false;
+                this.caption = undefined;
+            }
+            return;
+        }
+        this.internals.setValidity({});
+        if (setUi) {
+            this.error = false;
+            this.caption = undefined;
+        }
+    }
+    // --------------------------------------------------
+    // Interaction
+    // --------------------------------------------------
+    toggleSwitch = () => {
+        if (this.disabled || this.readonly)
+            return;
+        if (!this.touched)
+            this.touched = true;
+        this.toggleChecked(); // base toggler updates `checked`
+        this.internalChecked = !!this.checked;
+        this.syncNativeInput();
+        this.updateFormValueAndValidity({ setUi: true });
+        this.bcmSwitchChange.emit(this.checked);
+    };
+    // --------------------------------------------------
+    // Styles
+    // --------------------------------------------------
+    switchStyle = () => {
+        const defaultStyle = {
+            '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',
+            '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',
+            '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',
         };
-        this.switchClass = tv({
-            slots: {
-                base: 'bcm-ui-element flex flex-col',
-                switchWrapper: 'flex items-center group',
-                dotContainer: 'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',
-                dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',
-                caption: '!text-color-error font-normal',
-                label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',
-            },
-            variants: {
-                size: {
-                    small: {
-                        dotContainer: 'w-8 h-4',
-                        dot: 'size-3',
-                        label: 'text-size-4',
-                        caption: 'text-size-3',
-                        switchWrapper: 'gap-2',
-                        base: 'gap-0.5',
-                    },
-                    medium: {
-                        dotContainer: 'w-9 h-[1.125rem]',
-                        dot: 'size-3.5',
-                        label: 'text-size-5',
-                        caption: 'text-size-4',
-                        switchWrapper: 'gap-2.5',
-                        base: 'gap-1',
-                    },
-                    large: {
-                        dotContainer: 'w-10 h-5',
-                        dot: 'size-4',
-                        label: 'text-size-6',
-                        caption: 'text-size-5',
-                        switchWrapper: 'gap-3',
-                        base: 'gap-2',
-                    },
-                },
-                labelPosition: {
-                    left: {
-                        label: '',
-                    },
-                    right: {
-                        label: 'order-2',
-                    },
-                },
-                checked: {
-                    true: {
-                        dot: '',
-                    },
-                    false: {
-                        dot: 'left-0.5',
-                    },
-                },
-                disabled: {
-                    true: '',
-                    false: {
-                        switchWrapper: '',
-                    },
-                },
-                readonly: {
-                    true: {
-                        switchWrapper: 'cursor-default',
-                        dotContainer: 'cursor-default',
-                        dot: 'cursor-default',
-                    },
-                    false: {
-                        switchWrapper: 'cursor-pointer',
-                        dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',
-                    },
+        const checkedStyle = {
+            '--switch-bg': 'var(--bcm-ui-color-background-info-default)',
+            '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',
+        };
+        const errorStyle = {
+            '--switch-bg': 'var(--bcm-ui-color-background-error-default)',
+            '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',
+        };
+        const readonlyStyle = {
+            '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',
+            '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',
+            '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',
+        };
+        const disabledStyle = {
+            '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',
+            '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',
+            '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',
+        };
+        return {
+            ...defaultStyle,
+            ...(this.internalChecked && checkedStyle),
+            ...(this.error && errorStyle),
+            ...(this.readonly && readonlyStyle),
+            ...(this.disabled && disabledStyle),
+        };
+    };
+    switchClass = tv({
+        slots: {
+            base: 'bcm-ui-element flex flex-col',
+            switchWrapper: 'flex items-center group',
+            dotContainer: 'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',
+            dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',
+            caption: '!text-color-error font-normal',
+            label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',
+        },
+        variants: {
+            size: {
+                small: {
+                    dotContainer: 'w-8 h-4',
+                    dot: 'size-3',
+                    label: 'text-size-4',
+                    caption: 'text-size-3',
+                    switchWrapper: 'gap-2',
+                    base: 'gap-0.5',
+                },
+                medium: {
+                    dotContainer: 'w-9 h-[1.125rem]',
+                    dot: 'size-3.5',
+                    label: 'text-size-5',
+                    caption: 'text-size-4',
+                    switchWrapper: 'gap-2.5',
+                    base: 'gap-1',
+                },
+                large: {
+                    dotContainer: 'w-10 h-5',
+                    dot: 'size-4',
+                    label: 'text-size-6',
+                    caption: 'text-size-5',
+                    switchWrapper: 'gap-3',
+                    base: 'gap-2',
                 },
             },
-            compoundVariants: [
-                {
-                    size: 'small',
-                    checked: true,
-                    class: {
-                        dot: 'left-[1.125rem]',
-                    },
-                },
-                {
-                    size: 'medium',
-                    checked: true,
-                    class: {
-                        dot: 'left-[1.25rem]',
-                    },
+            labelPosition: {
+                left: { label: '' },
+                right: { label: 'order-2' },
+            },
+            checked: {
+                true: { dot: '' },
+                false: { dot: 'left-0.5' },
+            },
+            disabled: {
+                true: '',
+                false: { switchWrapper: '' },
+            },
+            readonly: {
+                true: {
+                    switchWrapper: 'cursor-default',
+                    dotContainer: 'cursor-default',
+                    dot: 'cursor-default',
                 },
-                {
-                    size: 'large',
-                    checked: true,
-                    class: {
-                        dot: 'left-[1.375rem]',
-                    },
+                false: {
+                    switchWrapper: 'cursor-pointer',
+                    dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',
                 },
-                {
-                    readonly: false,
-                    disabled: false,
-                    class: {
-                        dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',
-                    },
+            },
+        },
+        compoundVariants: [
+            { size: 'small', checked: true, class: { dot: 'left-[1.125rem]' } },
+            { size: 'medium', checked: true, class: { dot: 'left-[1.25rem]' } },
+            { size: 'large', checked: true, class: { dot: 'left-[1.375rem]' } },
+            {
+                readonly: false,
+                disabled: false,
+                class: {
+                    dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',
                 },
-            ],
-        });
-    }
-    toggleSwitch() {
-        if (this.disabled || this.readonly)
-            return;
-        this.checked = !this.checked;
-        this.bcmSwitchChange.emit(this.checked);
-    }
+            },
+        ],
+    });
+    // --------------------------------------------------
+    // Render
+    // --------------------------------------------------
     render() {
         const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({
             size: this.size,
-            checked: this.checked,
+            checked: this.internalChecked,
             disabled: this.disabled,
             labelPosition: this.labelPosition,
             readonly: this.readonly,
         });
-        const ariaAttributes = Object.assign({ 'role': 'switch', 'aria-checked': this.checked.toString(), 'aria-disabled': this.disabled.toString(), 'aria-readonly': this.readonly.toString() }, (this.required && { 'aria-required': 'true' }));
+        const ariaAttributes = {
+            role: 'switch',
+            'aria-checked': this.internalChecked.toString(),
+            'aria-disabled': this.disabled.toString(),
+            'aria-readonly': this.readonly.toString(),
+            ...(this.required && { 'aria-required': 'true' }),
+        };
         const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};
-        return (h("div", { key: 'df4d735b04edd9a31d8bcf04ea875741220b3cfc', class: base() }, h("label", { key: 'da8ea3a6b667a2699b08d2d93907aede1d23004c', class: switchWrapper(), style: this.switchStyle() }, h("input", { key: 'a34281d25fc5896b48d1f7698d596039cc9fa392', id: this.switchId, type: "checkbox", class: "hidden peer", checked: this.checked, name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onChange: () => this.toggleSwitch() }), this.label && (h("span", { key: 'ba7fe6a0635ac7598632bf6b2ffcaf9f0208bd4b', class: label() }, h("slot", { key: '35eace6c1d6ba0e596fd13397eea998dc1b5bc00' }, this.label))), h("label", Object.assign({ key: 'b83f4d773036ba32a4918c8961994b1a158d4ba3', htmlFor: this.switchId, class: dotContainer() }, tabIndexAttr, ariaAttributes, { onKeyDown: event => {
+        return (h("div", { key: '7398b102be2bf2ec21819e5db830472fc52da2c3', class: base(), part: "base" }, h("label", { key: 'd5e1062eb9481fdd57c5ef3484ad12a87f576fc8', class: switchWrapper(), style: this.switchStyle(), part: "switch-wrapper" }, h("input", { key: '0e64cc95da9426452b49a1d0b5c18643c6d4653d', id: this._id, type: "checkbox", class: "sr-only peer", checked: this.internalChecked, name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, onChange: this.toggleSwitch, ref: el => (this.inputEl = el), part: "input" }), this.label && (h("span", { key: '975eb8f7f61105f7597b991a340c16cef4c7ac16', class: label(), part: "label" }, h("slot", { key: 'a1b3f8c8b070fe22496f0db969a1a769be5b96f1' }, this.label))), h("label", { key: 'f2c720d7ba6715b6d91a821832bae9cb95bbebd8', htmlFor: this._id, class: dotContainer(), ...tabIndexAttr, ...ariaAttributes, part: "dot-container", onKeyDown: event => {
                 if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {
                     event.preventDefault();
                     this.toggleSwitch();
                 }
-            } }), h("div", { key: '2f15642e8af847b0c596d21358f52334b86e00b1', class: dot() }))), this.error && this.caption && h("span", { key: '3f285649949035002338a232b7b9df0276cfd814', class: caption() }, this.caption), h("slot", { key: 'e0bc0b55fa00cc3520538caa79f7003d4bd5266f', name: "caption" })));
+            } }, h("div", { key: 'd51e6ddadff6854ebcc3b403e457c354d552dc60', class: dot(), part: "dot" }))), this.error && this.caption && (h("span", { key: '36529b1bbbe322247244e87b281d86076de75be7', class: caption(), part: "caption" }, this.caption)), h("slot", { key: '0f5b474e11fc93fddb3ff84c616c19fe57959e4b', name: "caption" })));
     }
     static get is() { return "bcm-switch"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["switch.css"]
@@ -211,68 +365,8 @@ export class BcmSwitch {
     }
     static get properties() {
         return {
-            "checked": {
-                "type": "boolean",
-                "attribute": "checked",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the switch is checked or not"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "disabled": {
-                "type": "boolean",
-                "attribute": "disabled",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the switch is disabled"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "name": {
-                "type": "string",
-                "attribute": "name",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name attribute for the hidden input element"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "value": {
+            "_id": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -280,37 +374,38 @@ export class BcmSwitch {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The value attribute for the hidden input element"
+                    "text": "Unique id (optional). Generated by default."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true,
+                "attribute": "id",
+                "defaultValue": "generateId('bcm-switch')"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Text label for the switch"
+                    "text": "Visible label text"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "labelPosition": {
                 "type": "string",
-                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'right'",
@@ -326,12 +421,12 @@ export class BcmSwitch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-position",
                 "defaultValue": "'right'"
             },
             "error": {
                 "type": "boolean",
-                "attribute": "error",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -341,17 +436,17 @@ export class BcmSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to display the switch in an error state"
+                    "text": "Visual error state (manual/external). In silent mode this can be auto-managed."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "error",
                 "defaultValue": "false"
             },
             "caption": {
                 "type": "string",
-                "attribute": "caption",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -361,15 +456,15 @@ export class BcmSwitch {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Text to display as an error message when error is true"
+                    "text": "Helper / error text shown under the switch"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "caption"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -380,55 +475,23 @@ export class BcmSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size variant of the switch"
+                    "text": "Size variant"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
-            },
-            "readonly": {
-                "type": "boolean",
-                "attribute": "readonly",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the switch is in readonly mode"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "required": {
-                "type": "boolean",
-                "attribute": "required",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the switch is required in a form"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "internalChecked": {},
+            "touched": {},
+            "submitAttempted": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bcmSwitchChange",
@@ -438,7 +501,7 @@ export class BcmSwitch {
                 "composed": false,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the switch state changes"
+                    "text": "Emitted when the switch toggles"
                 },
                 "complexType": {
                     "original": "boolean",
@@ -448,5 +511,12 @@ export class BcmSwitch {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "onBaseCheckedChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=switch.component.js.map