import { LuxenElement } from '../../shared/luxen-element.js';
export type TagSize = 'sm' | 'md' | 'lg';
export type TagControl = 'none' | 'checkbox';
/**
 * Fired when the user asks to remove the tag — clicking the × button, or
 * pressing Backspace/Delete while it is focused. Cancelable: call
 * `preventDefault()` to keep the tag (the controlling host then manages the
 * list itself); otherwise the tag removes itself from the DOM. Does not bubble.
 */
export declare class TagRemoveEvent extends Event {
    constructor();
}
/** Fired when a `selectable` tag is toggled. Bubbles; not composed. */
export declare class TagChangeEvent extends Event {
    readonly selected: boolean;
    constructor(selected: boolean);
}
interface TagEventMap {
    change: TagChangeEvent;
}
declare global {
    interface GlobalEventHandlersEventMap {
        remove: TagRemoveEvent;
    }
}
/**
 * A compact chip for tokens, filters, and multi-select values. Shadow DOM so its
 * styles are self-contained and it renders correctly **anywhere**, including
 * inside another element's shadow root (e.g. the `<l-select>` multi-select
 * trigger).
 *
 * Add `selectable` to turn the chip into a filter control: the tag itself
 * becomes a toggle button (`aria-pressed`), and re-activating a selected tag
 * deselects it — the affordance a radio group cannot offer, so a facet always
 * has a way back to "all". Add `control="checkbox"` for a multi-select axis and
 * the library's own checkbox rides inside, with the chip as its label.
 *
 * @summary A compact, optionally removable or selectable chip.
 *
 * @example
 * ```html
 * <l-tag removable>Design</l-tag>
 * <l-tag selectable selected>A3</l-tag>
 * <l-tag selectable control="checkbox">Color <span slot="suffix">79</span></l-tag>
 * ```
 *
 * @event remove - Fired when the user removes the tag (× click or Backspace/Delete). Cancelable; if not prevented the tag removes itself. Not composed, does not bubble.
 * @event change - Fired when a `selectable` tag is toggled. Not cancelable — like the platform's own `change`, and like `l-segmented-control`. Bubbles. Properties: `selected: boolean`. The chip is uncontrolled: it applies the new state before dispatching, so a host that vetoes a toggle (a "max 3 filters" rule, an async guard) sets `selected` back in the listener — the revert lands in the same render and is never painted.
 *
 * @slot - The tag label.
 * @slot prefix - Leading content, e.g. an `<l-icon>` or `<l-avatar>`.
 * @slot suffix - Trailing content, e.g. a result count. Gets the chip's own gutter, so no margin is needed.
 *
 * @csspart base - The chip container.
 * @csspart content - The label wrapper.
 * @csspart toggle - The toggle button rendered by `selectable` (not with `control="checkbox"`).
 * @csspart checkbox - The native checkbox rendered by `control="checkbox"`.
 * @csspart remove - The remove button.
 *
 * @cssproperty [--border-radius] - Corner radius. Defaults to a full pill.
 * @cssproperty [--height] - Chip height. Defaults to the `size` step (a selectable chip is taller, to keep a comfortable target).
 * @cssproperty [--font-size] - Label size. Defaults to the `size` step — 12px, or 14px at `size="lg"`. Set it with `--height` to land between the two steps in a dense filter panel.
 * @cssproperty [--padding-inline] - Horizontal padding. Defaults to the `size` step.
 * @cssproperty [--background] - Chip background.
 * @cssproperty [--color] - Text color.
 * @cssproperty [--selected-color] - Text, border, and checkbox accent when selected. Defaults to the library's form-control accent, lightened in dark mode.
 * @cssproperty [--selected-background] - Chip background when selected. Defaults to a tint of `--selected-color`.
 *
 * @customElement l-tag
 */
export declare class Tag extends LuxenElement {
    static styles: import('lit').CSSResult[];
    private _localize;
    /** Tag size: `sm`, `md` (default), or `lg`. */
    accessor size: TagSize;
    /** Show a remove button (and enable Backspace/Delete removal). */
    accessor removable: boolean;
    /** Make the tag a filter control the user can toggle on and off. */
    accessor selectable: boolean;
    /** Whether the tag is selected. Reflected, so `[selected]` is styleable. */
    accessor selected: boolean;
    /**
     * What drives the selection: `none` (default) makes the chip itself a toggle
     * button; `checkbox` renders a checkbox inside and makes the chip its label —
     * the right choice for a multi-select facet. Implies `selectable`.
     */
    accessor control: TagControl;
    /** Disable the tag — dims it and blocks selection and removal. */
    accessor disabled: boolean;
    constructor();
    willUpdate(): void;
    updated(): void;
    private _requestRemove;
    private _onKeyDown;
    private _toggle;
    /**
     * Events do not propagate *down* into a shadow tree, so a click dispatched on
     * the host — `tag.click()`, a test runner resolving the chip by its test id,
     * a runner computing the chip's centre (`elementFromPoint()` retargets shadow
     * content back to the host) — never reaches the toggle button or the
     * checkbox, and silently does nothing. Delegate it.
     *
     * Only when the host *is* the target: a real gesture originates at the inner
     * button, at the checkbox, or at slotted content, and is already handled
     * where it lands — so this never double-toggles. `removable` stays out of it;
     * removing is the × button's own gesture.
     */
    private _onHostClick;
    private _onCheckboxChange;
    private _label;
    private _removeButton;
    render(): import('lit').TemplateResult<1>;
}
export interface Tag {
    addEventListener<K extends keyof TagEventMap>(type: K, listener: (this: Tag, ev: TagEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
    removeEventListener<K extends keyof TagEventMap>(type: K, listener: (this: Tag, ev: TagEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
export {};
//# sourceMappingURL=tag.d.ts.map