/**
 * PXM Select Component
 *
 * A flexible, accessible select component that provides dropdown functionality with single
 * and multiple selection support. Bring your own styling and animation.
 * This component provides structure and behavior only - all styling is controlled by your CSS.
 *
 * Features:
 * - Single and multiple selection modes
 * - Keyboard navigation with arrow keys, home/end, enter/space, escape
 * - Type-ahead search functionality
 * - Dynamic content support (items can be added/removed after initialization)
 * - Event-driven animation system (bring your own animation library)
 * - Accessibility-first design with proper ARIA attributes
 * - Scroll lock option for modal-like behavior
 * - Grouping and labeling support
 * - Custom value display formatting
 *
 * Keyboard Navigation:
 * - `Enter` or `Space` - Open dropdown / Select focused item
 * - `ArrowDown` - Open dropdown / Focus next item
 * - `ArrowUp` - Open dropdown / Focus previous item
 * - `Home` - Focus first item
 * - `End` - Focus last item
 * - `Escape` - Close dropdown
 * - `Tab` - Close dropdown and move to next focusable element
 * - `A-Z` - Type-ahead search
 *
 * Basic Usage:
 * ```html
 * <pxm-select>
 *   <pxm-select-trigger>
 *     <pxm-select-value>Choose an option...</pxm-select-value>
 *     <span data-select-icon>▼</span>
 *   </pxm-select-trigger>
 *
 *   <pxm-select-content>
 *     <pxm-select-item value="apple">
 *       <pxm-select-item-text>Apple</pxm-select-item-text>
 *     </pxm-select-item>
 *     <pxm-select-item value="banana">
 *       <pxm-select-item-text>Banana</pxm-select-item-text>
 *     </pxm-select-item>
 *     <pxm-select-item value="cherry">
 *       <pxm-select-item-text>Cherry</pxm-select-item-text>
 *     </pxm-select-item>
 *   </pxm-select-content>
 * </pxm-select>
 * ```
 *
 * With Custom Icon Rotation:
 * ```html
 * <!-- Default is 180deg, customize with icon-rotation attribute -->
 * <pxm-select icon-rotation="90">
 *   <pxm-select-trigger>
 *     <pxm-select-value>Choose an option...</pxm-select-value>
 *     <span data-select-icon>▶</span>
 *   </pxm-select-trigger>
 *   <pxm-select-content>
 *     <!-- items -->
 *   </pxm-select-content>
 * </pxm-select>
 * ```
 *
 * With Search/Filter Functionality:
 * ```html
 * <pxm-select>
 *   <pxm-select-trigger>
 *     <pxm-select-value>Choose an option...</pxm-select-value>
 *     <span data-select-icon>▼</span>
 *   </pxm-select-trigger>
 *
 *   <pxm-select-content>
 *     <!-- Search input with clear button -->
 *     <pxm-select-search placeholder="Search fruits...">
 *       <input type="text" />
 *       <button data-clear>×</button>
 *     </pxm-select-search>
 *
 *     <pxm-select-group>
 *       <pxm-select-item value="apple">Apple</pxm-select-item>
 *       <pxm-select-item value="banana">Banana</pxm-select-item>
 *       <pxm-select-item value="cherry">Cherry</pxm-select-item>
 *       <pxm-select-item value="grape">Grape</pxm-select-item>
 *     </pxm-select-group>
 *   </pxm-select-content>
 * </pxm-select>
 * ```
 *
 * Multiple Selection:
 * ```html
 * <pxm-select multiple="true" close-on-select="false">
 *   <pxm-select-trigger>
 *     <pxm-select-value>Select multiple...</pxm-select-value>
 *   </pxm-select-trigger>
 *   <pxm-select-content>
 *     <pxm-select-item value="red">Red</pxm-select-item>
 *     <pxm-select-item value="green">Green</pxm-select-item>
 *     <pxm-select-item value="blue">Blue</pxm-select-item>
 *   </pxm-select-content>
 * </pxm-select>
 * ```
 *
 * Multiple Selection with Custom Separator and Wrapped Values:
 * ```html
 * <!-- Custom separator (default is ', ') -->
 * <pxm-select multiple="true" value-separator=" | ">
 *   <pxm-select-trigger>
 *     <pxm-select-value>Select colors...</pxm-select-value>
 *   </pxm-select-trigger>
 *   <pxm-select-content>
 *     <pxm-select-item value="red">Red</pxm-select-item>
 *     <pxm-select-item value="green">Green</pxm-select-item>
 *   </pxm-select-content>
 * </pxm-select>
 *
 * <!-- No separator between values -->
 * <pxm-select multiple="true" value-separator="">
 *   <pxm-select-trigger>
 *     <pxm-select-value>Select tags...</pxm-select-value>
 *   </pxm-select-trigger>
 *   <pxm-select-content>
 *     <pxm-select-item value="tag1">Tag 1</pxm-select-item>
 *     <pxm-select-item value="tag2">Tag 2</pxm-select-item>
 *   </pxm-select-content>
 * </pxm-select>
 *
 * <!-- Disable value wrapping (no spans, just text) -->
 * <pxm-select multiple="true" wrap-values="false">
 *   <pxm-select-trigger>
 *     <pxm-select-value>Select options...</pxm-select-value>
 *   </pxm-select-trigger>
 *   <pxm-select-content>
 *     <pxm-select-item value="opt1">Option 1</pxm-select-item>
 *     <pxm-select-item value="opt2">Option 2</pxm-select-item>
 *   </pxm-select-content>
 * </pxm-select>
 * ```
 *
 * With Groups and Labels:
 * ```html
 * <pxm-select>
 *   <pxm-select-trigger>
 *     <pxm-select-value>Select a fruit...</pxm-select-value>
 *   </pxm-select-trigger>
 *
 *   <pxm-select-content>
 *     <pxm-select-group>
 *       <pxm-select-label>Citrus</pxm-select-label>
 *       <pxm-select-item value="orange">Orange</pxm-select-item>
 *       <pxm-select-item value="lemon">Lemon</pxm-select-item>
 *     </pxm-select-group>
 *
 *     <pxm-select-separator></pxm-select-separator>
 *
 *     <pxm-select-group>
 *       <pxm-select-label>Berries</pxm-select-label>
 *       <pxm-select-item value="strawberry">Strawberry</pxm-select-item>
 *       <pxm-select-item value="blueberry">Blueberry</pxm-select-item>
 *     </pxm-select-group>
 *   </pxm-select-content>
 * </pxm-select>
 * ```
 *
 * Dynamic Content:
 * ```javascript
 * // Items can be added/removed dynamically
 * const select = document.querySelector('pxm-select');
 * const content = select.querySelector('pxm-select-content');
 *
 * const newItem = document.createElement('pxm-select-item');
 * newItem.setAttribute('value', 'grape');
 * newItem.innerHTML = '<pxm-select-item-text>Grape</pxm-select-item-text>';
 * content.appendChild(newItem); // Automatically initialized
 *
 * // Listen for changes
 * select.addEventListener('pxm:select:items-changed', (e) => {
 *   console.log(`Select now has ${e.detail.itemCount} items`);
 * });
 *
 * // Get/set values programmatically
 * select.setValue('apple');
 * console.log(select.getValue()); // 'apple'
 *
 * select.setValues(['apple', 'banana']); // For multiple selection
 * console.log(select.getValues()); // ['apple', 'banana']
 *
 * // Interact with individual wrapped values (when wrap-values="true")
 * const valueElement = select.querySelector('pxm-select-value');
 * const valueSpans = valueElement.querySelectorAll('.pxm-select-value-item');
 *
 * valueSpans.forEach(span => {
 *   span.addEventListener('click', (e) => {
 *     e.stopPropagation(); // Prevent select from opening
 *     const value = span.getAttribute('data-value');
 *     console.log(`Clicked value: ${value}`);
 *
 *     // Example: Remove value on click
 *     const currentValues = select.getValues();
 *     const newValues = currentValues.filter(v => v !== value);
 *     select.setValues(newValues);
 *   });
 * });
 * ```
 *
 * With Animation Library (via events - recommended for CDN):
 * ```javascript
 * const select = document.querySelector('pxm-select');
 *
 * select.addEventListener('pxm:select:before-open', (e) => {
 *   const { contentElement } = e.detail;
 *   e.preventDefault(); // Take over the animation
 *
 *   gsap.fromTo(contentElement,
 *     { opacity: 0, y: -10, scaleY: 0.8 },
 *     {
 *       opacity: 1,
 *       y: 0,
 *       scaleY: 1,
 *       duration: 0.2,
 *       transformOrigin: 'top',
 *       onComplete: () => {
 *         e.detail.complete(); // Signal animation complete
 *       }
 *     }
 *   );
 * });
 *
 * select.addEventListener('pxm:select:before-close', (e) => {
 *   const { contentElement } = e.detail;
 *   e.preventDefault(); // Take over the animation
 *
 *   gsap.to(contentElement, {
 *     opacity: 0,
 *     y: -10,
 *     scaleY: 0.8,
 *     duration: 0.15,
 *     transformOrigin: 'top',
 *     onComplete: () => {
 *       e.detail.complete(); // Signal animation complete
 *     }
 *   });
 * });
 * ```
 *
 * With CSS Transitions (default):
 * ```css
 * pxm-select-content {
 *   opacity: 0;
 *   transform: translateY(-8px) scaleY(0.9);
 *   transform-origin: top;
 *   transition: opacity 0.2s ease, transform 0.2s ease;
 * }
 *
 * pxm-select-content[data-open="true"] {
 *   opacity: 1;
 *   transform: translateY(0) scaleY(1);
 * }
 * ```
 *
 * Consumer Styling Examples:
 * ```css
 * /* Style the component structure *\/
 * pxm-select {
 *   /* Your layout styles *\/
 *   position: relative;
 *   display: inline-block;
 * }
 *
 * pxm-select-trigger {
 *   /* Your trigger button styles *\/
 *   display: flex;
 *   align-items: center;
 *   padding: 8px 12px;
 *   border: 1px solid #ccc;
 *   border-radius: 4px;
 *   cursor: pointer;
 * }
 *
 * pxm-select-content {
 *   /* Your dropdown styles *\/
 *   position: absolute;
 *   top: 100%;
 *   left: 0;
 *   right: 0;
 *   background: white;
 *   border: 1px solid #ccc;
 *   border-radius: 4px;
 *   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 *   z-index: 1000;
 * }
 *
 * /* ✅ DO: Style based on data attributes (for CSS/JS targeting) *\/
 * pxm-select[data-open="true"] pxm-select-trigger {
 *   /* Open state styling *\/
 *   border-color: #007bff;
 * }
 *
 * pxm-select-item[data-selected="true"] {
 *   /* Selected item styling *\/
 *   background: #007bff;
 *   color: white;
 * }
 *
 * pxm-select-item[data-focused="true"] {
 *   /* Focused item styling *\/
 *   background: #f0f0f0;
 * }
 *
 * pxm-select-item[data-disabled="true"] {
 *   /* Disabled item styling *\/
 *   opacity: 0.5;
 *   cursor: not-allowed;
 * }
 *
 * pxm-select[data-disabled="true"] {
 *   /* Disabled select styling *\/
 *   opacity: 0.6;
 * }
 *
 * /* Multiple value styling (when wrap-values="true") *\/
 * .pxm-select-value-item {
 *   /* Style individual selected values *\/
 *   background: #e3f2fd;
 *   border-radius: 4px;
 *   padding: 2px 6px;
 *   display: inline-block;
 *   font-size: 0.875em;
 * }
 *
 * .pxm-select-value-item[data-value="important"] {
 *   /* Style specific values by their data-value attribute *\/
 *   background: #ffebee;
 *   color: #c62828;
 * }
 *
 * /* ❌ DON'T: Style based on ARIA attributes (bad practice) *\/
 * pxm-select-item[aria-selected="true"] {
 *   /* Don't use ARIA for styling *\/
 * }
 * ```
 *
 * With Tailwind CSS:
 * ```html
 * <!-- ✅ DO: Use data attributes for styling -->
 * <pxm-select
 *   class="relative inline-block min-w-48
 *          data-[open=true]:z-50
 *          data-[disabled=true]:opacity-60">
 *   <pxm-select-trigger
 *     class="flex items-center justify-between w-full px-3 py-2
 *            border border-gray-300 rounded-md bg-white
 *            data-[open=true]:border-blue-500 data-[open=true]:ring-1 data-[open=true]:ring-blue-500
 *            data-[focused=true]:border-blue-500
 *            data-[disabled=true]:bg-gray-100 data-[disabled=true]:cursor-not-allowed
 *            hover:border-gray-400 focus:outline-none">
 *     <pxm-select-value
 *       class="text-left data-[placeholder=true]:text-gray-500">Choose your option...</pxm-select-value>
 *     <span data-select-icon
 *           class="ml-2 transition-transform duration-200 data-[open=true]:rotate-180">▼</span>
 *   </pxm-select-trigger>
 *
 *   <pxm-select-content
 *     class="absolute top-full left-0 right-0 mt-1
 *            bg-white border border-gray-300 rounded-md shadow-lg
 *            data-[open=false]:hidden
 *            max-h-60 overflow-auto z-50">
 *     <pxm-select-item
 *       value="apple"
 *       class="px-3 py-2 cursor-pointer
 *              data-[focused=true]:bg-blue-50
 *              data-[selected=true]:bg-blue-100 data-[selected=true]:font-medium
 *              data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed
 *              hover:bg-gray-50">
 *       <pxm-select-item-text>Apple</pxm-select-item-text>
 *     </pxm-select-item>
 *   </pxm-select-content>
 * </pxm-select>
 *
 * <!-- Style wrapped values in multiple selection -->
 * <style>
 *   .pxm-select-value-item {
 *     @apply inline-flex items-center bg-blue-100 text-blue-800 text-xs
 *            px-2 py-1 rounded-md mr-1 last:mr-0;
 *   }
 *
 *   .pxm-select-value-item[data-value^="tag-"] {
 *     @apply bg-green-100 text-green-800;
 *   }
 * </style>
 * ```
 *
 * SSR / Hydration Support:
 * ```css
 * /* Recommended: Set initial styles in CSS to prevent hydration flash *\/
 * pxm-select-content:not([data-open="true"]) {
 *   display: none;
 * }
 *
 * pxm-select-content[data-open="true"] {
 *   display: block;
 * }
 *
 * /* Optional: Hide content during hydration *\/
 * pxm-select:not(:defined) pxm-select-content {
 *   display: none;
 * }
 * ```
 *
 * Accessibility:
 * This component manages both ARIA attributes (for accessibility) and data attributes (for styling/JS).
 * - ARIA attributes (aria-expanded, aria-selected, etc.) are automatically managed for screen readers
 * - Data attributes (data-open, data-selected, etc.) are provided for CSS styling and JavaScript hooks
 * - Additional ARIA attributes, labels, and roles should be added by the consumer as needed
 *
 * Events:
 * - `pxm:select:before-open` - Cancelable. Fired before dropdown opens.
 * - `pxm:select:after-open` - Fired after dropdown opens.
 * - `pxm:select:before-close` - Cancelable. Fired before dropdown closes.
 * - `pxm:select:after-close` - Fired after dropdown closes.
 * - `pxm:select:before-select` - Cancelable. Fired before item selection.
 * - `pxm:select:after-select` - Fired after item selection.
 * - `pxm:select:value-change` - Fired when the selected value(s) change.
 * - `pxm:select:state-change` - Fired when open/closed state changes.
 * - `pxm:select:items-changed` - Fired when items are dynamically added/removed.
 * - `pxm:select:icon-rotate` - Fired when the icon should rotate (open/close states).
 * - `pxm:select:items-filtered` - Fired when items are filtered by search query.
 */
import type { SelectConfig, SelectState, SelectEventDetail, SelectItemEventDetail, SelectStateChangeDetail, SelectItemData } from './types';
import { PxmSelectTrigger } from './components/pxm-select-trigger';
import { PxmSelectValue } from './components/pxm-select-value';
import { PxmSelectContent } from './components/pxm-select-content';
import { PxmSelectItem } from './components/pxm-select-item';
import { PxmSelectGroup } from './components/pxm-select-group';
import { PxmSelectLabel } from './components/pxm-select-label';
import { PxmSelectSeparator } from './components/pxm-select-separator';
import { PxmSelectSearch } from './components/pxm-select-search';
declare class PxmSelect extends HTMLElement {
    private config;
    private state;
    private triggerElement?;
    private valueElement?;
    private contentElement?;
    private _items?;
    private mutationObserver?;
    private outsideClickListener?;
    private animationPromises;
    private hasCustomAnimations;
    private defaultListeners;
    private typeAheadString;
    private typeAheadTimeout?;
    private get items();
    static get observedAttributes(): string[];
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
    private setupComponents;
    private findComponents;
    private setupEventListeners;
    private initializeItems;
    private observeChildChanges;
    private handleDynamicChanges;
    private setupDefaultAnimations;
    private hasEventListener;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
    removeDefaultAnimations(): void;
    open(): Promise<void>;
    close(): Promise<void>;
    toggle(): Promise<void>;
    selectItem(item: PxmSelectItem): Promise<void>;
    focusItem(item: PxmSelectItem): void;
    focusItemByIndex(index: number): void;
    focusNextItem(): void;
    focusPreviousItem(): void;
    focusFirstItem(): void;
    focusLastItem(): void;
    focusFirstVisibleItem(): void;
    focusLastVisibleItem(): void;
    selectFocusedOrFirstVisibleItem(): void;
    private selectFirstVisibleItem;
    private focusInitialItem;
    filterItems(query: string): void;
    private handleFilteredFocus;
    getValue(): string | string[];
    getValues(): string[];
    setValue(value: string): void;
    setValues(values: string[]): void;
    clearSelection(): void;
    private handleOutsideClick;
    private createAnimationPromise;
    private resolveAnimation;
    private updateAllAttributes;
    private updateValueDisplay;
    private dispatchValueChange;
    private dispatchStateChange;
    private cleanup;
    getSelectedItems(): PxmSelectItem[];
    getAllItems(): PxmSelectItem[];
    isOpen(): boolean;
    isMultiple(): boolean;
    /**
     * Update icon rotation when icon-rotation attribute changes
     */
    private updateIconRotation;
    /**
     * Update icon for the select trigger
     */
    private updateIcon;
    selectFocusedItem(): void;
    handleTypeAhead(key: string): boolean;
    private focusFirstTypeAheadMatch;
    private focusNextTypeAheadMatch;
    private itemMatchesTypeAhead;
    clearTypeAhead(): void;
}
export { PxmSelect };
export { PxmSelectTrigger, PxmSelectValue, PxmSelectContent, PxmSelectItem, PxmSelectGroup, PxmSelectLabel, PxmSelectSeparator, PxmSelectSearch };
export type { SelectEventDetail, SelectItemEventDetail, SelectStateChangeDetail, SelectConfig, SelectState, SelectItemData };