import type { CSSResultGroup } from 'lit';
import SynergyElement from '../../internal/synergy-element.js';
import type SynTag from '../tag/tag.component.js';
/**
 * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
 * It arranges tags in flexible rows and supports different sizes and layouts.
 * Tags can be removable, icon‑based, or purely textual.
 *
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
 * @status stable
 * @since 3.7.0
 *
 * @slot - The tag group's main content. Must be `<syn-tag />` elements.
 * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
 *
 * @csspart base - The component's base wrapper.
 * @csspart tag-label - The tag group's label.
 */
export default class SynTagGroup extends SynergyElement {
    static styles: CSSResultGroup;
    tagsInDefaultSlot: SynTag[];
    private readonly hasSlotController;
    /** The tag group's label. If you need to display HTML, use the `label` slot instead. */
    label: string;
    /**
     * Controls the label position. Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.
     */
    labelPosition: 'top' | 'start';
    /** The size that should be applied to all slotted `<syn-tag>` elements */
    size: 'small' | 'medium' | 'large';
    private adjustTagSize;
    handleSizeChange(): void;
    handleSlotChange(): void;
    render(): import("lit").TemplateResult<1>;
}