dap-design-system/dist/components.d.ts

Official design system for the DÁP (www.dap.gov.hu)

import { ColumnDef } from '@tanstack/lit-table';
import { CSSResult } from 'lit';
import { Dayjs } from 'dayjs';
import { default as default_2 } from 'dayjs';
import { LitElement } from 'lit';
import { nothing } from 'lit';
import { PaginationState } from '@tanstack/lit-table';
import { PropertyValueMap } from 'lit';
import { PropertyValues } from 'lit';
import { Row } from '@tanstack/lit-table';
import { RowData } from '@tanstack/lit-table';
import { RowSelectionState } from '@tanstack/lit-table';
import { SortingState } from '@tanstack/lit-table';
import { Table } from '@tanstack/lit-table';
import { TableController } from '@tanstack/lit-table';
import { TemplateResult } from 'lit';
import { TemplateResult as TemplateResult_2 } from 'lit-html';

export declare class AccordionBaseElement extends DdsElement {
    static readonly styles: CSSResult;
    private readonly accordionId;
    private readonly buttonId;
    private readonly contentId;
    /** The size of the accordion
     * @type { 'sm' | 'lg' }
     */
    size: CommonSize;
    /** The heading level of the accordion
     * @type { 1 | 2 | 3 | 4 | 5 | 6 }
     */
    headingLevel: HeadingLevel;
    /** Whether the accordion is opened */
    opened: boolean;
    /** Whether the accordion is disabled */
    disabled: boolean;
    /** Whether the accordion is in loading state */
    loading: boolean;
    /** The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided */
    heading?: string;
    /** The loading aria label of the accordion */
    loadingAriaLabel?: string;
    /** The location of the icon
     * @type { 'left' | 'right' }
     */
    iconLocation: LabelPlacement;
    /** The variant of the accordion
     * @type { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' }
     */
    variant: AccordionVariant;
    /** Whether this is the last item in an accordion group */
    lastItem: boolean;
    /** ID of element that describes the accordion */
    ariaDescribedBy?: string;
    constructor();
    headingRender(): TemplateResult;
    contentRender(): TemplateResult;
    connectedCallback(): void;
    validateProperties(): void;
    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    private onChange;
    private toggle;
    private handleKeyDown;
    private handleClick;
    private renderButtons;
    private renderContent;
    private renderHeading;
    renderAccordion(): TemplateResult;
}

declare type AccordionVariant = 'default' | 'collapsed' | 'clean' | 'clean-collapsed';

export declare type ActionType = {
    href?: string;
    target?: LinkTarget;
    rel?: string;
    text?: string;
    variant?: ButtonVariant;
    func?: () => void;
};

export declare type AlertType = 'default' | 'information' | 'successful' | 'error';

export declare type Alignment = 'vertical' | 'horizontal';

export declare const anchorClass = "dds-anchor";

declare type AvatarGroupLayout = 'stack' | 'grid';

declare type AvatarShape = 'circle' | 'rounded' | 'square';

declare type AvatarVariant = 'image' | 'initials' | 'icon';

export declare type BackgroundShade = 'subtle' | 'base' | 'medium' | 'strong';

declare type BadgeSize = 'sm' | 'lg';

export declare type BadgeType = 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative';

declare type BadgeType_2 = 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative';

declare type BadgeVariant = 'round' | 'dot';

declare type BannerVariant = 'brand' | 'positive' | 'info' | 'warning' | 'negative';

declare type BodyProps = {
    variant: Extract<TypographyVariant, 'body'>;
    size: TypographySize;
};

export declare type ButtonShape = 'button' | 'circle';

export declare type ButtonSize = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>;

declare type ButtonSize_2 = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>;

declare type ButtonVariant = 'primary' | 'outline' | 'subtle' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'subtle-menu' | 'subtle-menu-item';

declare type ButtonVariant_2 = 'neutral' | 'brand' | 'inverted' | 'inverted-brand';

declare type CalloutVariant = 'brand' | 'info' | 'positive' | 'warning' | 'negative';

declare type CaptionProps = {
    variant: Extract<TypographyVariant, 'caption'>;
    size: never;
};

declare type ChipSize = 'sm' | 'lg';

declare interface ChoiceElementMixinInterface {
    checked: boolean;
}

export { ColumnDef }

declare class ComboboxBaseElement extends GenericFormElement {
    readonly triggerInput: HTMLInputElement;
    readonly optionList: DapDSOptionList;
    placement: PopupPlacement;
    opened: boolean;
    searchMode: 'none' | 'typehead' | 'autocomplete' | 'manual';
    search: boolean;
    clearButton?: string;
    placeholder: string | null;
    sync?: boolean;
    allowManualInput?: boolean;
    searchForText?: boolean;
    searchOnValueSet?: string | undefined;
    loading?: boolean;
    selectable?: string;
    noAnimation?: boolean;
    textComplete?: boolean;
    openOnEmpty?: boolean;
    searchButtonAriaLabel?: string;
    subtle: boolean;
    multiselect: boolean;
    maxSelections?: number;
    selectedItem: any;
    selectedItems: any[];
    currentItem: any;
    selectedText: string;
    private optionListObserver;
    private isUserInteraction;
    private pendingInitialValues;
    static readonly styles: CSSResult;
    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>;
    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    /**
     * Handles value changes from outside the component
     * This ensures the selection state is updated when the value is set programmatically
     */
    private handleValueChange;
    private setupOptionListObserver;
    private updateComboboxState;
    /**
     * Updates the selection state based on the current value
     * This is useful when options are loaded asynchronously
     */
    private updateSelectionFromValue;
    private cleanupOptionListObserver;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
    get isAutoComplete(): boolean;
    /**
     * Get all option items directly from the combobox element
     * This is more reliable for dynamic updates than the option list component
     */
    private getComboboxOptions;
    get isOpenOnEmpty(): boolean;
    get isOpenOnAutocomplete(): boolean;
    get shouldHideClearIcon(): boolean;
    handleClick: () => void;
    private handleEnterKey;
    private handleCurrentItemEnter;
    private handleSearchEnter;
    private handleDefaultEnter;
    private handleSelectedItemChange;
    private handleTextSearch;
    private handleArrowKeys;
    handleKeyDown: (event: KeyboardEvent) => Promise<false | void | 0>;
    handleInput: (event: InputEvent) => Promise<void>;
    clearSelection(): Promise<void>;
    /**
     * Multiselect helper methods
     */
    private getSelectedValues;
    private isMaxSelectionsReached;
    private addSelectedItem;
    private removeSelectedItem;
    private clearAllSelections;
    private updateMultipleSelectionsFromValues;
    /**
     * Override value getter/setter to handle multiselect mode
     */
    get value(): string | undefined;
    set value(val: string | undefined);
    handleListKeyDown: (event: CustomEvent) => void;
    handleDocumentMouseDown: (event: MouseEvent) => void;
    handleFocus: () => void;
    handleBlur: () => void;
    showDropDown(): Promise<void>;
    hideDropDown(): Promise<void>;
    get focusElement(): HTMLInputElement;
    handleSelectedChange: (event: CustomEvent) => Promise<void>;
    handleOptionDeselect: (event: CustomEvent) => void;
    handleCurrentOptionChange: (event: CustomEvent) => void;
    handleListChanged: (event: CustomEvent) => void;
    handleClearClick: () => void;
    handleSearchClick: (event: MouseEvent) => void;
    private setSelectionRange;
    private clearSelectionRange;
    getValidity(): boolean;
    formResetCallback(): void;
    private getMultiSelectValidity;
    private getAutoCompleteValidity;
    private getManualInputValidity;
    private getSearchTextValidity;
    private getSelectedItemValidity;
    private getBasicValidity;
    get validity(): ValidityState;
    get validationMessage(): string;
    checkValidity(): boolean;
    reportValidity(): boolean;
    setValidity(): void;
    handleInvalid(event: Event): void;
    getActiveDescendant(): HTMLInputElement | DapDSOptionItem | null | undefined;
    getSearchIconSize(size: string): "lg" | "md" | "sm";
    getInnerIconSize(size: string): 10 | 16;
    private handleChipRemove;
    private renderChip;
    private renderChips;
    private renderInput;
    private renderClearButton;
    private renderIndicatorIcon;
    private renderSelectActions;
    private renderOptionList;
    renderCombobox(): TemplateResult_2;
}

export declare type Common<T> = Pick<T, keyof T>;

export declare type CommonFormElementSize = Extract<Size, 'sm' | 'md' | 'lg'>;

export declare type CommonSize = Extract<Size, 'sm' | 'lg'>;

export declare type CSSFlexDirection = 'column' | 'row' | 'column-reverse' | 'row-reverse';

/**
 * `dap-ds-accordion` is a custom accordion component.
 * @element dap-ds-accordion
 * @summary An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.
 * @title - Accordion
 *
 * @property { 'sm' | 'lg' } size - The size of the accordion. Default is `sm`.
 * @property {string} heading - The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided
 * @property { 1 | 2 | 3 | 4 | 5 | 6 } headingLevel - The heading level of the accordion. Default is `4`.
 * @property {boolean} opened - Whether the accordion is opened. Default is `false`.
 * @property { 'left' | 'right' } iconLocation - The location of the icon. Default is `right`.
 * @property { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } variant - The variant of the accordion.
 * @property {boolean} lastItem - Whether the accordion is the last item.
 * @property {boolean} disabled - Whether the accordion is disabled.
 * @property {boolean} loading - Whether the accordion is in loading state.
 *
 * @event {{ open: boolean, item: AccordionBaseElement }} dds-opened - Event fired when the accordion is opened.
 * @event {{ open: boolean, item: AccordionBaseElement }} dds-closed - Event fired when the accordion is closed.
 *
 * @slot default - The content of the accordion.
 * @slot heading - The heading of the accordion.
 * @slot icon-opened - The icon when the accordion is opened.
 * @slot icon-closed - The icon when the accordion is closed.
 *
 * @csspart base - The main accordion container.
 * @csspart heading - The heading of the accordion.
 * @csspart button - The button of the accordion.
 * @csspart content - The content of the accordion.
 * @csspart content-container - The container of the accordion content.
 * @csspart icon-wrapper - The icon wrapper of the accordion.
 * @csspart open-icon - The icon when the accordion is opened.
 * @csspart open-icon-base - The base of the icon when the accordion is opened.
 * @csspart close-icon - The icon when the accordion is closed.
 * @csspart close-icon-base - The base of the icon when the accordion is closed.
 *
 * @cssproperty --dds-accordion-border-width - The width of the accordion border (default: var(--dds-border-width-base))
 * @cssproperty --dds-accordion-border-style - The style of the accordion border (default: solid)
 * @cssproperty --dds-accordion-border-radius - The border radius of the accordion (default: var(--dds-radius-base))
 * @cssproperty --dds-accordion-border-color - The color of the accordion border (default: var(--dds-border-neutral-divider))
 * @cssproperty --dds-accordion-background-color - The background color of the accordion (default: var(--dds-background-neutral-subtle))
 * @cssproperty --dds-accordion-text-color - The text color of the accordion (default: var(--dds-text-neutral-strong))
 * @cssproperty --dds-accordion-hover-background - The background color when hovering over the accordion (default: var(--dds-background-neutral-base))
 * @cssproperty --dds-accordion-active-background - The background color when the accordion is active (default: var(--dds-background-neutral-medium))
 * @cssproperty --dds-accordion-icon-background - The background color of the accordion icon (default: var(--dds-transparent-black-subtle))
 * @cssproperty --dds-accordion-icon-color - The color of the accordion icon (default: var(--dds-icon-neutral-base))
 * @cssproperty --dds-accordion-icon-hover-background - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base))
 * @cssproperty --dds-accordion-icon-active-background - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong))
 * @cssproperty --dds-accordion-icon-hover-color - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong))
 * @cssproperty --dds-accordion-icon-active-color - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong))
 * @cssproperty --dds-accordion-content-color - The color of the accordion content (default: var(--dds-text-text-neutral))
 * @cssproperty --dds-accordion-transition-duration - The duration of the accordion transitions (default: var(--dds-transition-fast))
 * @cssproperty --dds-accordion-transition-timing - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out))
 * @cssproperty --dds-accordion-divider-color - The color of the divider between accordion items (default: var(--dds-border-neutral-divider))
 */
export declare class DapDSAccordion extends AccordionBaseElement {
    render(): TemplateResult_2;
}

/**
 * `dap-ds-accordion-group` is a custom accordion group component.
 * @element dap-ds-accordion-group
 * @summary An accordion group is a collection of accordion components.
 * @title - Accordion group
 * @group accordion
 *
 * @slot - The content of the accordion group.
 *
 * @csspart base - The main accordion group container.
 *
 * @cssproperty --dds-accordion-group-spacing - Controls the gap between accordion items (default: var(--dds-spacing-300))
 * @cssproperty --dds-accordion-group-border-color - Controls the border color (default: var(--dds-border-neutral-subtle))
 * @cssproperty --dds-accordion-group-border-width - Controls the border width (default: var(--dds-border-width-base))
 * @cssproperty --dds-accordion-group-border-radius - Controls the border radius (default: var(--dds-radius-base))
 * @cssproperty --dds-accordion-group-background - Controls the background color (default: transparent)
 */
export declare class DapDSAccordionGroup extends DdsElement {
    private readonly accordions;
    /** Whether to close other accordions when one is opened. */
    autoClose: string;
    /** The variant of the accordion
     * @type { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' }
     */
    variant: AccordionVariant;
    static readonly styles: CSSResult;
    private readonly boundOnAccordionChange;
    private readonly boundOnSlotChange;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected firstUpdated(_changedProperties: PropertyValueMap<DapDSAccordionGroup> | Map<PropertyKey, unknown>): void;
    private onSlotChange;
    private setupAccordions;
    private onAccordionChange;
    render(): TemplateResult_2;
}

/**
 * `dap-ds-anchor-heading`
 * @summary Anchor heading is a heading with an anchor link.
 * @element dap-ds-anchor-heading
 * @title - Anchor heading
 *
 * @attribute {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} variant - The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.
 * @attribute {string} label - The label of the heading.
 *
 * @csspart base - The main anchor heading container.
 * @csspart link - The link of the anchor heading. dap-ds-link element.
 * @csspart link-base - The base of the link part.
 * @csspart text - The text of the anchor heading.
 *
 * @cssproperty --dds-anchor-link-color - The color of the anchor link. Default is the primary color.
 * @cssproperty --dds-anchor-link-opacity - The opacity of the anchor link when not hovered. Default is 0.
 * @cssproperty --dds-anchor-link-hover-opacity - The opacity of the anchor link when hovered. Default is 1.
 * @cssproperty --dds-anchor-link-transition - The transition property for the anchor link opacity. Default is 'opacity 0.2s ease-in-out'.
 */
export declare class DapDSAnchorHeading extends DdsElement {
    variant: HeadingVariant;
    label: string;
    static readonly styles: CSSResult[];
    createRenderRoot(): this;
    get elementId(): string;
    get anchorTitle(): string;
    render(): TemplateResult_2;
}

/**
 * `dap-ds-avatar`
 * @summary Avatar component can be used to display user profile images, initials, or icons.
 * @element dap-ds-avatar
 * @title - Avatar
 *
 * @slot icon - The icon to display when variant is 'icon'.
 * @slot fallback - Custom fallback content when image fails to load.
 *
 * @event dds-click - Fired when the avatar is clicked (only when interactive).
 * @event dds-load - Fired when the image loads successfully.
 * @event dds-error - Fired when the image fails to load.
 *
 * @csspart base - The main avatar container.
 * @csspart img - The avatar image.
 * @csspart initials - The initials container.
 * @csspart icon - The icon container.
 * @csspart fallback - The fallback content container.
 * @csspart loading - The loading indicator.
 *
 * @cssproperty --dds-avatar-border-radius - The border radius of the avatar. Default varies by shape.
 * @cssproperty --dds-avatar-background-color - The background color of the avatar. Default is neutral.
 * @cssproperty --dds-avatar-border-width - The width of the avatar's border. Default is 0.
 * @cssproperty --dds-avatar-border-color - The color of the avatar's border. Default is transparent.
 * @cssproperty --dds-avatar-border-style - The style of the avatar's border. Default is solid.
 * @cssproperty --dds-avatar-transition - The transition property for the avatar. Default is 'all 0.2s ease-in-out'.
 * @cssproperty --dds-avatar-text-color - The color of initials text. Default is neutral strong.
 * @cssproperty --dds-avatar-font-size - The font size for initials. Calculated based on size.
 * @cssproperty --dds-avatar-font-weight - The font weight for initials. Default is semibold.
 *
 * @cssproperty --dds-avatar-size-lg - The size of the large avatar. Default is 80px.
 * @cssproperty --dds-avatar-size-md - The size of the medium avatar. Default is 64px.
 * @cssproperty --dds-avatar-size-sm - The size of the small avatar. Default is 48px.
 * @cssproperty --dds-avatar-size-xs - The size of the extra small avatar. Default is 32px.
 * @cssproperty --dds-avatar-size-xxs - The size of the extra extra small avatar. Default is 24px.
 */
export declare class DapDSAvatar extends DdsElement {
    /** The size of the avatar
     * @default md
     * @type { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' }
     * @example
     * ```html
     * <dap-ds-avatar size="xxs">
     * <dap-ds-avatar size="xs">
     * <dap-ds-avatar size="sm">
     * <dap-ds-avatar size="md">
     * <dap-ds-avatar size="lg">
     * ```
     */
    size: Size;
    /** The shape of the avatar
     * @default circle
     * @type { 'circle' | 'rounded' | 'square' }
     * @example
     * ```html
     * <dap-ds-avatar shape="circle">
     * <dap-ds-avatar shape="rounded">
     * <dap-ds-avatar shape="square">
     * ```
     */
    shape: AvatarShape;
    /** The variant type of the avatar
     * @default image
     * @type { 'image' | 'initials' | 'icon' }
     * @example
     * ```html
     * <dap-ds-avatar variant="image">
     * <dap-ds-avatar variant="initials">
     * <dap-ds-avatar variant="icon">
     * ```
     */
    variant: AvatarVariant;
    /** The source of the avatar image */
    src: string;
    /** The alt text of the avatar */
    alt: string;
    /** The initials to display when variant is 'initials' */
    initials: string;
    /** Accessible label for the avatar */
    label: string;
    /** Loading state indicator */
    loading: boolean;
    /** Whether the avatar is interactive (clickable) */
    interactive: boolean;
    /** The width of the avatar. This will override the size */
    width: number;
    /** The height of the avatar. This will override the size */
    height: number;
    private hasImageError;
    private isImageLoading;
    static readonly styles: CSSResult;
    private handleImageLoad;
    private handleImageError;
    private handleClick;
    private generateInitials;
    private mapSizeToSpinnerSize;
    private renderImage;
    private renderInitials;
    private renderIcon;
    private renderFallback;
    private renderLoading;
    private renderContent;
    render(): TemplateResult_2;
}

/**
 * `dap-ds-avatar-group`
 * @summary Avatar group component displays multiple avatars in an organized layout with overflow management.
 * @element dap-ds-avatar-group
 * @title - Avatar Group
 * @group avatar
 *
 * @slot - The avatars to display in the group.
 *
 * @event dds-overflow-click - Fired when the overflow indicator is clicked.
 *
 * @csspart base - The main container of the avatar group.
 * @csspart avatars - The container for the visible avatars.
 * @csspart overflow - The overflow indicator element.
 *
 * @cssproperty --dds-avatar-group-gap - Gap between avatars in grid layout. Default is 0.
 * @cssproperty --dds-avatar-group-overlap - Overlap amount for stacked layout. Default is -8px.
 * @cssproperty --dds-avatar-group-border-width - Border width for avatars. Default is 2px.
 * @cssproperty --dds-avatar-group-border-color - Border color for avatars. Default is white.
 * @cssproperty --dds-avatar-group-overflow-bg - Background color for overflow indicator.
 * @cssproperty --dds-avatar-group-overflow-color - Text color for overflow indicator.
 * @cssproperty --dds-avatar-group-overflow-border - Border for overflow indicator.
 * @cssproperty --dds-avatar-group-size-lg - Size for large avatars. Default is 80px.
 * @cssproperty --dds-avatar-group-size-md - Size for medium avatars. Default is 64px.
 * @cssproperty --dds-avatar-group-size-sm - Size for small avatars. Default is 48px.
 * @cssproperty --dds-avatar-group-size-xs - Size for extra small avatars. Default is 32px.
 * @cssproperty --dds-avatar-group-size-xxs - Size for extra extra small avatars. Default is 24px.
 */
export declare class DapDSAvatarGroup extends DdsElement {
    private avatars;
    /** The size of avatars in the group
     * @default md
     * @type { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' }
     * @example
     * ```html
     * <dap-ds-avatar-group size="xxs">
     * <dap-ds-avatar-group size="xs">
     * <dap-ds-avatar-group size="sm">
     * <dap-ds-avatar-group size="md">
     * <dap-ds-avatar-group size="lg">
     * ```
     */
    size: Size;
    /** Layout type for the avatar group
     * @default stack
     * @type { 'stack' | 'grid' }
     * @example
     * ```html
     * <dap-ds-avatar-group layout="stack">
     * <dap-ds-avatar-group layout="grid">
     * ```
     */
    layout: AvatarGroupLayout;
    /** Maximum number of avatars to show before showing overflow */
    max: number;
    /** Whether to show the total count in overflow indicator */
    showTotal: boolean;
    /** Interactive overflow indicator */
    interactiveOverflow: boolean;
    /** Accessible label for the avatar group */
    label: string;
    /** Accessible label for the overflow indicator */
    overflowLabel: string;
    static readonly styles: CSSResult;
    connectedCallback(): void;
    firstUpdated(): void;
    updated(changedProperties: Map<string | number | symbol, unknown>): void;
    private handleOverflowClick;
    private renderOverflowIndicator;
    private styleSlottedAvatars;
    render(): TemplateResult_2;
}

/**
 * `dap-ds-badge`
 * @summary A badge is a small status descriptor for UI elements.
 * @element dap-ds-badge
 * @title - Badge
 *
 * @slot - The content of the badge.
 * @slot icon - The icon of the badge.
 *
 * @csspart base - The main container of the badge.
 * @csspart icon - The icon of the badge.
 * @csspart content - The content of the badge.
 * @csspart icon-base - The base of the icon.
 *
 * @cssproperty --dds-badge-border-width - The width of the badge's border. Default is the design system's base border width.
 * @cssproperty --dds-badge-border-style - The style of the badge's border. Default is solid.
 * @cssproperty --dds-badge-border-radius - The border radius of the badge. Default is the design system's base radius.
 * @cssproperty --dds-badge-font-weight - The font weight of the badge text. Default is bold.
 * @cssproperty --dds-badge-line-height - The line height of the badge text. Default is 1.2.
 * @cssproperty --dds-badge-transition - The transition property for the badge. Default is 'all 0.2s ease-in-out'.
 *
 * @cssproperty --dds-badge-padding-sm - The padding of the small badge. Default is the design system's spacing-100 and spacing-200.
 * @cssproperty --dds-badge-padding-lg - The padding of the large badge. Default is the design system's spacing-100 and spacing-300.
 * @cssproperty --dds-badge-font-size-sm - The font size of the small badge. Default is the design system's font-xs.
 * @cssproperty --dds-badge-font-size-lg - The font size of the large badge. Default is the design system's font-sm.
 *
 * @cssproperty --dds-badge-neutral-border-color - The border color of the neutral badge. Default is the design system's border-neutral-base.
 * @cssproperty --dds-badge-neutral-background - The background color of the neutral badge. Default is the design system's background-neutral-medium.
 * @cssproperty --dds-badge-neutral-color - The text color of the neutral badge. Default is the design system's text-neutral-subtle.
 *
 * @cssproperty --dds-badge-brand-border-color - The border color of the brand badge. Default is the design system's border-brand-base.
 * @cssproperty --dds-badge-brand-background - The background color of the brand badge. Default is the design system's background-brand-medium.
 * @cssproperty --dds-badge-brand-color - The text color of the brand badge. Default is the design system's text-brand-subtle.
 *
 * @cssproperty --dds-badge-info-border-color - The border color of the info badge. Default is the design system's border-informative-base.
 * @cssproperty --dds-badge-info-background - The background color of the info badge. Default is the design system's background-informative-medium.
 * @cssproperty --dds-badge-info-color - The text color of the info badge. Default is the design system's text-informative-subtle.
 *
 * @cssproperty --dds-badge-positive-border-color - The border color of the positive badge. Default is the design system's border-positive-base.
 * @cssproperty --dds-badge-positive-background - The background color of the positive badge. Default is the design system's background-positive-medium.
 * @cssproperty --dds-badge-positive-color - The text color of the positive badge. Default is the design system's text-positive-subtle.
 *
 * @cssproperty --dds-badge-warning-border-color - The border color of the warning badge. Default is the design system's border-warning-subtle.
 * @cssproperty --dds-badge-warning-background - The background color of the warning badge. Default is the design system's background-warning-medium.
 * @cssproperty --dds-badge-warning-color - The text color of the warning badge. Default is the design system's text-warning-subtle.
 *
 * @cssproperty --dds-badge-negative-border-color - The border color of the negative badge. Default is the design system's border-negative-base.
 * @cssproperty --dds-badge-negative-background - The background color of the negative badge. Default is the design system's background-negative-medium.
 * @cssproperty --dds-badge-negative-color - The text color of the negative badge. Default is the design system's text-negative-subtle.
 */
export declare class DapDSBadge extends DdsElement {
    /** The type of the badge
     * @type { 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative' }
     */
    type: BadgeType_2;
    /** The size of the badge
     * @type { 'sm' | 'lg' }
     */
    size: BadgeSize;
    /** The icon of the badge, this is a name of a built in icon */
    icon?: string;
    /** Whether the badge represents dynamic content that should announce changes */
    live: boolean;
    private _hasSlottedIcon;
    private _cachedIconSize;
    static readonly styles: CSSResult;
    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    private setAccessibilityAttributes;
    private validateIcon;
    private setupSlotListeners;
    private updateIconSlot;
    private getIconSize;
    private renderIcon;
    render(): TemplateResult_2;
}

/**
 * `dap-ds-banner` is a custom banner component.
 * @element dap-ds-banner
 * @summary A banner is a message displayed at the top of the page to provide important information to the user.
 * @title - Banner
 *
 * @event {{ void }} dds-close - Event fired when the banner is closed.
 *
 * @slot - The content of the banner.
 * @slot actions - Actions of banner
 * @slot icon - The icon of the banner.
 *
 * @csspart base - The main banner container.
 * @csspart card-base - The wrapper card container.
 * @csspart icon - The icon of the banner.
 * @csspart icon-element - The icon element of the banner.
 * @csspart icon-base - The base of the icon.
 * @csspart closebutton - The close button of the banner.
 * @csspart close-icon-element - The icon element of the close button.
 * @csspart close-icon-base - The base of the close button icon.
 * @csspart actions - The actions of the banner.
 * @csspart title -  The title of the banner.
 *
 * @cssproperty --dds-banner-gap - The gap between banner elements. Default is the design system's spacing-200.
 * @cssproperty --dds-banner-line-height - The line height of the banner text. Default is the design system's font-line-height-xlarge.
 * @cssproperty --dds-banner-transition - The transition property for the banner. Default is 'all 0.2s ease-in-out'.
 *
 * @cssproperty --dds-banner-brand-background - The background color of the brand banner. Default is the design system's banner-background-brand.
 * @cssproperty --dds-banner-brand-icon-color - The color of the brand banner icon. Default is the design system's banner-icon-brand.
 * @cssproperty --dds-banner-brand-text-color - The text color of the brand banner. Default is the design system's banner-text-brand.
 * @cssproperty --dds-banner-brand-action-color - The color of the brand banner actions. Default is the design system's banner-action-enabled.
 *
 * @cssproperty --dds-banner-info-background - The background color of the info banner. Default is the design system's banner-background-informative.
 * @cssproperty --dds-banner-info-icon-color - The color of the info banner icon. Default is the design system's banner-icon-informative.
 * @cssproperty --dds-banner-info-text-color - The text color of the info banner. Default is the design system's banner-text-informative.
 * @cssproperty --dds-banner-info-action-color - The color of the info banner actions. Default is the design system's banner-action-enabled.
 *
 * @cssproperty --dds-banner-positive-background - The background color of the positive banner. Default is the design system's banner-background-positive.
 * @cssproperty --dds-banner-positive-icon-color - The color of the positive banner icon. Default is the design system's banner-icon-positive.
 * @cssproperty --dds-banner-positive-text-color - The text color of the positive banner. Default is the design system's banner-text-positive.
 * @cssproperty --dds-banner-positive-action-color - The color of the positive banner actions. Default is the design system's banner-action-enabled.
 *
 * @cssproperty --dds-banner-warning-background - The background color of the warning banner. Default is the design system's banner-background-warning.
 * @cssproperty --dds-banner-warning-icon-color - The color of the warning banner icon. Default is the design system's banner-icon-warning.
 * @cssproperty --dds-banner-warning-text-color - The text color of the warning banner. Default is the design system's banner-text-warning.
 * @cssproperty --dds-banner-warning-action-color - The color of the warning banner actions. Default is the design system's banner-action-inverted-enabled.
 *
 * @cssproperty --dds-banner-negative-background - The background color of the negative banner. Default is the design system's banner-background-negative.
 * @cssproperty --dds-banner-negative-icon-color - The color of the negative banner icon. Default is the design system's banner-icon-negative.
 * @cssproperty --dds-banner-negative-text-color - The text color of the negative banner. Default is the design system's banner-text-negative.
 * @cssproperty --dds-banner-negative-action-color - The color of the negative banner actions. Default is the design system's banner-action-inverted-enabled.
 */
export declare class DapDSBanner extends DdsElement {
    /** @ignore */
    actionSlot: HTMLElement[];
    /** @ignore */
    actionContainer: HTMLElement;
    /** The variant of the banner
     * @type { 'brand' | 'positive' | 'info' | 'warning' | 'negative' }
     */
    variant: BannerVariant;
    /** Whether the banner is closeable */
    closeable: boolean;
    /** State of the banner. If false banner is hidden */
    opened: string;
    /** The aria-label for the close button */
    closeButtonLabel: string;
    /** The icon of the banner, this is a name of a built icon icon */
    icon: string;
    static readonly styles: CSSResult;
    protected firstUpdated(_changedProperties: PropertyValueMap<DapDSBanner> | Map<PropertyKey, unknown>): void;
    private onCloseClick;
    render(): TemplateResult_2 | typeof nothing;
}

/**
 * `dap-ds-breadcrumb`
 * @summary A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.
 * @element dap-ds-breadcrumb
 * @title - Breadcrumb
 *
 * @slot - The content of the breadcrumb.
 * @slot separator - The separator between breadcrumb items. Default is '/'.
 *
 * @csspart base - The main breadcrumb container.
 * @csspart separator - The separator of the breadcrumb.
 *
 * @cssproperty --dds-breadcrumb-width - The width of the breadcrumb container. Default is 100%.
 * @cssproperty --dds-breadcrumb-overflow-x - The horizontal overflow behavior of the breadcrumb. Default is auto.
 * @cssproperty --dds-breadcrumb-transition - The transition property for the breadcrumb. Default is 'all 0.2s ease-in-out'.
 *
 * @cssproperty --dds-breadcrumb-list-display - The display property of the breadcrumb list. Default is flex.
 * @cssproperty --dds-breadcrumb-list-flex-wrap - The flex-wrap property of the breadcrumb list. Default is nowrap.
 * @cssproperty --dds-breadcrumb-list-align-items - The align-items property of the breadcrumb list. Default is center.
 * @cssproperty --dds-breadcrumb-list-min-width - The minimum width of the breadcrumb list. Default is max-content.
 */
export declare class DapDSBreadcrumb extends DdsElement {
    static readonly styles: CSSResult;
    /** @ignore */
    defaultSlot: HTMLSlotElement;
    /** @ignore */
    separatorSlot: HTMLSlotElement;
    variant: string;
    /** Mobile version of the breadcrumb */
    mobile: boolean;
    /** The aria-labelledby of the breadcrumb */
    ariaLabelledBy?: string;
    private _cachedItems;
    private _debounceTimeout?;
    private cloneSeparator;
    private handleSlotChange;
    private _updateBreadcrumbItems;
    render(): TemplateResult_2<1>;
}

/**
 * `dap-ds-breadcrumb-item` custom element.
 * @element dap-ds-breadcrumb-item
 * @summary A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.
 * @title - Breadcrumb item
 * @group breadcrumb
 *
 * @slot - The content of the breadcrumb item.
 * @slot separator - The separator between breadcrumb items. Default is an arrow-right-s-line icon.
 *
 * @csspart base - The main breadcrumb item container. The li element.
 * @csspart link - The link of the breadcrumb item. The dds-link component.
 * @csspart link-base - The base part of the link part. The dds-link components base part.
 * @csspart item-nolink - The item of the breadcrumb item without a link. The span element.
 * @csspart separator - The separator of the breadcrumb item.
 *
 * @cssproperty --dds-breadcrumb-item-display - The display property of the breadcrumb item. Default is inline-flex.
 * @cssproperty --dds-breadcrumb-item-flex-wrap - The flex-wrap property of the breadcrumb item. Default is nowrap.
 * @cssproperty --dds-breadcrumb-item-align-items - The align-items property of the breadcrumb item. Default is center.
 * @cssproperty --dds-breadcrumb-item-color - The text color of the breadcrumb item. Default is the design system's text-neutral-base.
 * @cssproperty --dds-breadcrumb-item-transition - The transition property for the breadcrumb item. Default is 'all 0.2s ease-in-out'.
 * @cssproperty --dds-breadcrumb-item-gap - The gap between the breadcrumb item and the separator. Default is the design system's spacing-200.
 *
 * @cssproperty --dds-breadcrumb-item-padding - The padding of the breadcrumb item. Default is the design system's spacing-200.
 * @cssproperty --dds-breadcrumb-item-font-size - The font size of the breadcrumb item. Default is the design system's font-sm.
 * @cssproperty --dds-breadcrumb-item-font-weight - The font weight of the breadcrumb item. Default is the design system's font-weight-medium.
 * @cssproperty --dds-breadcrumb-item-font-weight-bold - The bold font weight of the breadcrumb item. Default is the design system's font-weight-bold.
 *
 * @cssproperty --dds-breadcrumb-item-separator-color - The color of the separator. Default is the design system's text-neutral-disabled.
 * @cssproperty --dds-breadcrumb-item-link-color - The color of the link. Default is the design system's link-neutral-enabled.
 * @cssproperty --dds-breadcrumb-item-inverted-color - The text color when inverted. Default is the design system's text-neutral-inverted.
 * @cssproperty --dds-breadcrumb-item-inverted-link-color - The link color when inverted. Default is the design system's text-neutral-inverted.
 */
export declare class DapDSBreadcrumbItem extends DdsElement {
    /** The URL of the breadcrumb item. */
    href?: string;
    /** The target of the breadcrumb item.
     * @type {'_blank' | '_self' | '_parent' | '_top'}
     */
    target?: LinkTarget;
    /** The rel of the breadcrumb item link. */
    rel: string;
    /** Whether the breadcrumb item is disabled. */
    disabled: boolean;
    /** The variant of the breadcrumb item.
     * @type {'normal' | 'inverted'}
     */
    variant: string;
    static readonly styles: CSSResult;
    render(): TemplateResult_2<1>;
    private _shouldIncludeRel;
}

/**
 * `dap-ds-button` is a versatile button component for triggering actions and navigation.
 * @element dap-ds-button
 * @summary A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.
 * @title - Button
 *
 * @example Basic Usage
 * ```html
 * <dap-ds-button>Click me</dap-ds-button>
 * <dap-ds-button variant="outline">Secondary action</dap-ds-button>
 * <dap-ds-button href="/dashboard">Navigate</dap-ds-button>
 * ```
 *
 * @example Form Integration
 * ```html
 * <form>
 *   <dap-ds-button htmlType="submit">Submit Form</dap-ds-button>
 *   <dap-ds-button htmlType="reset" variant="outline">Reset</dap-ds-button>
 * </form>
 * ```
 *
 * @example Accessibility
 * ```html
 * <!-- Icon-only buttons require aria-label -->
 * <dap-ds-button aria-label="Close dialog" shape="circle">
 *   <dap-ds-icon name="close-line"></dap-ds-icon>
 * </dap-ds-button>
 * ```
 *
 * @event dds-loading-timeout - Emitted when the loading timeout is reached
 *
 * @slot - The content of the button. Can contain text, icons, or other elements.
 *
 * @csspart base - The main button container.
 * @csspart high-contrast - The high contrast part of the button.
 * @csspart content - The content wrapper inside the button.
 *
 * @cssproperty --dds-button-padding-x - Horizontal padding of the button (default: var(--dds-spacing-300))
 * @cssproperty --dds-button-padding-y - Vertical padding of the button (default: var(--dds-spacing-300))
 * @cssproperty --dds-button-border-radius - Border radius of the button (default: var(--dds-radius-rounded))
 * @cssproperty --dds-button-font-weight - Font weight of the button (default: 700)
 * @cssproperty --dds-button-line-height - Line height of the button (default: var(--dds-font-line-height-large))
 * @cssproperty --dds-button-transition - Transition property of the button (default: all 0.2s ease-in-out)
 * @cssproperty --dds-button-disabled-opacity - Opacity of disabled button (default: 0.5)
 *
 * @cssproperty --dds-button-size-lg - Size of large button (default: var(--dds-spacing-1200))
 * @cssproperty --dds-button-size-md - Size of medium button (default: var(--dds-spacing-1000))
 * @cssproperty --dds-button-size-sm - Size of small button (default: var(--dds-spacing-800))
 * @cssproperty --dds-button-size-xs - Size of extra small button (default: var(--dds-spacing-600))
 *
 * @cssproperty --dds-button-circle-lg - Size of large circle button (default: var(--dds-spacing-1200))
 * @cssproperty --dds-button-circle-md - Size of medium circle button (default: var(--dds-spacing-1000))
 * @cssproperty --dds-button-circle-sm - Size of small circle button (default: var(--dds-spacing-800))
 * @cssproperty --dds-button-circle-xs - Size of extra small circle button (default: var(--dds-spacing-600))
 *
 * Primary button properties:
 * @cssproperty --dds-button-primary-color-bg - Background color of primary button (default: var(--dds-button-primary-background-enabled))
 * @cssproperty --dds-button-primary-color-bg-hover - Background color of primary button on hover (default: var(--dds-button-primary-background-hover))
 * @cssproperty --dds-button-primary-color-bg-active - Background color of primary button when active (default: var(--dds-button-primary-background-pressed))
 * @cssproperty --dds-button-primary-color-bg-disabled - Background color of disabled primary button (default: var(--dds-button-primary-background-disabled))
 * @cssproperty --dds-button-primary-color-text - Text color of primary button (default: var(--dds-button-primary-text-enabled))
 * @cssproperty --dds-button-primary-color-text-disabled - Text color of disabled primary button (default: var(--dds-button-primary-text-disabled))
 *
 * Primary inverted button properties:
 * @cssproperty --dds-button-primary-inverted-color-bg - Background color of primary inverted button (default: var(--dds-button-primary-background-inverted-enabled))
 * @cssproperty --dds-button-primary-inverted-color-bg-hover - Background color of primary inverted button on hover (default: var(--dds-button-primary-background-inverted-hover))
 * @cssproperty --dds-button-primary-inverted-color-bg-active - Background color of primary inverted button when active (default: var(--dds-button-primary-background-inverted-pressed))
 * @cssproperty --dds-button-primary-inverted-color-bg-disabled - Background color of disabled primary inverted button (default: var(--dds-button-primary-background-inverted-disabled))
 * @cssproperty --dds-button-primary-inverted-color-text - Text color of primary inverted button (default: var(--dds-button-primary-text-inverted))
 * @cssproperty --dds-button-primary-inverted-color-text-disabled - Text color of disabled primary inverted button (default: var(--dds-button-primary-text-inverted-disabled))
 *
 * Outline button properties:
 * @cssproperty --dds-button-outline-color-border - Border color of outline button (default: var(--dds-button-outline-border-enabled))
 * @cssproperty --dds-button-outline-color-border-hover - Border color of outline button on hover (default: var(--dds-button-outline-border-hover))
 * @cssproperty --dds-button-outline-color-border-active - Border color of outline button when active (default: var(--dds-button-outline-border-pressed))
 * @cssproperty --dds-button-outline-color-border-disabled - Border color of disabled outline button (default: var(--dds-button-outline-border-disabled))
 * @cssproperty --dds-button-outline-color-text - Text color of outline button (default: var(--dds-button-outline-text-enabled))
 * @cssproperty --dds-button-outline-color-text-hover - Text color of outline button on hover (default: var(--dds-button-outline-text-hover))
 * @cssproperty --dds-button-outline-color-text-active - Text color of outline button when active (default: var(--dds-button-outline-text-pressed))
 * @cssproperty --dds-button-outline-color-text-disabled - Text color of disabled outline button (default: var(--dds-button-outline-text-disabled))
 *
 * Outline inverted button properties:
 * @cssproperty --dds-button-outline-inverted-color-border - Border color of outline inverted button (default: var(--dds-button-outline-border-inverted-enabled))
 * @cssproperty --dds-button-outline-inverted-color-border-hover - Border color of outline inverted button on hover (default: var(--dds-button-outline-border-inverted-hover))
 * @cssproperty --dds-button-outline-inverted-color-border-active - Border color of outline inverted button when active (default: var(--dds-button-outline-border-inverted-pressed))
 * @cssproperty --dds-button-outline-inverted-color-border-disabled - Border color of disabled outline inverted button (default: var(--dds-button-outline-border-inverted-disabled))
 * @cssproperty --dds-button-outline-inverted-color-text - Text color of outline inverted button (default: var(--dds-button-outline-text-inverted-enabled))
 * @cssproperty --dds-button-outline-inverted-color-text-hover - Text color of outline inverted button on hover (default: var(--dds-button-outline-text-inverted-hover))
 * @cssproperty --dds-button-outline-inverted-color-text-active - Text color of outline inverted button when active (default: var(--dds-button-outline-text-inverted-pressed))
 * @cssproperty --dds-button-outline-inverted-color-text-disabled - Text color of disabled outline inverted button (default: var(--dds-button-outline-text-inverted-disabled))
 *
 * Subtle button properties:
 * @cssproperty --dds-button-subtle-color-bg - Background color of subtle button (default: var(--dds-button-subtle-background-enabled))
 * @cssproperty --dds-button-subtle-color-bg-hover - Background color of subtle button on hover (default: var(--dds-button-subtle-background-hover))
 * @cssproperty --dds-button-subtle-color-bg-active - Background color of subtle button when active (default: var(--dds-button-subtle-background-pressed))
 * @cssproperty --dds-button-subtle-color-bg-disabled - Background color of disabled subtle button (default: var(--dds-button-subtle-background-disabled))
 * @cssproperty --dds-button-subtle-color-border - Border color of subtle button (default: var(--dds-button-subtle-border-enabled))
 * @cssproperty --dds-button-subtle-color-border-hover - Border color of subtle button on hover (default: var(--dds-button-subtle-border-hover))
 * @cssproperty --dds-button-subtle-color-border-active - Border color of subtle button when active (default: var(--dds-button-subtle-border-pressed))
 * @cssproperty --dds-button-subtle-color-border-disabled - Border color of disabled subtle button (default: var(--dds-button-subtle-border-disabled))
 * @cssproperty --dds-button-subtle-color-text - Text color of subtle button (default: var(--dds-button-subtle-text-enabled))
 * @cssproperty --dds-button-subtle-color-text-hover - Text color of subtle button on hover (default: var(--dds-button-subtle-text-hover))
 * @cssproperty --dds-button-subtle-color-text-active - Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed))
 * @cssproperty --dds-button-subtle-color-text-disabled - Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled))
 *
 * Clean button properties:
 * @cssproperty --dds-button-clean-color-text - Text color of clean button (default: var(--dds-text-link-base))
 * @cssproperty --dds-button-clean-color-text-hover - Text color of clean button on hover (default: var(--dds-text-link-hover))
 * @cssproperty --dds-button-clean-color-text-active - Text color of clean button when active (default: var(