import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { e as exposeTypeProperty, i as isSpecTest, a as assignDescription, m as messageId } from './form.js';
import { h as danger } from './index2.js';
import { i as inheritAriaAttributes } from './attributes.js';
import { d as defineCustomElement$2 } from './pds-icon2.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 pdsSwitchCss = ":host{--sizing-input-toggle-size:calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));--pine-dimension-025:2px;--spacing-message-inline:calc(var(--pine-dimension-450) + var(--pine-dimension-150));--number-transition-timing:0.15s ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}:host(.pds-switch--error){color:var(--pine-color-text-message-danger)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--pine-color-danger)}:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked){outline-color:var(--pine-color-focus-ring-danger)}:host(.pds-switch--error) label{color:var(--color-text-error)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-neutral);border:0;border-radius:var(--pine-dimension-sm);cursor:pointer;display:inline-block;-ms-flex-negative:0;flex-shrink:0;height:var(--pine-dimension-250);margin:0;padding:0;position:relative;-webkit-transition:var(--number-transition-timing);transition:var(--number-transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--pine-dimension-450)}input::after{background:var(--pine-color-secondary);border-radius:var(--pine-border-radius-full);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);content:\"\";display:block;height:var(--sizing-input-toggle-size);inset-block-start:50%;inset-inline-start:var(--pine-dimension-025);position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:inset-inline-start var(--number-transition-timing);transition:inset-inline-start var(--number-transition-timing);width:var(--sizing-input-toggle-size)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-150)}.pds-switch--error label{color:inherit}.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-switch__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs);-webkit-margin-start:var(--spacing-message-inline);margin-inline-start:var(--spacing-message-inline);width:100%}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--spacing-message-inline);margin-block-start:var(--spacing-message-inline)}.pds-switch__message--error{color:inherit;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-switch__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}input:disabled{background-color:var(--pine-color-neutral-disabled);cursor:not-allowed}input:disabled~label{cursor:initial}input:disabled:hover::after{background-color:var(--pine-color-secondary)}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--pine-color-neutral-hover)}input:focus-visible:not(:disabled){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}input:checked::after{inset-inline-start:calc(100% - var(--sizing-input-toggle-size) - var(--pine-dimension-025))}input:checked:not(:disabled){background-color:currentColor;color:var(--pine-color-accent)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--pine-color-accent-hover)}";

const PdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PdsSwitch extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
        this.pdsSwitchChange = createEvent(this, "pdsSwitchChange", 7);
        this.inheritedAttributes = {};
        this._type = 'checkbox';
        /**
         * Determines the input 'checked' state.
         */
        this.checked = false;
        /**
         * Determines the input 'disabled' state, preventing user interaction.
         */
        this.disabled = false;
        /**
         * Determines the input 'invalid' state, signifying an error is present.
         */
        this.invalid = false;
        /**
         * Determines the 'required' state of the input.
         */
        this.required = false;
        this.onSwitchUpdate = (e) => {
            if (this.disabled)
                return;
            const input = e.target;
            this.checked = input.checked;
            this.updateFormValue();
            this.pdsSwitchChange.emit(e);
        };
        this.switchClassNames = () => {
            let switchClasses = `pds-switch`;
            if (this.invalid === true) {
                switchClasses += " pds-switch--error";
            }
            if (this.helperMessage !== undefined) {
                switchClasses += " pds-switch--message";
            }
            return switchClasses;
        };
    }
    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
        exposeTypeProperty(this.el, () => this._type);
    }
    componentDidLoad() {
        this.updateFormValue();
    }
    checkedChanged() {
        this.updateFormValue();
    }
    updateFormValue() {
        if (isSpecTest())
            return;
        if (this.internals && this.internals.setFormValue) {
            // For switches, 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 switches, restore if the value exists in FormData
            const value = this.value || 'on';
            this.checked = state.get(this.name || this.componentId) === value;
        }
        else if (typeof state === 'string') {
            // Restore from string state
            this.checked = state === (this.value || 'on');
        }
    }
    componentWillLoad() {
        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
    }
    render() {
        return (h(Host, { key: '96ee8c40c04e95b461ba2942b740503897a56b27', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '441d6854f2c0b02ecf3d874198b3e0636d68c83b', htmlFor: this.componentId }, h("input", Object.assign({ key: 'a26cd5fb407abc20da3e9dcfe0e52333690b783a', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '5762c48f481c5c5d7b62e8dab40579a4e7ff290b', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
            h("div", { key: '64c14b8833b45b4e9efb2f76faa47f0d24127c91', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
            h("div", { key: 'cecd2e8da713e74b8e6b528b50733015f5d5069b', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '3a1c8f87b3909cdad1bc680931f5521ecb77acd6', icon: danger, size: "small" }), this.errorMessage)));
    }
    static get formAssociated() { return true; }
    get el() { return this; }
    static get watchers() { return {
        "checked": ["checkedChanged"]
    }; }
    static get style() { return labelCss + pdsSwitchCss; }
}, [321, "pds-switch", {
        "componentId": [1, "component-id"],
        "checked": [1028],
        "disabled": [4],
        "errorMessage": [1, "error-message"],
        "hideLabel": [4, "hide-label"],
        "helperMessage": [1, "helper-message"],
        "invalid": [4],
        "label": [1],
        "name": [1],
        "required": [4],
        "value": [1]
    }, undefined, {
        "checked": ["checkedChanged"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pds-switch", "pds-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "pds-switch":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PdsSwitch$1);
            }
            break;
        case "pds-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const PdsSwitch = PdsSwitch$1;
const defineCustomElement = defineCustomElement$1;

export { PdsSwitch, defineCustomElement };
//# sourceMappingURL=pds-switch.js.map

//# sourceMappingURL=pds-switch.js.map