import { LitElement } from 'lit';
import '../icon-button/icon-button.js';
import '../../icons/icon-close-google.js';
import '../badge/badge.js';
/**
 * `<obc-tab-item>` – A selectable tab component for navigation menus and tabbed interfaces.
 *
 * Represents a single tab within a tab bar or navigation group, supporting optional icons, badges, close actions, and various layout modes. Designed for use in horizontal or vertical tab sets, allowing users to switch between different views or content panels.
 *
 * Appears as a button-like element that can display a leading icon, a title, a badge (for counts or status), and an optional close button. Supports both fixed-width and "hug" (fit-content) layouts, and can be styled as checked (active/selected) or disabled.
 *
 * ### Features
 * - **Selectable State:** Indicates active/selected tab via the `checked` property.
 * - **Leading Icon:** Optionally displays a leading icon via the `leading-icon` slot.
 * - **Title:** Supports a title label, either via property or slot.
 * - **Badge Support:** Can show a badge (count/status) with configurable type, size, and icon.
 * - **Close Button:** Optional close action via a trailing icon button.
 * - **Layout Modes:**
 *   - **Hug:** Shrinks to fit content width (`hug` property).
 *   - **Center Content:** Centers content within the tab (`centerContent` property).
 * - **Divider:** Optional divider line for visual separation.
 * - **Disabled State:** Prevents interaction and visually indicates non-interactive state.
 * - **Keyboard Accessible:** Supports activation via Enter/Space keys.
 *
 * ### Variants and Configuration
 * - **Badge Types:** Supports all badge types from `obc-badge` (e.g., `alarm`, `warning`, `notification`, etc.).
 * - **Badge Sizes:** Regular and large badge sizes.
 * - **Badge Number Toggle:** Optionally hide the badge number via `badgeShowNumber` for status-only badges.
 * - **Show Leading Badge Icon:** Optionally display an icon within the badge.
 *
 * ### Usage Guidelines
 * Use `obc-tab-item` within a tab bar or navigation group to represent a single selectable view or section. Ideal for switching between content panels, dashboards, or grouped settings. Use the `checked` property to indicate the active tab, and `disabled` to prevent selection. The close button is suitable for user-removable tabs (e.g., in dynamic tab sets).
 *
 * - Use the badge for counts (e.g., notifications, alarms) or status indicators.
 * - Use the leading icon for visual context or to reinforce the tab's purpose.
 * - Avoid using the close button on non-removable tabs.
 * - For best accessibility, ensure each tab has a unique label/title.
 *
 * **TODO(designer):** Confirm if there are recommended maximum title lengths or truncation guidelines for tab labels.
 *
 * ### Slots
 *
 * | Slot Name      | Renders When...         | Purpose                                                  |
 * | -------------- | ---------------------- | -------------------------------------------------------- |
 * | leading-icon   | `hasLeadingIcon` true  | Leading icon representing the tab's category or purpose. |
 * | title          | `hasTitle` true        | Tab label or heading text.                               |
 * | badge-icon     | `hasBadge` & `showLeadingBadgeIcon` true | Icon inside the badge (e.g., status symbol).             |
 *
 * ### Events
 * - `tab-click` – Fired when the tab is clicked or activated via keyboard.
 * - `tab-close` – Fired when the close button is clicked.
 *
 * ### Best Practices
 * - Only one tab in a group should have `checked` set to true.
 * - Use the badge for concise status/counts; avoid long text in badges.
 * - The close button should only be used for tabs that users can remove.
 * - For accessibility, ensure tabs are focusable and have clear labels.
 *
 * **Example:**
 * ```
 * <obc-tab-item
 *   checked
 *   has-leading-icon
 *   has-title
 *   has-badge
 *   badgeCount="3"
 *   badgeType="alarm"
 *   has-close
 *   title="Alarms"
 * >
 *   <obi-placeholder slot="leading-icon"></obi-placeholder>
 *   <obi-placeholder slot="badge-icon"></obi-placeholder>
 * </obc-tab-item>
 * ```
 *
 * @slot leading-icon - Slot for the leading icon (shown when `hasLeadingIcon` is true)
 * @slot title - Slot for the tab's label/title (shown when `hasTitle` is true)
 * @slot badge-icon - Slot for an icon inside the badge (shown when `hasBadge` and `showLeadingBadgeIcon` are true)
 * @fires tab-click {CustomEvent<{title: string}>} When the tab is clicked or activated via keyboard
 * @fires tab-close {CustomEvent<{title: string}>} When the close button is clicked
 */
export declare class ObcTabItem extends LitElement {
    /**
     * Shrinks the tab width to fit its content instead of using the default fixed width.
     * When enabled, the tab will use `width: fit-content` and a minimum width.
     *
     * Default: false
     */
    hug: boolean;
    /**
     * Centers the content (icon, title, badge) horizontally within the tab.
     * When enabled, content is centered rather than left-aligned.
     *
     * Default: false
     */
    centerContent: boolean;
    /**
     * Marks the tab as selected/active.
     * Only one tab in a group should have `checked` set to true.
     *
     * Default: false
     */
    checked: boolean;
    /**
     * Displays a close button at the end of the tab.
     * Use for tabs that can be removed by the user.
     *
     * Default: false
     */
    hasClose: boolean;
    /**
     * Shows a leading icon at the start of the tab.
     * Supply icon content via the `leading-icon` slot.
     *
     * Default: false
     */
    hasLeadingIcon: boolean;
    /**
     * Displays the tab's title/label.
     * Content can be provided via the `title` slot or the `title` property.
     *
     * Default: false
     */
    hasTitle: boolean;
    /**
     * Shows a vertical divider on the left edge of the tab (except when checked).
     * Useful for visually separating tabs.
     *
     * Default: false
     */
    hasDivider: boolean;
    /**
     * Displays a badge (count/status) on the tab.
     * Configure badge appearance via `badgeCount`, `badgeType`, `badgeSize`, etc.
     *
     * Default: false
     */
    hasBadge: boolean;
    /**
     * (Deprecated/Unused) Icon name for the tab.
     * Icon content should be provided via the `leading-icon` slot.
     *
     * Default: 'placeholder'
     */
    icon: string;
    /**
     * The tab's title/label text.
     * Can be overridden by slotting content into the `title` slot.
     *
     * Default: 'Tab title'
     */
    title: string;
    /**
     * Disables the tab, preventing user interaction and applying disabled styles.
     *
     * Default: false
     */
    disabled: boolean;
    /**
     * Type of badge to display (e.g., 'regular', 'alarm', 'warning', etc.).
     * See `BadgeType` enum for available options.
     *
     * Default: 'regular'
     */
    badgeType: string;
    /**
     * Size of the badge ('regular' or 'large').
     * See `BadgeSize` enum for available options.
     *
     * Default: 'regular'
     */
    badgeSize: string;
    /**
     * Shows the badge's numeric value. When false, only the badge background is rendered (for status-only badges).
     *
     * Default: true
     */
    badgeShowNumber: boolean;
    /**
     * The numeric value to display in the badge (e.g., count of notifications).
     *
     * Default: 0
     */
    badgeCount: number;
    /**
     * Shows an icon inside the badge.
     * Supply icon content via the `badge-icon` slot.
     *
     * Default: false
     */
    showLeadingBadgeIcon: boolean;
    private handleClick;
    private handleClose;
    private handleKeyDown;
    render(): import('lit-html').TemplateResult<1>;
    static styles: import('lit').CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'obc-tab-item': ObcTabItem;
    }
}
//# sourceMappingURL=tab-item.d.ts.map