'use strict';

var index = require('./index-BUvWX8u2.js');
var form = require('./form-CpM5Z8q7.js');
var index$1 = require('./index-DGBoDsAL.js');
var attributes = require('./attributes-oNMnBEnP.js');

const labelCss = ":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";

const pdsCheckboxCss = ":host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-white);-webkit-border-after:var(--pine-border-width-none);border-block-end:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:\"\";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-white);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:\"\";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -60%) rotate(43deg);transform:translate(-50%, -60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host-context([dir=rtl]) input:checked::after{-webkit-transform:translate(-50%, -60%) rotate(-43deg);transform:translate(-50%, -60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}";

const PdsCheckbox = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.pdsCheckboxChange = index.createEvent(this, "pdsCheckboxChange");
        this.pdsCheckboxInput = index.createEvent(this, "pdsCheckboxInput");
        this.inheritedAttributes = {};
        this._type = 'checkbox';
        /**
         * It determines whether or not the checkbox is checked.
         */
        this.checked = false;
        this.handleCheckboxChange = (e) => {
            if (this.disabled) {
                return;
            }
            const target = e.target;
            this.checked = target.checked;
            this.updateFormValue();
            this.pdsCheckboxChange.emit({
                checked: target.checked,
                value: this.value
            });
        };
        this.handleInput = () => {
            this.pdsCheckboxInput.emit({
                checked: this.checked,
                value: this.value
            });
        };
    }
    updateIndeterminate() {
        this.indeterminate = undefined;
    }
    classNames() {
        const classNames = [];
        if (this.invalid) {
            classNames.push('is-invalid');
        }
        if (this.indeterminate) {
            classNames.push('is-indeterminate');
        }
        if (this.disabled) {
            classNames.push('is-disabled');
        }
        return classNames.join('  ');
    }
    connectedCallback() {
        // Initialize ElementInternals for form association (only once per element instance)
        if (this.el.attachInternals && !this.internals) {
            this.internals = this.el.attachInternals();
        }
        // Expose type property on the element instance to match native form element behavior
        form.exposeTypeProperty(this.el, () => this._type);
    }
    componentDidLoad() {
        this.updateFormValue();
    }
    checkedChanged() {
        this.updateFormValue();
    }
    updateFormValue() {
        if (form.isSpecTest())
            return;
        if (this.internals && this.internals.setFormValue) {
            // For checkboxes, only send the value when checked, otherwise send null
            const formValue = this.checked ? (this.value || 'on') : null;
            this.internals.setFormValue(formValue);
        }
        if (this.internals && this.internals.setValidity) {
            this.internals.setValidity({});
        }
    }
    formStateRestoreCallback(state) {
        if (state instanceof FormData) {
            // For checkboxes, restore if the value exists in FormData
            const value = this.value || 'on';
            this.checked = state.get(this.name) === value;
        }
        else if (typeof state === 'string') {
            // Restore from string state
            this.checked = state === (this.value || 'on');
        }
    }
    componentWillLoad() {
        this.inheritedAttributes = Object.assign({}, attributes.inheritAriaAttributes(this.el));
    }
    render() {
        return (index.h(index.Host, { key: 'd4a447aba6ffa638b0bf3ed7a5cfd4580168da79', class: this.classNames() }, index.h("label", { key: '75fcd32809f736f8e4f6af2021f86d2c5b7bc110', htmlFor: this.componentId }, index.h("input", Object.assign({ key: '5238103a16bc1c6baf92b5802bca17db748a14b2', type: "checkbox", "aria-describedby": form.assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), index.h("span", { key: '0a652dc44e4c35d3a5484065f140a231a0d46424', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
            index.h("div", { key: '76f40eba1d92ffcdb9946c8cc17714bda421a8a7', class: 'pds-checkbox__message', id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
            index.h("div", { key: 'ad05bf066a91bc934344c3696ec82ec6b9813c07', class: `pds-checkbox__message pds-checkbox__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '4d3f9dddea4be870323db41a6cc5d69a9be44d7d', icon: index$1.danger, size: "small" }), this.errorMessage)));
    }
    static get formAssociated() { return true; }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "checked": ["updateIndeterminate", "checkedChanged"]
    }; }
};
PdsCheckbox.style = labelCss + pdsCheckboxCss;

exports.pds_checkbox = PdsCheckbox;
//# sourceMappingURL=pds-checkbox.entry.cjs.js.map
