import { TemplateResult } from 'lit';
import { UiElement } from '../../../md/UiElement.js';
import '../../../md/focus-ring/ui-focus-ring.js';
import '../../../md/ripple/ui-ripple.js';
/**
 * NavigationItem
 *
 * An element to be placed inside a navigation bar. This component is designed for use with navigation bars and supports
 * icon-only, selected, and disabled states. It is built with accessibility and composability in mind.
 *
 * ## Accessibility
 *
 * - Uses a native `<button>` element for proper semantics and keyboard accessibility.
 * - The icon is marked with `role="presentation"` to indicate it is decorative.
 * - Focus ring and ripple effects are included for visual feedback.
 *
 * ## Usage Example
 *
 * ### Accessible Navigation Example
 *
 * ```html
 * <nav aria-label="Main navigation">
 *   <ul style="display: flex; gap: 8px; list-style: none; padding: 0; margin: 0;">
 *     <li>
 *       <navigation-item selected aria-current="page">
 *         <span slot="icon" aria-hidden="true">🏠</span>
 *         Home
 *       </navigation-item>
 *     </li>
 *     <li>
 *       <navigation-item>
 *         <span slot="icon" aria-hidden="true">🔍</span>
 *         Search
 *       </navigation-item>
 *     </li>
 *     <li>
 *       <navigation-item>
 *         <span slot="icon" aria-hidden="true">📁</span>
 *         Files
 *       </navigation-item>
 *     </li>
 *     <li>
 *       <navigation-item iconOnly disabled aria-disabled="true" tabindex="-1">
 *         <span slot="icon" aria-hidden="true">⚙️</span>
 *       </navigation-item>
 *     </li>
 *   </ul>
 * </nav>
 * ```
 *
 * This example demonstrates a horizontal navigation bar using semantic HTML. Each `navigation-item`
 * is placed inside a list item for proper structure. The `aria-current="page"` attribute marks the current
 * page, and `aria-disabled="true"` with `tabindex="-1"` ensures the disabled item is not focusable.
 * Icons use `aria-hidden="true"` for accessibility.
 *
 * @slot icon - A slot for the icon element
 * @slot - The default slot for the label
 */
export default class NavigationItem extends UiElement {
    static shadowRootOptions: ShadowRootInit;
    get disabled(): boolean;
    /**
     * When set, the navigation item is in a disabled state.
     * @attribute
     */
    set disabled(value: boolean);
    /**
     * Whether the navigation item is selected.
     * @attribute
     */
    accessor selected: boolean;
    /**
     * When set, the navigation item is rendered as an icon-only button.
     * The width of the button is set to 40px.
     * @attribute
     */
    accessor iconOnly: boolean;
    /**
     * The reference of the navigation item to the target.
     * @attribute
     */
    accessor href: string | undefined;
    /**
     * Determines when the element has an icon in the "icon" slot.
     */
    protected accessor hasIcon: boolean;
    /**
     * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
     */
    protected handleIconSlotChange(e: Event): void;
    protected render(): TemplateResult;
    protected renderIcon(): TemplateResult;
}
//# sourceMappingURL=NavigationItem.d.ts.map