import { LitElement } from 'lit';
/**
 * The layout direction for a pivot item.
 * - `horizontal`: Arranges items in a row (default).
 * - `vertical`: Arranges items in a column.
 */
export declare enum ObcPivotItemDirection {
    horizontal = "horizontal",
    vertical = "vertical"
}
/**
 * `<obc-pivot-item>` – A selectable tab or navigation item for use in pivot/tab bars and segmented controls.
 *
 * Represents a single option within a group of pivot items, supporting icon-only, label-only, or combined icon+label layouts. Designed for navigation or view switching scenarios where users select one option from a set. Can be arranged horizontally or vertically to fit different UI layouts.
 *
 * ---
 *
 * ### Features
 * - **Direction:** Supports `horizontal` (default) or `vertical` layout, adapting to the orientation of the containing group.
 * - **Icon and Label Options:** Can display a leading icon (via the `icon` slot), a text label (via the `label` property), or both. Each can be toggled independently.
 * - **Selection State:** Indicates the currently selected item with a visual highlight (active tab stroke). Only one item should be selected in a group at a time.
 * - **Disabled State:** Can be disabled to prevent interaction and visually indicate inactivity.
 *
 * ---
 *
 * ### Usage Guidelines
 * Use `obc-pivot-item` within an `obc-pivot-item-group` to create tab bars, segmented controls, or navigation rails. Ideal for switching between views, pages, or content sections. Choose horizontal orientation for top navigation bars and vertical for side navigation or tool selectors. Use icons for compact layouts or when representing actions visually; combine with labels for clarity. Avoid using for persistent navigation (use a menu or list instead).
 *
 * **TODO(designer):** Confirm if there are recommended limits on icon or label length, and if divider usage is preferred in certain layouts.
 *
 * ---
 *
 * ### Slots
 * | Slot Name | Renders When...         | Purpose                                   |
 * |-----------|------------------------|-------------------------------------------|
 * | icon      | `hasLeadingIcon` true  | Leading icon representing the item. Place an icon such as `<obi-home slot="icon"></obi-home>`. |
 *
 * ---
 *
 * ### Events
 * - `selected` – Fired when the item is clicked and becomes selected. Event detail: `{ value: string }`.
 *
 * ---
 *
 * ### Example:
 * ```
 * <obc-pivot-item
 *   value="home"
 *   label="Home"
 *   hasLeadingIcon
 *   hasLabel
 * >
 *   <obi-home slot="icon"></obi-home>
 * </obc-pivot-item>
 * ```
 * In this example, the item displays a home icon and a label. When clicked (and not already selected/disabled), it emits a `selected` event.
 *
 * @slot icon - Leading icon slot (shown when `hasLeadingIcon` is true)
 * @fires selected {CustomEvent<{value: string}>} When the item is clicked and becomes selected
 */
export declare class ObcPivotItem extends LitElement {
    /**
     * The value associated with this pivot item. Used to identify the item within a group.
     *
     * Set a unique value for each item in a group to track selection state.
     */
    value: string;
    /**
     * Whether this item is currently selected. Only one item should be selected in a group.
     *
     * When `true`, the item is visually highlighted and does not emit the `selected` event on click.
     */
    selected: boolean;
    /**
     * Layout direction for the item: `horizontal` (default) or `vertical`.
     * Should match the direction of the containing group.
     *
     * Use `horizontal` for row/tab layouts and `vertical` for column/rail layouts.
     */
    direction: ObcPivotItemDirection;
    /**
     * Whether to display a leading icon. If true, renders the `icon` slot.
     *
     * Place an icon element (e.g., `<obi-home slot="icon"></obi-home>`) in the slot to show an icon.
     */
    hasLeadingIcon: boolean;
    /**
     * Whether to display a text label. If true and `label` is non-empty, shows the label.
     *
     * Use in combination with `hasLeadingIcon` for icon+label layouts.
     */
    hasLabel: boolean;
    /**
     * The text label to display for the item. Only shown if `hasLabel` is true and label is non-empty.
     *
     * Keep labels concise for best appearance, especially in horizontal layouts.
     */
    label: string;
    /**
     * Disables the item, preventing interaction and applying a disabled style.
     *
     * When `true`, the item cannot be selected and is visually muted.
     */
    disabled: boolean;
    /**
     * Handles click events. Emits `selected` when the item is not disabled or already selected.
     *
     * @fires selected {CustomEvent<{value: string}>} When the item is clicked and becomes selected
     */
    private onClick;
    render(): import('lit-html').TemplateResult<1>;
    static styles: import('lit').CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'obc-pivot-item': ObcPivotItem;
    }
}
//# sourceMappingURL=pivot-item.d.ts.map