import { __esDecorate, __runInitializers } from "tslib";
import { html, LitElement } from 'lit';
import { property, queryAssignedElements } from 'lit/decorators.js';
let Navigation = (() => {
    let _classSuper = LitElement;
    let _orientation_decorators;
    let _orientation_initializers = [];
    let _orientation_extraInitializers = [];
    let _current_decorators;
    let _current_initializers = [];
    let _current_extraInitializers = [];
    let __items_decorators;
    let __items_initializers = [];
    let __items_extraInitializers = [];
    return class Navigation extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _orientation_decorators = [property({ type: String, reflect: true })];
            _current_decorators = [property({ type: String, reflect: true })];
            __items_decorators = [queryAssignedElements({ flatten: true })];
            __esDecorate(this, null, _orientation_decorators, { kind: "accessor", name: "orientation", static: false, private: false, access: { has: obj => "orientation" in obj, get: obj => obj.orientation, set: (obj, value) => { obj.orientation = value; } }, metadata: _metadata }, _orientation_initializers, _orientation_extraInitializers);
            __esDecorate(this, null, _current_decorators, { kind: "accessor", name: "current", static: false, private: false, access: { has: obj => "current" in obj, get: obj => obj.current, set: (obj, value) => { obj.current = value; } }, metadata: _metadata }, _current_initializers, _current_extraInitializers);
            __esDecorate(this, null, __items_decorators, { kind: "accessor", name: "_items", static: false, private: false, access: { has: obj => "_items" in obj, get: obj => obj._items, set: (obj, value) => { obj._items = value; } }, metadata: _metadata }, __items_initializers, __items_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #orientation_accessor_storage = __runInitializers(this, _orientation_initializers, 'vertical'
        /**
         * The current item in the navigation, used for ARIA attributes.
         * Can be 'page', 'step', 'location', 'date', 'time', 'true', 'false', or ''.
         * @attribute
         */
        );
        /**
         * Orientation of the navigation: 'horizontal' or 'vertical'.
         * @attribute
         */
        get orientation() { return this.#orientation_accessor_storage; }
        set orientation(value) { this.#orientation_accessor_storage = value; }
        #current_accessor_storage = (__runInitializers(this, _orientation_extraInitializers), __runInitializers(this, _current_initializers, ''
        /**
         * Query all ui-navigation-item children
         */
        ));
        /**
         * The current item in the navigation, used for ARIA attributes.
         * Can be 'page', 'step', 'location', 'date', 'time', 'true', 'false', or ''.
         * @attribute
         */
        get current() { return this.#current_accessor_storage; }
        set current(value) { this.#current_accessor_storage = value; }
        #_items_accessor_storage = (__runInitializers(this, _current_extraInitializers), __runInitializers(this, __items_initializers, void 0));
        /**
         * Query all ui-navigation-item children
         */
        get _items() { return this.#_items_accessor_storage; }
        set _items(value) { this.#_items_accessor_storage = value; }
        render() {
            return html `
      <nav aria-label="${this.getAttribute('aria-label') || 'Navigation'}">
        <slot @slotchange="${this._onSlotChange}"></slot>
      </nav>
    `;
        }
        constructor() {
            super();
            this.addEventListener('keydown', this._onKeyDown.bind(this));
            this.addEventListener('click', this._onClick.bind(this));
        }
        firstUpdated() {
            this._setupItems();
        }
        _onSlotChange = (__runInitializers(this, __items_extraInitializers), () => {
            this._setupItems();
        });
        /**
         * Sets the initial `tabindex` for the items. The first selected item,
         * or the first item if none are selected, receives `tabindex="0"`.
         * All other items receive `tabindex="-1"`.
         */
        _setupItems() {
            const items = this._getEnabledItems();
            if (!items.length) {
                return;
            }
            items.forEach((item) => {
                if (item.disabled) {
                    return;
                }
                item.setAttribute('tabindex', item.selected ? '0' : '-1');
                if (item.selected && this.current) {
                    item.setAttribute('aria-current', this.current);
                }
                else if (!item.selected && item.hasAttribute('aria-current')) {
                    item.removeAttribute('aria-current');
                }
            });
        }
        _getEnabledItems() {
            return (this._items || []).filter((item) => !item.disabled);
        }
        _onClick = (e) => {
            const target = e.target;
            const item = target.closest('ui-navigation-item');
            if (item && this._items.includes(item)) {
                this._selectItem(item);
            }
        };
        _selectItem(itemToSelect) {
            if (itemToSelect.disabled) {
                return;
            }
            this._items.forEach((item) => {
                item.selected = item === itemToSelect;
                if (item.hasAttribute('aria-current')) {
                    item.removeAttribute('aria-current');
                }
            });
            if (this.current) {
                itemToSelect.setAttribute('aria-current', this.current);
            }
            this._updateFocus(itemToSelect);
            this.dispatchEvent(new CustomEvent('select', {
                detail: { item: itemToSelect },
                bubbles: false,
                composed: true,
            }));
        }
        _updateFocus(itemToFocus) {
            this._setupItems();
            itemToFocus.focus();
        }
        _onKeyDown(e) {
            const items = this._getEnabledItems();
            if (!items.length) {
                return;
            }
            const activeElement = this.getRootNode().activeElement;
            if (!activeElement) {
                return;
            }
            // Find which of our items is the host of the active element.
            // This is necessary because of focus delegation in ui-navigation-item.
            const activeItem = items.find((item) => item === activeElement || item.shadowRoot?.contains(activeElement));
            if (!activeItem) {
                return;
            }
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                this._selectItem(activeItem);
                return;
            }
            const idx = items.indexOf(activeItem);
            let nextIdx = idx;
            if (this.orientation === 'horizontal') {
                if (e.key === 'ArrowRight')
                    nextIdx = (idx + 1) % items.length;
                if (e.key === 'ArrowLeft')
                    nextIdx = (idx - 1 + items.length) % items.length;
            }
            else {
                if (e.key === 'ArrowDown')
                    nextIdx = (idx + 1) % items.length;
                if (e.key === 'ArrowUp')
                    nextIdx = (idx - 1 + items.length) % items.length;
            }
            if (e.key === 'Home')
                nextIdx = 0;
            if (e.key === 'End')
                nextIdx = items.length - 1;
            if (nextIdx !== idx) {
                items[nextIdx].focus();
                items.forEach((item, i) => item.setAttribute('tabindex', i === nextIdx ? '0' : '-1'));
                e.preventDefault();
            }
        }
    };
})();
/**
 * NavigationList
 *
 * A semantic, accessible navigation container for `ui-navigation-item` elements.
 * Handles keyboard navigation (roving tabindex), focus management, and ARIA roles.
 *
 * ## Usage Example
 *
 * ```html
 * <ui-navigation aria-label="Main navigation" current="page">
 *   <ui-navigation-item selected>
 *     <span slot="icon" aria-hidden="true">🏠</span>
 *     Home
 *   </ui-navigation-item>
 *   <ui-navigation-item>
 *     <span slot="icon" aria-hidden="true">🔍</span>
 *     Search
 *   </ui-navigation-item>
 *   <ui-navigation-item>
 *     <span slot="icon" aria-hidden="true">📁</span>
 *     Files
 *   </ui-navigation-item>
 *   <ui-navigation-item iconOnly disabled aria-disabled="true" tabindex="-1">
 *     <span slot="icon" aria-hidden="true">⚙️</span>
 *   </ui-navigation-item>
 * </ui-navigation>
 * ```
 *
 * @slot - Place `ui-navigation-item` elements as direct children.
 * @fires select - Dispatched when an item is selected via click or keyboard.
 *                 The `detail` object contains the selected `item`.
 */
export default Navigation;
//# sourceMappingURL=Navigation.js.map