import { LitElement } from 'lit';
/**
 * Mixin that provides access to the Custom State API for managing component states.
 *
 * Uses ElementInternals.states (Custom State API) to manage component-specific states
 * that can be styled with the :state() pseudo-class in CSS.
 *
 * @mixin
 *
 * @example
 * ```typescript
 * // Define a component with custom states
 * class MyComponent extends ComponentStatesMixin(EventEmitterMixin(LitElement)) {
 *   someAction() {
 *     this.states.add('btu-loading')
 *     // ... do work
 *     this.states.delete('btu-loading')
 *   }
 * }
 * ```
 *
 * @example
 * ```css
 * my-component:state(btu-loading) {
 *   opacity: 0.5;
 *   pointer-events: none;
 * }
 * ```
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/:state
 */
export const ComponentStatesMixin = (superclass) => {
    class ComponentStatesMixinClass extends superclass {
        constructor() {
            super(...arguments);
            /**
             * ElementInternals provides access to internal element APIs like
             * custom states, form-associated custom elements, and accessibility semantics.
             * @internal
             */
            this.internals = this.attachInternals();
            /**
             * CustomStateSet for managing component states.
             * States can be set/unset and styled with :state() pseudo-class.
             * Components document the specific states they expose with class-level
             * `@cssstate <name>` so they surface under the "css states" table group
             * instead of as a public `states` property row.
             * @internal
             * @example
             * ```typescript
             * this.states.add('btu-error')
             * this.states.delete('btu-error')
             * this.states.has('btu-error') // boolean
             * ```
             */
            this.states = this.internals.states;
        }
    }
    return ComponentStatesMixinClass;
};
//# sourceMappingURL=ComponentStatesMixin.js.map