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'; 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 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 | Map): 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"; /** * `dap-ds-icon-arrow-down-line` * @summary An icon * @element dap-ds-icon-arrow-down-line * @title - ArrowsArrowDownLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowDownLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-down-s-fill` * @summary An icon * @element dap-ds-icon-arrow-down-s-fill * @title - ArrowsArrowDownSFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowDownSFill extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-down-s-line` * @summary An icon * @element dap-ds-icon-arrow-down-s-line * @title - ArrowsArrowDownSLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowDownSLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-left-down-line` * @summary An icon * @element dap-ds-icon-arrow-left-down-line * @title - ArrowsArrowLeftDownLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowLeftDownLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-left-line` * @summary An icon * @element dap-ds-icon-arrow-left-line * @title - ArrowsArrowLeftLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowLeftLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-left-l-line` * @summary An icon * @element dap-ds-icon-arrow-left-l-line * @title - ArrowsArrowLeftLLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowLeftLLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-left-s-fill` * @summary An icon * @element dap-ds-icon-arrow-left-s-fill * @title - ArrowsArrowLeftSFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowLeftSFill extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-left-s-line` * @summary An icon * @element dap-ds-icon-arrow-left-s-line * @title - ArrowsArrowLeftSLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowLeftSLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-left-up-line` * @summary An icon * @element dap-ds-icon-arrow-left-up-line * @title - ArrowsArrowLeftUpLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowLeftUpLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-right-down-line` * @summary An icon * @element dap-ds-icon-arrow-right-down-line * @title - ArrowsArrowRightDownLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowRightDownLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-right-line` * @summary An icon * @element dap-ds-icon-arrow-right-line * @title - ArrowsArrowRightLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowRightLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-right-l-line` * @summary An icon * @element dap-ds-icon-arrow-right-l-line * @title - ArrowsArrowRightLLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowRightLLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-right-s-fill` * @summary An icon * @element dap-ds-icon-arrow-right-s-fill * @title - ArrowsArrowRightSFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowRightSFill extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-right-s-line` * @summary An icon * @element dap-ds-icon-arrow-right-s-line * @title - ArrowsArrowRightSLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowRightSLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-right-up-line` * @summary An icon * @element dap-ds-icon-arrow-right-up-line * @title - ArrowsArrowRightUpLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowRightUpLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-up-line` * @summary An icon * @element dap-ds-icon-arrow-up-line * @title - ArrowsArrowUpLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowUpLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-up-s-fill` * @summary An icon * @element dap-ds-icon-arrow-up-s-fill * @title - ArrowsArrowUpSFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowUpSFill extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-arrow-up-s-line` * @summary An icon * @element dap-ds-icon-arrow-up-s-line * @title - ArrowsArrowUpSLine * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsArrowUpSLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-expand-up-down-fill` * @summary An icon * @element dap-ds-icon-expand-up-down-fill * @title - ArrowsExpandUpDownFill * @group icon * @icontype arrows * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class ArrowsExpandUpDownFill extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } 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; size: TypographySize; }; /** * `dap-ds-icon-home-6-line` * @summary An icon * @element dap-ds-icon-home-6-line * @title - BuildingsHome6Line * @group icon * @icontype buildings * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class BuildingsHome6Line extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } /** * `dap-ds-icon-calendar-line` * @summary An icon * @element dap-ds-icon-calendar-line * @title - BusinessCalendarLine * @group icon * @icontype business * * @attribute {number} size - (optional) The width and height in pixels * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus * * @csspart base - The main icon container. */ export declare class BusinessCalendarLine extends DdsElement { /** (optional) The width and height in pixels */ size?: number | undefined; /** (optional) Sets the icon color via the `fill` attribute */ selected?: boolean; /** (optional) When using the icon standalone, make it meaningful for accessibility */ accessibilityTitle?: string; /** (optional) If `true` the icon can receive focus */ focusable?: boolean; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; render(): TemplateResult_2; } export declare type ButtonShape = 'button' | 'circle'; export declare type ButtonSize = Extract; declare type ButtonSize_2 = Extract; 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; size: never; }; 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; selectedItem: any; currentItem: any; selectedText: string; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): Promise; attributeChangedCallback(name: string, _old: string | null, value: string | null): void; get isAutoComplete(): boolean; 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; handleInput: (event: InputEvent) => Promise; clearSelection(): Promise; handleListKeyDown: (event: CustomEvent) => void; handleDocumentMouseDown: (event: MouseEvent) => void; handleFocus: () => void; handleBlur: () => void; showDropDown(): Promise; hideDropDown(): Promise; get focusElement(): HTMLInputElement; handleSelectedChange: (event: CustomEvent) => Promise; handleCurrentOptionChange: (event: CustomEvent) => void; handleListChanged: (event: CustomEvent) => void; handleClearClick: () => void; handleSearchClick: (event: MouseEvent) => void; private setSelectionRange; private clearSelectionRange; getValidity(): boolean; formResetCallback(): void; 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 renderInput; private renderClearButton; private renderIndicatorIcon; private renderSelectActions; private renderOptionList; renderCombobox(): TemplateResult_2; } export declare type Common = Pick; export declare type CommonFormElementSize = Extract; export declare type CommonSize = Extract; 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 { 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 | Map): 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 * * * * * * ``` */ size: Size; /** The shape of the avatar * @default circle * @type { 'circle' | 'rounded' | 'square' } * @example * ```html * * * * ``` */ shape: AvatarShape; /** The variant type of the avatar * @default image * @type { 'image' | 'initials' | 'icon' } * @example * ```html * * * * ``` */ 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 * * * * * * ``` */ size: Size; /** Layout type for the avatar group * @default stack * @type { 'stack' | 'grid' } * @example * ```html * * * ``` */ 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): 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 | Map): void; protected updated(_changedProperties: PropertyValueMap | Map): 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 | Map): 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 * Click me * Secondary action * Navigate * ``` * * @example Form Integration * ```html *
* Submit Form * Reset *
* ``` * * @example Accessibility * ```html * * * * * ``` * * @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(--dds-text-link-pressed)) * @cssproperty --dds-button-clean-color-text-disabled - Text color of disabled clean button (default: var(--dds-text-neutral-disabled)) * * Clean inverted button properties: * @cssproperty --dds-button-clean-inverted-color-text - Text color of clean inverted button (default: var(--dds-button-primary-text-inverted)) * @cssproperty --dds-button-clean-inverted-color-text-hover - Text color of clean inverted button on hover (default: var(--dds-button-primary-text-inverted)) * @cssproperty --dds-button-clean-inverted-color-text-active - Text color of clean inverted button when active (default: var(--dds-button-primary-text-inverted)) * @cssproperty --dds-button-clean-inverted-color-text-disabled - Text color of disabled clean inverted button (default: var(--dds-text-neutral-disabled)) * * Danger button properties: * @cssproperty --dds-button-danger-color-bg - Background color of danger button (default: var(--dds-button-primary-background-destructive-enabled)) * @cssproperty --dds-button-danger-color-bg-hover - Background color of danger button on hover (default: var(--dds-button-primary-background-destructive-hover)) * @cssproperty --dds-button-danger-color-bg-active - Background color of danger button when active (default: var(--dds-button-primary-background-destructive-pressed)) * @cssproperty --dds-button-danger-color-text - Text color of danger button (default: var(--dds-button-primary-text-enabled)) * @cssproperty --dds-button-danger-outline-color-border - Border color of danger outline button (default: var(--dds-button-outline-border-destructive-enabled)) * @cssproperty --dds-button-danger-outline-color-border-hover - Border color of danger outline button on hover (default: var(--dds-button-outline-border-destructive-hover)) * @cssproperty --dds-button-danger-outline-color-border-active - Border color of danger outline button when active (default: var(--dds-button-outline-border-destructive-pressed)) * @cssproperty --dds-button-danger-outline-color-text - Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled)) * @cssproperty --dds-button-danger-outline-color-text-hover - Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover)) * @cssproperty --dds-button-danger-outline-color-text-active - Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed)) * @cssproperty --dds-button-danger-subtle-color-bg - Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled)) * @cssproperty --dds-button-danger-subtle-color-bg-hover - Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover)) * @cssproperty --dds-button-danger-subtle-color-bg-active - Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed)) * @cssproperty --dds-button-danger-subtle-color-text - Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled)) * @cssproperty --dds-button-danger-subtle-color-text-hover - Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover)) * @cssproperty --dds-button-danger-subtle-color-text-active - Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed)) * @cssproperty --dds-button-danger-clean-color-text - Text color of danger clean button (default: var(--dds-text-negative-subtle)) * @cssproperty --dds-button-danger-clean-color-text-hover - Text color of danger clean button on hover (default: var(--dds-text-negative-base)) * @cssproperty --dds-button-danger-clean-color-text-active - Text color of danger clean button when active (default: var(--dds-text-negative-strong)) */ export declare class DapDSButton extends GenericFormElement { /** * @ignore */ readonly button: HTMLButtonElement | HTMLLinkElement; /** The visual style variant of the button * @type { 'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-menu' | 'subtle-menu-item' } * @default 'primary' * @example * ```html * Primary action * Secondary action * Tertiary action * ``` * @group Visual */ variant: ButtonVariant; /** The size of the button affecting padding and font size * @type { 'lg' | 'md' | 'sm' | 'xs' } * @default 'md' * @example * ```html * Extra small * Small * Medium (default) * Large * ``` * @group Visual */ size: ButtonSize_2; /** Whether the button is in loading state, showing a spinner and disabling interaction * @default false * @example * ```html * Submitting... * ``` * @group State */ loading: boolean; /** Whether the button represents a destructive action (applies danger styling) * @default false * @example * ```html * Delete Account * Remove Item * ``` * @group State */ danger: boolean; /** The shape of the button - use 'circle' for icon-only buttons * @type { 'button' | 'circle' } * @default 'button' * @example * ```html * * * * ``` * @group Visual */ shape: ButtonShape; /** The HTML type attribute for form interaction * @type { 'button' | 'submit' | 'reset' } * @default 'button' * @example * ```html *
* Submit * Reset *
* ``` * @group Form */ htmlType: HtmlButtonType; /** The URL to navigate to. When present, the button renders as an anchor element * @example * ```html * Go to Dashboard * External Link * ``` * @group Navigation */ href?: string; /** The target attribute for link navigation * @type { '_blank' | '_self' | '_parent' | '_top' } * @default '_self' * @example * ```html * Open in new tab * ``` * @group Navigation */ target: LinkTarget; /** The rel attribute for link security and behavior * @default 'noreferrer noopener' * @example * ```html * Safe external link * ``` * @group Navigation */ rel?: string; /** The ID of the element controlled by this button * @example * ```html * * * ``` * @group Accessibility */ ariaControls?: string; /** The ID of the element that describes the button * @example * ```html * Submit *
This will submit your form data
* ``` * @group Accessibility */ ariaDescribedBy?: string; /** Controls loading timeout in milliseconds * @default 0 * @group State */ loadingTimeout: number; /** Enables high contrast theme toggle functionality (internal use) * @default false * @ignore */ hc: boolean; /** Whether the button is active * @default false * @example * ```html * Active * ``` */ active: boolean; static readonly styles: CSSResult; private loadingTimer?; private getSecureRel; private validateAriaExpanded; private validateAriaPressed; private validateProperties; private isValidUrl; private handleClick; private toggleHighContrast; private startLoadingTimeout; private clearLoadingTimeout; focus(options?: FocusOptions): void; /** * @ignore */ get focusElement(): HTMLLinkElement | HTMLButtonElement; protected updated(changedProperties: Map): void; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; disconnectedCallback(): void; render(): TemplateResult_2; private getLoadingIconSize; private _getLoadingSpinner; } /** * `dap-ds-calendar` * @summary A calendar is a visual representation of dates. It allows users to select a date. * @element dap-ds-calendar * @title - Calendar * * @event {{ value: Dayjs }} dds-change - Fired when the calendar value changes. * * @slot - The content of the calendar. * * @csspart base - The main calendar container. * @csspart header - The header of the calendar. * @csspart body - The body of the calendar. * * @cssproperty --dds-calendar-display - The display property of the calendar container. Default is flex. * @cssproperty --dds-calendar-isolation - The isolation property of the calendar. Default is isolate. * @cssproperty --dds-calendar-block-display - The display property of the calendar block. Default is block. * @cssproperty --dds-calendar-transition - The transition property for the calendar. Default is 'all 0.2s ease-in-out'. * * @cssproperty --dds-calendar-header-display - The display property of the calendar header. Default is grid. * @cssproperty --dds-calendar-header-grid-flow - The grid-auto-flow property of the calendar header. Default is column. * @cssproperty --dds-calendar-header-width - The width of the calendar header. Default is 100%. * @cssproperty --dds-calendar-header-gap - The gap between header items. Default is the design system's spacing-100. * * @cssproperty --dds-calendar-select-min-height - The minimum height of the select trigger. Default is auto. * @cssproperty --dds-calendar-select-max-height - The maximum height of the select trigger. Default is 32px. * @cssproperty --dds-calendar-select-padding - The padding of the select trigger. Default is the design system's spacing-200. * @cssproperty --dds-calendar-select-border-radius - The border radius of the select trigger. Default is the design system's radius-rounded. * @cssproperty --dds-calendar-select-border-color - The border color of the select trigger. Default is the design system's border-neutral-transparent-interactive. * @cssproperty --dds-calendar-select-background - The background color of the select trigger. Default is the design system's button-subtle-background-enabled. * @cssproperty --dds-calendar-select-color - The text color of the select trigger. Default is the design system's button-subtle-text-enabled. * @cssproperty --dds-calendar-select-font-size - The font size of the select trigger. Default is the design system's font-sm. * @cssproperty --dds-calendar-select-font-style - The font style of the select trigger. Default is normal. * @cssproperty --dds-calendar-select-font-weight - The font weight of the select trigger. Default is the design system's font-weight-bold. * * @cssproperty --dds-calendar-nav-button-margin - The margin of the navigation buttons. Default is the design system's spacing-200. * @cssproperty --dds-calendar-nav-button-color - The color of the navigation button icons. Default is the design system's button-subtle-icon-enabled. */ export declare class DapDSCalendar extends DdsElement { private readonly cells; private readonly monthSelect; /** The value of the calendar. * @type {Dayjs} */ value?: Dayjs; /** The current visible date of the calendar. Only the month and year are considered. * @type {Dayjs} * @default dayjs() */ currentDate: default_2.Dayjs; /** The minimum date of the calendar. Only the month and year are considered. * @type {Dayjs} * @default dayjs().subtract(50, 'year') */ minDate: default_2.Dayjs; /** The maximum date of the calendar. Only the month and year are considered. * @type {Dayjs} * @default dayjs().add(50, 'year') */ maxDate: default_2.Dayjs; /** The function to determine if the date is disabled. * @type {Function} * @default () => false */ disabledDate: (date: Dayjs) => boolean; /** The locale of the calendar. * @type {string} * @default dayjs.locale() */ locale: string; private _currentCell; private _yearOptionsLoaded; private instanceLocalData; connectedCallback(): Promise; static readonly styles: CSSResult; get startDate(): default_2.Dayjs; get endDate(): default_2.Dayjs; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; protected updated(_changedProperties: PropertyValueMap | Map): void; attributeChangedCallback(name: string, _old: string | null, value: string | null): void; private readonly updateLocale; private readonly updateLocaleFromHtml; setValue(value?: Dayjs, setFocus?: boolean): void; private readonly getWeeksInMonth; private loadYearOptions; isOutOfRange(currentDate: Dayjs, date: Dayjs): boolean; isToday(date: Dayjs): boolean; isSelected(date: Dayjs): boolean; getDatesInWeek(week: number, from: Dayjs): default_2.Dayjs[]; isDateInAllowedRange(date: Dayjs): boolean; isMonthInAllowedRange(year: number, month: number): boolean; isDateInAllowedRangeByDate(year: number, month: number, date: number): boolean; getAllowedMonths(currentDate: Dayjs): string[]; setMonth(month: number): void; setDay(day: number): void; setYear(year: number): void; setSelectedDate(date: Dayjs): void; getFirstDayOfMonthCell(): DapDSCalendarCell | undefined; getCellByDate(date: Dayjs): DapDSCalendarCell | undefined; handleKeyDown(event: KeyboardEvent): void; setCurrentCell(cell: DapDSCalendarCell, setFocus?: boolean): void; setFocusToCurrentCell(): void; setToFirstDayOfMonth(): void; setToToday(): void; setToFirstAllowedDayOfMonth(currentDate?: default_2.Dayjs): void; focusNextCell(element: DapDSCalendarCell, offset: number): void; captureFocus(): void; private getWeekdaysMin; renderCalendarGridHeader(): TemplateResult_2; renderCalendarGridBody(date: Dayjs): TemplateResult_2; renderCalendarHeader(): TemplateResult_2; render(): TemplateResult_2; } /** * `dap-ds-calendar-cell` * @summary Calendar cell represents a single cell in the calendar. * @element dap-ds-calendar-cell * @title - Calendar cell * @group calendar * * @slot - The content of the calendar cell. * * @csspart base - The main calendar cell container. * @csspart today-mark - The today mark of the calendar cell. * */ export declare class DapDSCalendarCell extends DapDSCalendarCell_base { /** The value of the calendar cell. */ value: Dayjs; /** Whether the calendar cell is selected. */ selected: boolean; /** Whether the calendar cell is disabled. */ disabledDay: boolean; /** Whether the calendar cell is today. */ today: boolean; /** Whether the calendar cell is out of range. */ outOfRange: boolean; /** Whether the calendar cell is a date header. */ header: boolean; /** Whether the calendar cell is focused. */ focused: boolean; private _cachedLabel; private _lastLabelUpdate; static readonly styles: CSSResult; get label(): string; get focusElement(): HTMLElement; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; protected updated(_changedProperties: PropertyValueMap | Map): void; getDayName(dateStr: string, locale: string): string; render(): TemplateResult_2; } declare const DapDSCalendarCell_base: typeof DdsElement & { new (...args: any[]): FocusableElementInterface; prototype: FocusableElementInterface; }; /** * `dap-ds-callout` is a custom callout component. * @element dap-ds-callout * @title - Callout * * @event {{ void }} dds-close - Fired when the close button is clicked. * * @slot - The content of the callout. * @slot title - The title of the callout. * @slot icon - The icon of the callout. * @slot actions - The actions of the callout. * @slot close - The close button of the callout. * * @csspart base - The main callout container. * @csspart icon - The icon of the callout. * @csspart title - The title of the callout. * @csspart description - The description of the callout. * @csspart actions - The actions of the callout. * @csspart close - The close button of the callout. * * @cssproperty --dds-callout-padding - Padding of the callout content. Default: var(--dds-spacing-300) * @cssproperty --dds-callout-gap - Gap between elements in horizontal layout. Default: var(--dds-spacing-300) * @cssproperty --dds-callout-icon-size - Size of the icon. Default: var(--dds-spacing-600) * @cssproperty --dds-callout-title-color - Color of the title text. Default: var(--dds-text-neutral-strong) * @cssproperty --dds-callout-description-color - Color of the description text. Default: var(--dds-text-neutral-base) * @cssproperty --dds-callout-title-font-size - Font size of the title. Default: var(--dds-font-base) * @cssproperty --dds-callout-description-font-size - Font size of the description. Default: var(--dds-font-base) * @cssproperty --dds-callout-title-font-weight - Font weight of the title. Default: var(--dds-font-weight-bold) * @cssproperty --dds-callout-description-font-weight - Font weight of the description. Default: var(--dds-font-weight-medium) * @cssproperty --dds-callout-actions-font-weight - Font weight of the actions. Default: var(--dds-font-weight-bold) * @cssproperty --dds-callout-actions-gap - Gap between action items. Default: var(--dds-spacing-400) * @cssproperty --dds-callout-content-gap - Gap between content elements. Default: var(--dds-spacing-100) * @cssproperty --dds-callout-border-radius - Border radius of the callout. Default: var(--dds-radius-base) * * @cssproperty --dds-callout-brand-background - Brand variant background color. Default: var(--dds-background-brand-base) * @cssproperty --dds-callout-brand-background-subtle - Brand variant subtle background color. Default: var(--dds-background-brand-subtle) * @cssproperty --dds-callout-brand-background-medium - Brand variant medium background color. Default: var(--dds-background-brand-medium) * @cssproperty --dds-callout-brand-background-strong - Brand variant strong background color. Default: var(--dds-background-brand-strong) * @cssproperty --dds-callout-brand-icon - Brand variant icon color. Default: var(--dds-icon-brand-subtle) * @cssproperty --dds-callout-brand-border - Brand variant border color. Default: var(--dds-border-brand-subtle) * * @cssproperty --dds-callout-info-background - Info variant background color. Default: var(--dds-background-informative-base) * @cssproperty --dds-callout-info-background-subtle - Info variant subtle background color. Default: var(--dds-background-informative-subtle) * @cssproperty --dds-callout-info-background-medium - Info variant medium background color. Default: var(--dds-background-informative-medium) * @cssproperty --dds-callout-info-background-strong - Info variant strong background color. Default: var(--dds-background-informative-strong) * @cssproperty --dds-callout-info-icon - Info variant icon color. Default: var(--dds-icon-informative-subtle) * @cssproperty --dds-callout-info-border - Info variant border color. Default: var(--dds-border-informative-subtle) * * @cssproperty --dds-callout-positive-background - Positive variant background color. Default: var(--dds-background-positive-base) * @cssproperty --dds-callout-positive-background-subtle - Positive variant subtle background color. Default: var(--dds-background-positive-subtle) * @cssproperty --dds-callout-positive-background-medium - Positive variant medium background color. Default: var(--dds-background-positive-medium) * @cssproperty --dds-callout-positive-background-strong - Positive variant strong background color. Default: var(--dds-background-positive-strong) * @cssproperty --dds-callout-positive-icon - Positive variant icon color. Default: var(--dds-icon-positive-subtle) * @cssproperty --dds-callout-positive-border - Positive variant border color. Default: var(--dds-border-positive-subtle) * * @cssproperty --dds-callout-warning-background - Warning variant background color. Default: var(--dds-background-warning-base) * @cssproperty --dds-callout-warning-background-subtle - Warning variant subtle background color. Default: var(--dds-background-warning-subtle) * @cssproperty --dds-callout-warning-background-medium - Warning variant medium background color. Default: var(--dds-background-warning-medium) * @cssproperty --dds-callout-warning-background-strong - Warning variant strong background color. Default: var(--dds-background-warning-strong) * @cssproperty --dds-callout-warning-icon - Warning variant icon color. Default: var(--dds-icon-neutral-strong) * @cssproperty --dds-callout-warning-border - Warning variant border color. Default: var(--dds-border-warning-subtle) * * @cssproperty --dds-callout-negative-background - Negative variant background color. Default: var(--dds-background-negative-base) * @cssproperty --dds-callout-negative-background-subtle - Negative variant subtle background color. Default: var(--dds-background-negative-subtle) * @cssproperty --dds-callout-negative-background-medium - Negative variant medium background color. Default: var(--dds-background-negative-medium) * @cssproperty --dds-callout-negative-background-strong - Negative variant strong background color. Default: var(--dds-background-negative-strong) * @cssproperty --dds-callout-negative-icon - Negative variant icon color. Default: var(--dds-icon-negative-subtle) * @cssproperty --dds-callout-negative-border - Negative variant border color. Default: var(--dds-border-negative-subtle) */ export declare class DapDSCallout extends DdsElement { /** @ignore */ actionSlot: Element[]; /** The variant of the callout * @type { 'brand' | 'positive' | 'info' | 'warning' | 'negative' } */ variant: CalloutVariant; /** The alignment of the callout. Can be `vertical` or `horizontal`. * @type { 'vertical' | 'horizontal' } */ alignment: Alignment; /** The strongness of the callout. Can be `subtle`, `base`, `medium`, or `strong`. * @type { 'subtle' | 'base' | 'medium' | 'strong' } */ shade: BackgroundShade; /** The border of the callout */ noBorder: string; /** If the callout has a close button */ closeable: boolean; /** The header of the callout */ title: string; /** The label of the close button */ closeButtonLabel: string; /** If the callout is opened */ opened: string; static readonly styles: CSSResult; private get hasActions(); private static readonly defaultIcons; getDefaultIcon(variant: CalloutVariant): TemplateResult_2; handleClose(): void; private handleKeyDown; render(): TemplateResult_2 | typeof nothing; } /** * `dap-ds-card` * @summary A card is a container for content, actions, and images in a consistent format. * @element dap-ds-card * @title - Card * * @property {'sm' | 'md' | 'lg'} size - The size of the card title. Default is `sm`. * * @slot - The content of the card. * * @csspart base - The main card container. * * @cssproperty --dds-card-padding - The padding of the card. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-border-radius - The border radius of the card. Default is `var(--dds-radius-large)`. * @cssproperty --dds-card-border-width - The border width of the card. Default is `var(--dds-border-width-base)`. * @cssproperty --dds-card-border-color - The border color of the card. Default is `var(--dds-border-neutral-divider)`. * @cssproperty --dds-card-background - The background color of the card. Default is `var(--dds-background-neutral-base)`. * @cssproperty --dds-card-hover-border-color - The border color when hovering over the card. Default is `var(--dds-border-brand-base)`. * @cssproperty --dds-card-active-border-color - The border color when the card is active. Default is `var(--dds-border-brand-medium)`. * @cssproperty --dds-card-shadow - The box shadow of the card. Default is `none`. * @cssproperty --dds-card-hover-shadow - The box shadow when hovering over the card. Default is `none`. * @cssproperty --dds-card-transition-duration - The duration of the card's transitions. Default is `var(--dds-transition-medium)`. * @cssproperty --dds-card-transition-timing - The timing function of the card's transitions. Default is `var(--dds-easing-ease-in-out)`. */ export declare class DapDSCard extends DapDSCard_base { /** Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element. */ interactive: boolean; /** * The render as type of the card, only applicable when interactive. * @type {'a' | 'button'} */ renderAs: 'a' | 'button'; /** Whether the card is disabled. */ disabled: boolean; /** Removes the border around the card */ noBorder: boolean; /** Removes the padding around the card */ noPadding: boolean; /** The link target of the card * @type { '_blank' | '_self' | '_parent' | '_top' } */ target: LinkTarget; /** The URL of the card. */ href: string; /** The rel of the card link. */ rel: string; static readonly styles: CSSResult; focus(options?: FocusOptions): void; render(): TemplateResult_2; } declare const DapDSCard_base: typeof DdsElement & { new (...args: any[]): SizedElementInterface; prototype: SizedElementInterface; }; /** * `dap-ds-card-actions` * @summary A card actions is a container for actions in a card. * @element dap-ds-card-actions * @title - Card actions * @group card * * @property {'sm' | 'md' | 'lg'} size - The size of the card actions. Default is `sm`. * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`. * * @slot - The content of the card actions. * * @csspart base - The main card actions container. * * @cssproperty --dds-card-actions-gap - The gap between items in the card actions. Default is `var(--dds-spacing-200)`. * @cssproperty --dds-card-actions-padding-lg - The padding for large size card actions. Default is `var(--dds-spacing-600)`. * @cssproperty --dds-card-actions-padding-md - The padding for medium size card actions. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-actions-padding-sm - The padding for small size card actions. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-actions-margin-lg - The margin for large size card actions spacing. Default is `var(--dds-spacing-600)`. * @cssproperty --dds-card-actions-margin-md - The margin for medium size card actions spacing. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-actions-margin-sm - The margin for small size card actions spacing. Default is `var(--dds-spacing-400)`. */ export declare class DapDSCardActions extends DapDSCardActions_base { /** Whether the card actions should be sized from the parent. */ parentSized: string; static readonly styles: CSSResult; constructor(); render(): TemplateResult_2; } declare const DapDSCardActions_base: typeof DdsElement & { new (...args: any[]): SizedElementInterface; prototype: SizedElementInterface; }; /** * `dap-ds-card-content` * @summary A card content is a container for content in a card. * @element dap-ds-card-content * @title - Card content * @group card * * @property {'sm' | 'md' | 'lg'} size - The size of the card subtitle. Default is `sm`. * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card content. This adds a margin to the card subtitle. Default is `bottom`. * * @slot - The content of the card-content. * * @csspart base - The main card content container. * * @cssproperty --dds-card-content-padding - The padding of the card content. Default is `0`. * @cssproperty --dds-card-content-margin - The margin of the card content. Default is `0`. * @cssproperty --dds-card-content-font-size - The font size of the card content. Default is `var(--dds-font-base)`. * @cssproperty --dds-card-content-line-height - The line height of the card content. Default is `var(--dds-font-line-height-xlarge)`. * @cssproperty --dds-card-content-spacing-lg - The large spacing value. Default is `var(--dds-spacing-600)`. * @cssproperty --dds-card-content-spacing-md - The medium spacing value. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-content-spacing-sm - The small spacing value. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-content-spacing-top - The top spacing value. Default is `0`. * @cssproperty --dds-card-content-spacing-bottom - The bottom spacing value. Default is `0`. */ export declare class DapDSCardContent extends DapDSCardContent_base { /** The base rendered root tag of the card content. */ renderAs: string; /** Whether the card content should be sized from the parent. */ parentSized: string; static readonly styles: CSSResult; constructor(); render(): TemplateResult_2; } declare const DapDSCardContent_base: typeof DdsElement & { new (...args: any[]): SizedElementInterface; prototype: SizedElementInterface; }; /** * `dap-ds-card-image` * @summary A card image is a container for images in a card. * @element dap-ds-card-image * @title - Card image * @group card * * @slot - The default slot for the image. The slot can accept any element, for example a video. If nothing is added to the slot, the image will be rendered. * * @csspart base - The main card image container. * * @cssproperty --dds-card-image-width - The width of the image. Default is `100%`. * @cssproperty --dds-card-image-height - The height of the image. Default is `auto`. * @cssproperty --dds-card-image-object-fit - How the image fits within its container. Default is `cover`. * @cssproperty --dds-card-image-background-position - The background position of the image. Default is `center`. * @cssproperty --dds-card-image-background-size - How the background image is sized. Default is `cover`. * @cssproperty --dds-card-image-background-repeat - How the background image repeats. Default is `no-repeat`. */ export declare class DapDSCardImage extends DdsElement { /** The source of the image.*/ src: string; /** The alt text of the image.*/ alt: string; /** The width of the image.*/ width: number; /** The height of the image.*/ height: number; static readonly styles: CSSResult; render(): TemplateResult_2; } /** * `dap-ds-card-subtitle` * @summary Subtitle of the card * @element dap-ds-card-subtitle * @title - Card subtitle * @group card * * @property {'sm' | 'lg'} size - The size of the card subtitle. Default is `sm`. * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card subtitle. This adds a margin to the card subtitle. Default is `top`. * * @slot - The content of the subtitle. * * @csspart base - The subtitle container. * * @cssproperty --dds-card-subtitle-color - The color of the subtitle text. Default is `var(--dds-text-neutral-subtle)`. * @cssproperty --dds-card-subtitle-font-size - The font size of the subtitle. Default is `var(--dds-font-xs)`. * @cssproperty --dds-card-subtitle-font-weight - The font weight of the subtitle. Default is `var(--dds-font-weight-bold)`. * @cssproperty --dds-card-subtitle-line-height - The line height of the subtitle. Default is `var(--dds-font-line-height-large)`. * * @cssproperty --dds-card-subtitle-padding-sm - The padding for small size. Default is `0 var(--dds-spacing-400)`. * @cssproperty --dds-card-subtitle-padding-md - The padding for medium size. Default is `0 var(--dds-spacing-400)`. * @cssproperty --dds-card-subtitle-padding-lg - The padding for large size. Default is `0 var(--dds-spacing-600)`. * * @cssproperty --dds-card-subtitle-margin-sm - The base margin for small size. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-subtitle-margin-md - The base margin for medium size. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-subtitle-margin-lg - The base margin for large size. Default is `var(--dds-spacing-600)`. * * @cssproperty --dds-card-subtitle-spacing-top-sm - The top spacing for small size. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-subtitle-spacing-top-md - The top spacing for medium size. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-subtitle-spacing-top-lg - The top spacing for large size. Default is `var(--dds-spacing-600)`. * * @cssproperty --dds-card-subtitle-spacing-bottom-sm - The bottom spacing for small size. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-subtitle-spacing-bottom-md - The bottom spacing for medium size. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-subtitle-spacing-bottom-lg - The bottom spacing for large size. Default is `var(--dds-spacing-600)`. * * @cssproperty --dds-card-subtitle-spacing-both-sm - The both (top and bottom) spacing for small size. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-subtitle-spacing-both-md - The both (top and bottom) spacing for medium size. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-subtitle-spacing-both-lg - The both (top and bottom) spacing for large size. Default is `var(--dds-spacing-600)`. */ export declare class DapDSCardSubtitle extends DapDSCardSubtitle_base { /** The base rendered root tag of the card subtitle. */ renderAs: string; /** Whether the card subtitle should be sized from the parent. */ parentSized: string; static readonly styles: CSSResult; constructor(); render(): TemplateResult_2; } declare const DapDSCardSubtitle_base: typeof DdsElement & { new (...args: any[]): SizedElementInterface; prototype: SizedElementInterface; }; /** * `dap-ds-card-title` * @summary Title of the card * @element dap-ds-card-title * @title - Card title * @group card * * @property {'sm' |'md' | 'lg'} size - The size of the card title. Default is `sm`. * @property {boolean} noPadding - Whether the card title should have no padding. * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card title. This adds a margin to the card title. Default is `top`. * * @slot - The content of the title. * * @csspart base - The main card title container. * * @cssproperty --dds-card-title-color - The text color of the card title. Default is `var(--dds-color-text-primary)`. * @cssproperty --dds-card-title-font-family - The font family of the card title. Default is `var(--dds-font-family-base)`. * @cssproperty --dds-card-title-font-weight - The font weight of the card title. Default is `var(--dds-font-weight-bold)`. * @cssproperty --dds-card-title-line-height - The line height of the card title. Default is `var(--dds-font-line-height-large)`. * @cssproperty --dds-card-title-margin-bottom - The bottom margin of the card title. Default is `var(--dds-spacing-100)`. * * @cssproperty --dds-card-title-sm-padding-x - The horizontal padding for small size. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-title-sm-padding-bottom - The bottom padding for small size. Default is `var(--dds-spacing-100)`. * @cssproperty --dds-card-title-sm-spacing-top - The top spacing for small size. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-title-sm-spacing-bottom - The bottom spacing for small size. Default is `var(--dds-spacing-400)`. * * @cssproperty --dds-card-title-md-padding-x - The horizontal padding for medium size. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-title-md-padding-bottom - The bottom padding for medium size. Default is `var(--dds-spacing-100)`. * @cssproperty --dds-card-title-md-spacing-top - The top spacing for medium size. Default is `var(--dds-spacing-400)`. * @cssproperty --dds-card-title-md-spacing-bottom - The bottom spacing for medium size. Default is `var(--dds-spacing-400)`. * * @cssproperty --dds-card-title-lg-padding-x - The horizontal padding for large size. Default is `var(--dds-spacing-600)`. * @cssproperty --dds-card-title-lg-padding-bottom - The bottom padding for large size. Default is `var(--dds-spacing-100)`. * @cssproperty --dds-card-title-lg-spacing-top - The top spacing for large size. Default is `var(--dds-spacing-600)`. * @cssproperty --dds-card-title-lg-spacing-bottom - The bottom spacing for large size. Default is `var(--dds-spacing-600)`. */ export declare class DapDSCardTitle extends DapDSCardTitle_base { /** The base rendered root tag of the card title. */ renderAs: string; /** Whether the card title should be sized from the parent. */ parentSized: string; /** Whether the card title should have no padding. */ noPadding: boolean; static readonly styles: CSSResult; constructor(); render(): TemplateResult_2; } declare const DapDSCardTitle_base: typeof DdsElement & { new (...args: any[]): SizedElementInterface; prototype: SizedElementInterface; }; /** * `dap-ds-checkbox` * @summary A checkbox is a form element that allows the user to select one or more options from a set. * @element dap-ds-checkbox * @title - Checkbox * * @event {{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, type: 'checkbox' }} dds-change - Fired when the checkbox is checked or unchecked. * @event {{ void }} dds-blur - Emitted when the checkbox loses focus. * @event {{ void }} dds-focus - Emitted when the checkbox gains focus. * @event {{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean }} dds-input - Emitted when the checkbox receives input. * * @property {string} name - The name of the checkbox. * @property {string} value - The value of the checkbox. * @property {boolean} checked - Whether the checkbox is checked. * @property {string} label - The label of the checkbox. * @property {string} description - The description of the checkbox. * @property {boolean} disabled - Whether the checkbox is disabled. * @property {boolean} required - Whether the checkbox is required. * @property {'xs' | 'sm' | 'md' | 'lg'} size - The size of the checkbox. * @property {'left' | 'right'} labelPlacement - The placement of the label. * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description. * @property {boolean} subtle - The weight of the label. * @property {string} feedback - The feedback of the checkbox. * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the checkbox. * @property {boolean} invalid - The invalid state of the checkbox. * @property {boolean} optional - The optional state of the checkbox. * @property {string} optionalLabel - The optional label of the checkbox. * * @csspart base - The main checkbox container. * @csspart label - The label of the checkbox. * @csspart input - The input of the checkbox. * @csspart control - The control of the checkbox. * @csspart icon - The icon of the checkbox. * @csspart label-container - The label container of the checkbox. * @csspart description - The description of the checkbox. * * @cssproperty --dds-checkbox-size - The size of the checkbox. Default is `var(--dds-spacing-500)`. * @cssproperty --dds-checkbox-border-width - The border width of the checkbox. Default is `var(--dds-border-width-large)`. * @cssproperty --dds-checkbox-border-radius - The border radius of the checkbox. Default is `var(--dds-radius-small)`. * @cssproperty --dds-checkbox-border-color - The border color of the checkbox. Default is `var(--dds-border-neutral-base)`. * @cssproperty --dds-checkbox-background-color - The background color of the checkbox. Default is `transparent`. * @cssproperty --dds-checkbox-icon-color - The color of the checkbox icon. Default is `var(--dds-button-primary-icon-enabled)`. * @cssproperty --dds-checkbox-hover-border-color - The border color when hovering over the checkbox. Default is `var(--dds-border-neutral-medium)`. * @cssproperty --dds-checkbox-hover-background-color - The background color when hovering over the checkbox. Default is `var(--dds-background-neutral-medium)`. * @cssproperty --dds-checkbox-active-border-color - The border color when the checkbox is active. Default is `var(--dds-border-neutral-strong)`. * @cssproperty --dds-checkbox-active-background-color - The background color when the checkbox is active. Default is `var(--dds-background-neutral-strong)`. * @cssproperty --dds-checkbox-checked-border-color - The border color when the checkbox is checked. Default is `var(--dds-background-brand-base-inverted)`. * @cssproperty --dds-checkbox-checked-background-color - The background color when the checkbox is checked. Default is `var(--dds-background-brand-base-inverted)`. * @cssproperty --dds-checkbox-checked-hover-border-color - The border color when hovering over a checked checkbox. Default is `var(--dds-background-brand-medium-inverted)`. * @cssproperty --dds-checkbox-checked-hover-background-color - The background color when hovering over a checked checkbox. Default is `var(--dds-background-brand-medium-inverted)`. * @cssproperty --dds-checkbox-checked-active-border-color - The border color when a checked checkbox is active. Default is `var(--dds-background-brand-strong-inverted)`. * @cssproperty --dds-checkbox-checked-active-background-color - The background color when a checked checkbox is active. Default is `var(--dds-background-brand-strong-inverted)`. * @cssproperty --dds-checkbox-invalid-border-color - The border color when the checkbox is invalid. Default is `var(--dds-border-negative-base)`. * @cssproperty --dds-checkbox-invalid-background-color - The background color when the checkbox is invalid. Default is `var(--dds-background-negative-base)`. * @cssproperty --dds-checkbox-invalid-hover-border-color - The border color when hovering over an invalid checkbox. Default is `var(--dds-border-negative-medium)`. * @cssproperty --dds-checkbox-invalid-hover-background-color - The background color when hovering over an invalid checkbox. Default is `var(--dds-background-negative-medium)`. * @cssproperty --dds-checkbox-invalid-active-border-color - The border color when an invalid checkbox is active. Default is `var(--dds-border-negative-strong)`. * @cssproperty --dds-checkbox-invalid-active-background-color - The background color when an invalid checkbox is active. Default is `var(--dds-background-negative-strong)`. * @cssproperty --dds-checkbox-disabled-border-color - The border color when the checkbox is disabled. Default is `var(--dds-button-primary-background-disabled)`. * @cssproperty --dds-checkbox-disabled-background-color - The background color when the checkbox is disabled. Default is `var(--dds-button-primary-background-disabled)`. * @cssproperty --dds-checkbox-disabled-icon-color - The color of the checkbox icon when disabled. Default is `var(--dds-button-primary-icon-disabled)`. */ export declare class DapDSCheckbox extends LabeledChoiceElement { private readonly input; /** Whether the checkbox is indeterminate */ indeterminate: boolean; /** Whether the checkbox should prevent the default action */ preventDefault: boolean; /** This sets up border around the checkbox, when true. */ border: boolean; /** The type of the checkbox * @type {'normal' | 'background'} */ type: 'normal' | 'background'; static readonly styles: CSSResult; /** * Validates property combinations and logs warnings for invalid states. * @private */ private validateProperties; /** * Gets the aria-describedby attribute value by combining description and feedback IDs. * @returns {string | undefined} Space-separated IDs or undefined if none exist * @private */ private getAriaDescribedBy; /** * Gets the aria-checked attribute value based on checkbox state. * @returns {'true' | 'false' | 'mixed'} The appropriate aria-checked value * @private */ private getAriaChecked; /** * Handles click events on the checkbox. * Manages the checked/indeterminate state transitions and emits change events. * @private */ private handleClick; /** * Handles input events on the checkbox. * Emits the dds-input event with current checkbox state. * @private */ private handleInput; /** * Handles keyboard events on the checkbox. * Provides enhanced keyboard navigation and accessibility. * @param {KeyboardEvent} event - The keyboard event * @private */ private handleKeyDown; get focusElement(): HTMLInputElement; /** * Programmatically focuses the checkbox input element. * @public */ focus(): void; /** * Programmatically blurs the checkbox input element. * @public */ blur(): void; /** * Renders the appropriate icon based on checkbox state. * @returns {TemplateResult | null} The icon template or null if unchecked * @private */ renderIcon(): TemplateResult_2 | null; /** * Handles invalid events on the checkbox input. * Prevents the default browser validation UI from showing and manages invalid state. * @param {Event} event - The invalid event * @private */ handleInvalid(event: Event): void; render(): TemplateResult_2; } /** * `dap-ds-combobox` * @summary A select is a form element that allows the user to select one option from a set. * @element dap-ds-combobox * @title - Combobox * * @event {{ value }} dds-change - Fired when the select value changes. * @event {{ void }} dds-blur - Emitted when the select loses focus. * @event {{ void }} dds-focus - Emitted when the select gains focus. * @event {{ void }} dds-clear - Emitted when the select is cleared. * @event {{ search: string }} dds-search - Emitted when the manual input value changes. * @event {{ input: string, originalEvent: Event }} dds-input - Emitted when typing happens in the input. * * @property {string} value - The value of the select. * @property {string} placeholder - The placeholder of the select. * @property { 'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'} placement - The placement of the select dropdown. Default is 'bottom-start'. * @property {boolean} opened - Whether the select dropdown is opened. * @property {boolean} sync - The sync mode of the select dropdown. How the dropdown item size is synced to the trigger element'. * @property {string} label - The label of the select. * @property {string} description - The description of the select. * @property {string} tooltip - The tooltip of the select. * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input. * @property {'xs' | 'sm' | 'sm'} size - The size of the select. Default is 'md'. * @property {boolean} disabled - Whether the select is disabled. * @property {boolean} required - Whether the select is required. * @property {boolean} readonly - Whether the select is readonly. * @property {boolean} autofocus - Whether the select is autofocus. * @property {string} feedback - The feedback content of the select. * @property {'negative' | 'positive' | 'warning' | 'info'} feedbackType - The feedback type of the select. * @property {'none' | 'typehead' | 'autocomplete' | 'manual'} searchMode - The search mode of the select. * @property {boolean} openOnEmpty - Whether the combobox should open on empty results. * @property {boolean} allowManualInput - Whether the combobox allows manual input, or free text. * @property {boolean} searchForText - Whether the combobox should search for the selected item text. * @property {boolean} noTextComplete - Whether the combobox should not complete the text. * @property {string} searchButtonAriaLabel - The aria label of the search button. * @property {string} selectable - Show the selected item check mark in the dropdown. 'true' or 'false' * @property {boolean} noAnimation - Whether the combobox open indicator should be animated. * * @csspart base - The main select container. * @csspart trigger - The trigger button of the select. * @csspart label - The label of the select. * @csspart description - The description of the select. * @csspart feedback - The feedback of the select. * @csspart tooltip - The tooltip of the select. * @csspart option-list - The option list of the select. * * @cssproperty --dds-combobox-background - The background color of the combobox. Defaults to var(--dds-fields-background-default). * @cssproperty --dds-combobox-border-color - The border color of the combobox. Defaults to var(--dds-border-neutral-base). * @cssproperty --dds-combobox-border-width - The border width of the combobox. Defaults to var(--dds-border-width-base, 1px). * @cssproperty --dds-combobox-border-radius - The border radius of the combobox. Defaults to var(--dds-radius-base). * @cssproperty --dds-combobox-text-color - The text color of the combobox. Defaults to var(--dds-text-neutral-base). * @cssproperty --dds-combobox-placeholder-color - The placeholder text color. Defaults to var(--dds-text-neutral-subtle). * @cssproperty --dds-combobox-disabled-background - The background color when disabled. Defaults to var(--dds-background-neutral-stronger). * @cssproperty --dds-combobox-disabled-text - The text color when disabled. Defaults to var(--dds-text-neutral-disabled). * @cssproperty --dds-combobox-error-border - The border color for error state. Defaults to var(--dds-border-negative-base). * @cssproperty --dds-combobox-success-border - The border color for success state. Defaults to var(--dds-border-positive-base). * @cssproperty --dds-combobox-icon-color - The color of the icons. Defaults to var(--dds-text-icon-neutral-subtle). * @cssproperty --dds-combobox-clear-icon-color - The color of the clear icon. Defaults to var(--dds-button-subtle-icon-neutral-enabled). * @cssproperty --dds-combobox-popup-background - The background color of the popup. Defaults to var(--dds-background-neutral-subtle). * @cssproperty --dds-combobox-popup-shadow - The box shadow of the popup. Defaults to 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%). * * @cssproperty --dds-combobox-padding-xs - The padding for extra small size. Defaults to var(--dds-spacing-200). * @cssproperty --dds-combobox-padding-sm - The padding for small size. Defaults to var(--dds-spacing-200). * @cssproperty --dds-combobox-padding-lg - The padding for large size. Defaults to var(--dds-spacing-300). * @cssproperty --dds-combobox-padding-horizontal - The horizontal padding. Defaults to var(--dds-spacing-300). * @cssproperty --dds-combobox-padding-vertical - The vertical padding. Defaults to var(--dds-spacing-200). * @cssproperty --dds-combobox-gap - The gap between elements. Defaults to var(--dds-spacing-100). * @cssproperty --dds-combobox-icon-gap - The gap between icons. Defaults to var(--dds-spacing-200). * @cssproperty --dds-combobox-action-gap - The gap between action elements. Defaults to var(--dds-spacing-200). * @cssproperty --dds-combobox-action-padding - The padding for action elements. Defaults to var(--dds-spacing-300). * @cssproperty --dds-combobox-clear-icon-width - The width of the clear icon. Defaults to var(--dds-spacing-800). * @cssproperty --dds-combobox-dropdown-icon-right - The right position of the dropdown icon. Defaults to var(--dds-spacing-600). * @cssproperty --dds-combobox-min-width - The minimum width of the combobox. Defaults to 7.5rem. * * @slot - The default slot for the options. */ export declare class DapDSCombobox extends ComboboxBaseElement { render(): TemplateResult_2; } /** * `dap-ds-command` * @summary A command is a component that displays a list of commands. * @element dap-ds-command * @title - Command * * @event {{ value: string }} dds-change - Fired when the command value changes. * * @slot trigger - The trigger element for the command dropdown. * @slot - The command items. */ export declare class DapDSCommand extends DapDSPopup { constructor(); private readonly _trigger; static readonly styles: CSSResult; /** * The value of the command. */ value: string | null; /** Whether the command popup should take full width of the screen. */ fullWidth: boolean; /** ID of element that labels the command dropdown. */ ariaLabelledBy?: string; private _lastClickedItem; private _keyboardNavigation; connectedCallback(): Promise; disconnectedCallback(): void; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; updated(changedProperties: Map): Promise; private _initializeKeyboardNavigation; private _handleKeyDown; private _handleMenuItemClick; private handleClick; private handleDocumentMouseDown; showDropDown(): Promise; hideDropDown(): Promise; private _handleFocusOut; focus(): void; private _handleTriggerChange; private _handleDefaultSlotChange; render(): TemplateResult_2; } /** * `dap-ds-command-group` * @summary A command group is a group of command items. * @element dap-ds-command-group * @title - Command group * @group command * * @slot - The default slot for the command group. * * @cssprop --dds-command-group-gap - The gap between command group elements. Defaults to var(--dds-spacing-100) * @cssprop --dds-command-group-margin-bottom - The bottom margin of the command group. Defaults to var(--dds-spacing-200) * @cssprop --dds-command-group-border-radius - The border radius of the command group. Defaults to var(--dds-radius-small) * @cssprop --dds-command-group-label-font-weight - The font weight of the command group label. Defaults to var(--dds-font-weight-bold) * @cssprop --dds-command-group-items-gap - The gap between command items. Defaults to var(--dds-spacing-100) */ export declare class DapDSCommandGroup extends DdsElement { static readonly styles: CSSResult; /** * The label of the command group. */ label?: string; /** * Whether the command group is exclusive, only one item can be selected at a time. */ exclusive: boolean; private _selectedItem; connectedCallback(): void; disconnectedCallback(): void; private _handleItemClick; render(): TemplateResult_2; } /** * `dap-ds-command-item` * @summary A command item is a command item that can be selected. * @element dap-ds-command-item * @title - Command item * @group command * * @event {{ value: string, closeOnSelect: boolean }} dds-command-item-click - Fired when the command item is clicked. * * @slot - The label of the command item. * @slot check - The check of the command item. * * @csspart base - The base part of the command item. * @csspart content - The content part of the command item. * @csspart label - The label part of the command item. * * @cssprop --dds-command-item-padding - The padding of the command item * @cssprop --dds-command-item-background - The background color of the command item * @cssprop --dds-command-item-color - The text color of the command item * @cssprop --dds-command-item-hover-background - The background color of the command item on hover * @cssprop --dds-command-item-selected-background - The background color of the selected command item */ export declare class DapDSCommandItem extends DdsElement { private readonly _trigger; static readonly styles: CSSResult; /** * The value of the command item. */ value?: string; /** * Whether the command item is disabled. */ disabled: boolean; /** The name of the button */ name: string; /** The Href of the button. If this present the button will be rendered as an anchor `` element. */ href: string; /** The target of the button * @type { '_blank' | '_self' | '_parent' | '_top' } */ target: LinkTarget; /** * The rel of the button link. Default is `noreferrer noopener`. */ rel: string; /** * Whether the command item is selectable. */ selectable: boolean; /** * Whether the command item is selected. */ selected: boolean; /** * Whether the command item should close the command when selected. */ closeOnSelect: string; private _isSelected; connectedCallback(): void; updated(changedProperties: Map): void; private _handleClick; private _handleKeyDown; focus(): void; render(): TemplateResult_2; } /** * `dap-ds-content-switcher` * @summary A content switcher is a set of two or more segments, each of which functions as a mutually exclusive button. * @element dap-ds-content-switcher * @title - Content switcher * * @slot - The content switcher items. * * @event {{ value: string, selected: boolean }} dds-change - Fired when the content switcher is changed. * * @csspart base - The main content switcher container. * * @cssproperty --dds-content-switcher-min-width - The minimum width of the content switcher (default: var(--dds-spacing-4000, 160px)) * @cssproperty --dds-content-switcher-padding - The padding of the content switcher (default: var(--dds-spacing-100, 4px)) * @cssproperty --dds-content-switcher-border-width - The border width of the content switcher (default: var(--dds-border-width-base)) * @cssproperty --dds-content-switcher-border-color - The border color of the content switcher (default: var(--dds-border-neutral-transparent)) * @cssproperty --dds-content-switcher-border-radius - The border radius of the content switcher (default: var(--dds-radius-rounded, 1000px)) * @cssproperty --dds-content-switcher-background - The background color of the content switcher (default: var(--dds-transparent-black-subtle, rgb(0 0 0 / 5%))) * @cssproperty --dds-content-switcher-gap - The gap between content switcher items (default: var(--dds-spacing-100, 4px)) */ export declare class DapDSContentSwitcher extends DdsElement { /** Whether the content switcher allows multiple selections. */ multiSelect: boolean; /** The value of the content switcher. A comma-separated list if `multiSelect` is `true`. */ value: string; static readonly styles: CSSResult; private getAllInputs; private syncInputElements; private handleInputClick; protected updated(_changedProperties: PropertyValues): void; render(): TemplateResult_2; } /** * `dap-ds-content-switcher-item` * @summary Segmented control item component for the segmented control. * @element dap-ds-content-switcher-item * @title - Content switcher item * @group content-switcher * * @slot iconcontent - The icon content of the segmented control item. * * @csspart input - The input of the segmented control item. * * @cssproperty --dds-content-switcher-item-height - The height of the content switcher item (default: var(--dds-spacing-800, 32px)) * @cssproperty --dds-content-switcher-item-padding - The padding of the content switcher item (default: var(--dds-spacing-200, 8px) var(--dds-spacing-400, 16px)) * @cssproperty --dds-content-switcher-item-font-size - The font size of the content switcher item (default: var(--dds-size-sm, 14px)) * @cssproperty --dds-content-switcher-item-font-weight - The font weight of the content switcher item (default: var(--dds-weight-bold, 700)) * @cssproperty --dds-content-switcher-item-border-radius - The border radius of the content switcher item (default: var(--dds-radius-large, 16px)) * @cssproperty --dds-content-switcher-item-background - The background color of the content switcher item (default: transparent) * @cssproperty --dds-content-switcher-item-color - The text color of the content switcher item (default: var(--dds-text-neutral-base)) * @cssproperty --dds-content-switcher-item-border-color - The border color of the content switcher item (default: transparent) * @cssproperty --dds-content-switcher-item-checked-background - The background color of the checked content switcher item (default: var(--dds-button-primary-background-enabled)) * @cssproperty --dds-content-switcher-item-checked-color - The text color of the checked content switcher item (default: var(--dds-text-neutral-on-inverted)) * @cssproperty --dds-content-switcher-item-checked-border-color - The border color of the checked content switcher item (default: var(--dds-border-neutral-transparent-interactive)) */ export declare class DapDSContentSwitcherItem extends DdsElement { /** The value of the segmented control item. */ value: string; /** The checked state of the segmented control item. */ checked: boolean; /** The disabled state of the segmented control item. */ disabled: boolean; /** The name of the segmented control item. */ name: string; static readonly styles: CSSResult; render(): TemplateResult_2; } /** * `dap-ds-copybox-input` * @summary A copybox input is a field for copying an input value. * @element dap-ds-copybox-input * @title - CopyBox input * * @property {string} label - The label of the input. * @property {string} placeholder - The placeholder of the input. * @property {string} description - The description of the input. * @property {string} tooltip - The tooltip of the input. * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The position of the tooltip. Can be `top`, `right`, `bottom`, or `left`. * @property {'success' | 'error'} status - The status of the input. Can be `success` or `error`. * @property {'xs' | 'sm' | 'sm'} size - The size of the input. Default is `sm`. * @property {string} name - The name of the input. * @property {string} value - The value of the input. * @property {boolean} disabled - The disabled state of the input. Default is false. * @property {boolean} required - The required state of the input. Default is false. * @property {boolean} readonly - The readonly state of the input. Default is false. * @property {boolean} autofocus - The autofocus state of the input. Default is false. * @property {string} feedback - The feedback of the input. * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`. * @property {boolean} loading - The loading state of the input. Default is false. * @property {boolean} optional - The optional state of the input. * @property {string} optionalLabel - The optional label of the input. * @property {boolean} subtle - The weight of the label. Default is `false` * @property {string} copyButtonAriaLabel - The aria label of the copy button. * * @event {{ value: string }} dds-copy - Fired when the user clicks on the copy button. * @event {{ value: string }} dds-change - Fired when the input value changes. * @event {{ value: string }} dds-input - Fired when the input value changes. * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down. * @event {{ void }} dds-blur - Fired when the input loses focus. * @event {{ void }} dds-focus - Emitted when the input gains focus. * @event {{ void }} dds-not-allowed - Emitted when the value cannot be copied. * * @cssproperty --dds-input-height - The height of the input. Default is var(--dds-spacing-1000). * @cssproperty --dds-input-padding - The padding of the input. Default is var(--dds-spacing-300). * @cssproperty --dds-input-font-size - The font size of the input. Default is var(--dds-font-base). * @cssproperty --dds-input-border-color - The border color of the input. Default is var(--dds-border-neutral-base). * @cssproperty --dds-input-background-color - The background color of the input. Default is var(--dds-fields-background-default). * @cssproperty --dds-input-text-color - The text color of the input. Default is var(--dds-text-neutral-base). * @cssproperty --dds-input-border-radius - The border radius of the input. Default is var(--dds-radius-base). * @cssproperty --dds-input-border-width - The border width of the input. Default is var(--dds-border-width-base). * @cssproperty --dds-input-disabled-background - The background color of the disabled input. Default is var(--dds-fields-background-disabled). * @cssproperty --dds-input-disabled-text - The text color of the disabled input. Default is var(--dds-text-neutral-disabled). * @cssproperty --dds-input-readonly-background - The background color of the readonly input. Default is var(--dds-fields-background-read-only). * @cssproperty --dds-input-readonly-text - The text color of the readonly input. Default is var(--dds-text-neutral-subtle). * @cssproperty --dds-input-success-border - The border color of the success input. Default is var(--dds-border-positive-base). * @cssproperty --dds-input-error-border - The border color of the error input. Default is var(--dds-border-negative-base). * @cssproperty --dds-input-addon-background - The background color of the input addon. Default is var(--dds-background-ui-neutral-enabled). * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. Default is var(--dds-background-ui-positive-enabled). * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. Default is var(--dds-background-ui-negative-enabled). * * @csspart base - The base container of the component. * @csspart postfix - The inner postfix icon part of the component. * @csspart button - The button of the component. */ export declare class DapDSCopyBoxInput extends InputBaseElement { constructor(); copyButtonAriaLabel?: string; render(): TemplateResult_2<1>; onCopy(): void; private copyToClipboard; } /** * `dap-ds-dap-badge` * @summary A DÁP badge is a brand element showing the use of this system design library. * @element dap-ds-dap-badge * @title - Dap badge * * @slot - Description of badge * * * @csspart base - Main badge container * @csspart icon - Badge icon * @csspart text - Badge text * * @cssproperty --dds-badge-padding-sm - Custom padding for the small badge (default: var(--dds-spacing-200) var(--dds-spacing-300)) * @cssproperty --dds-badge-padding-lg - Custom padding for the large badge (default: var(--dds-spacing-400)) * @cssproperty --dds-badge-border-width - Custom border width for the badge (default: var(--dds-border-width-base)) * @cssproperty --dds-badge-border-color - Custom border color for the badge (default: var(--dds-border-neutral-divider)) * @cssproperty --dds-badge-border-radius - Custom border radius for the badge (default: var(--dds-radius-base)) * @cssproperty --dds-badge-color - Custom text color for the badge (default: var(--dds-text-neutral-base)) * @cssproperty --dds-badge-gap - Custom gap between icon and text (default: var(--dds-spacing-200)) * @cssproperty --dds-badge-font-size-sm - Custom font size for the small badge (default: var(--dds-font-xs)) * @cssproperty --dds-badge-font-size-lg - Custom font size for the large badge (default: var(--dds-font-xs)) * @cssproperty --dds-badge-font-weight - Custom font weight for the badge (default: var(--dds-font-weight-medium)) * @cssproperty --dds-badge-line-height - Custom line height for the badge (default: var(--dds-font-line-height-large)) * @cssproperty --dds-badge-border-color-normal - Custom border color for the normal variant (default: var(--dds-transparent-black-medium)) * @cssproperty --dds-badge-background-color-normal - Custom background color for the normal variant (default: var(--dds-background-brand-subtle)) * @cssproperty --dds-badge-color-normal - Custom text color for the normal variant (default: var(--dds-text-brand-subtle)) * @cssproperty --dds-badge-border-color-inverted - Custom border color for the inverted variant (default: var(--dds-transparent-white-medium)) * @cssproperty --dds-badge-background-color-inverted - Custom background color for the inverted variant (default: var(--dds-background-brand-base-inverted)) * @cssproperty --dds-badge-color-inverted - Custom text color for the inverted variant (default: var(--dds-text-neutral-inverted)) */ export declare class DapDSDAPBadge extends DdsElement { /** The variant of the DÁP badge * @type {'normal' | 'inverted'} */ variant: string; /** The size of the DÁP badge * @type {'sm' | 'lg'} */ size: string; static readonly styles: CSSResult; render(): TemplateResult_2; } /** * `dap-ds-datatable` * @summary A data table is a component that displays data in a tabular format. * @element dap-ds-datatable * @title - Data table * @generic T * * @event {{ sorting: SortingState }} dds-sorting-change - Fired when the sorting of the table changes. * @event {{ selection: RowSelectionState }} dds-selection-change - Fired when the selection of the table changes. * @event {{ pagination: PaginationState }} dds-pagination-change - Fired when the pagination of the table changes. * @event {{ row: Row }} dds-row-click - Fired when a row is clicked. * * @csspart base - The main table container. * @csspart header - The header of the table. * @csspart header-row - The header row of the table. * @csspart header-cell - All cells of the header. * @csspart body - The body of the table. * @csspart row - All rows of the table. * @csspart cell - All cells of the table. * @csspart pager - The pager of the table. * * @cssproperty --dds-datatable-bg-color - Background color of the table * @cssproperty --dds-datatable-border-color - Border color of the table cells * @cssproperty --dds-datatable-header-bg-color - Background color of the table header * @cssproperty --dds-datatable-header-text-color - Text color of the table header * @cssproperty --dds-datatable-row-hover-bg-color - Background color of hovered rows * @cssproperty --dds-datatable-row-selected-bg-color - Background color of selected rows * @cssproperty --dds-datatable-cell-padding - Padding of table cells * @cssproperty --dds-datatable-header-padding - Padding of header cells * @cssproperty --dds-datatable-border-width - Width of table borders * @cssproperty --dds-datatable-font-size - Font size of the table * @cssproperty --dds-datatable-line-height - Line height of the table * @cssproperty --dds-datatable-header-font-weight - Font weight of the header * @cssproperty --dds-datatable-stripe-color - Background color for striped rows * @cssproperty --dds-datatable-stripe-enabled - Whether to enable striped rows * @cssproperty --dds-datatable-border-radius - Border radius of the table * @cssproperty --dds-datatable-shadow - Box shadow of the table * @cssproperty --dds-datatable-transition-duration - Duration of hover/selection transitions * @cssproperty --dds-datatable-z-index - Z-index of the table * @cssproperty --dds-datatable-min-height - Minimum height of the table * @cssproperty --dds-datatable-max-height - Maximum height of the table * @cssproperty --dds-datatable-overflow-x - Horizontal overflow behavior * @cssproperty --dds-datatable-overflow-y - Vertical overflow behavior */ export declare class DapDSDataTable extends DdsElement { static readonly styles: CSSResult; private readonly tableController; /** Data to display in the table */ data: RowData[]; /** Columns to display in the table */ columns: ExtendedColumnDef[]; /** Row key to use for row selection, this should be a unique key for each row */ rowKey: string; /** Enable row selection on the table, can be a boolean or a function that returns a boolean * @type {boolean | ((row: Row) => boolean)} */ enableRowSelection: boolean | ((row: Row) => boolean); /** Enable sorting on the table */ enableSorting: boolean; /** Enable manual sorting on the table */ manualSorting: boolean; /** Enables manual pagination. If this option is set to true, the table will not automatically paginate rows and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation. */ manualPagination: boolean; /** If set to true, pagination will be reset to the first page when page-altering state changes eg. data is updated, filters change, grouping changes, etc. This behavior is automatically disabled when manualPagination is true but it can be overridden by explicitly assigning a boolean value to the autoResetPageIndex table option. */ autoResetPageIndex: boolean; /** Enable row click on the table */ enableRowClick: boolean; /** Loading state of the table */ loading: boolean; /** Whether to enable striped rows */ enableStripedRows: boolean; /** Number of rows in the table */ rowCount?: number; /** ID of element describing the table */ ariaDescribedBy?: string; /** Caption text for the table */ caption?: string; /** Whether to show the pager component */ pager: boolean; /** Show the page size options. */ showPageSizeOptions: string; /** Show the page index. */ showPageIndex: string; /** Show the page count. */ showPageCount: string; /** Show the first button. */ showFirstButton: string; /** Show the previous button. */ showPreviousButton: string; /** Show the next button. */ showNextButton: string; /** Show the last button. */ showLastButton: string; /** The label of the first button */ firstButtonLabel: string; /** The label of the previous button */ previousButtonLabel: string; /** The label of the next button */ nextButtonLabel: string; /** The label of the last button */ lastButtonLabel: string; /** The function to determine the pager text * @type {(pageIndex: number, pageSize: number, totalRows: number) => string} */ pageStateText: (pageIndex: number, pageSize: number, totalRows: number) => string; /** Available page size options for the pager * @type {number[]} */ pageSizeOptions: number[]; /** Sorting state of the table */ sorting: SortingState; /** @ignore */ private _sorting; /** Selection state of the table */ rowSelection: RowSelectionState; /** @ignore */ private _rowSelection; /** Pagination state of the table */ pagination: PaginationState; /** @ignore */ private _pagination; /** @ignore */ private readonly _statusMessage; /** @ignore */ debug: boolean; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; protected updated(_changedProperties: PropertyValueMap | Map): void; private readonly columnsMemo; private renderHeaderCell; private renderHeaderCellContent; private getHeaderCellStyle; private getSortIcon; private getSortTitle; private getAriaSortValue; private handleRowClick; private handleRowKeydown; private readonly renderHeader; private readonly renderBody; protected render(): TemplateResult_2; } /** * `dap-ds-datepicker` * @summary A datepicker is a graphical user interface widget that allows the user to select a date from a calendar and/or time from a time range. * @element dap-ds-datepicker * @title - Datepicker * * @property {Dayjs} value - The value of the datepicker. * @property {string} label - The label of the datepicker. * @property {string} description - The description of the datepicker. * @property {'xs' | 'sm' | 'sm'} size - The size of the datepicker. * @property {boolean} disabled - The disabled state of the datepicker. * @property {boolean} required - The required state of the datepicker. * @property {boolean} readonly - The readonly state of the datepicker. * @property {boolean} autofocus - The autofocus state of the datepicker. * @property {string} tooltip - The tooltip of the datepicker. * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the datepicker. * @property {string} feedback - The feedback of the datepicker. * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the datepicker. * @property {boolean} optional - The optional state of the datepicker. * @property {string} optionalLabel - The optional label of the datepicker. * @property {boolean} subtle - The weight of the label. Default is `false` * @property {string} autocomplete - The autocomplete of the datepicker. * @property {boolean} autofocus - The autofocus of the datepicker. * * @event {{ value: string }} dds-change - Fired when the datepicker value changes. * @event {{ value: string }} dds-input - Fired when the datepicker input value changes. * @event {{ value: string }} dds-valid-date - Fired when the datepicker input value is valid. Happens on manual input typing. * @event {{ value: string, type: 'invalid' | 'out-of-range' }} dds-invalid-date - Fired when the datepicker input value is invalid. Happens on manual input typing. * @event {{ void }} dds-clear - Fired when the datepicker is cleared. * @event {{ void }} dds-focus - Emitted when the datepicker gains focus. * @event {{ void }} dds-blur - Emitted when the datepicker loses focus. * * @csspart base - The main datepicker container. * @csspart calendar - The calendar of the datepicker. * @csspart trigger - The trigger button of the datepicker. * @csspart label - The label of the datepicker. * @csspart description - The description of the datepicker. * @csspart feedback - The feedback of the datepicker. * @csspart tooltip - The tooltip of the datepicker. * @csspart input - The input of the datepicker. * @csspart clear-button - The clear button of the datepicker. * * @cssproperty --dds-combobox-background - The background color of the combobox. Defaults to var(--dds-fields-background-default). * @cssproperty --dds-combobox-border-color - The border color of the combobox. Defaults to var(--dds-border-neutral-base). * @cssproperty --dds-combobox-border-width - The border width of the combobox. Defaults to var(--dds-border-width-base, 1px). * @cssproperty --dds-combobox-border-radius - The border radius of the combobox. Defaults to var(--dds-radius-base). * @cssproperty --dds-combobox-text-color - The text color of the combobox. Defaults to var(--dds-text-neutral-base). * @cssproperty --dds-combobox-placeholder-color - The placeholder text color. Defaults to var(--dds-text-neutral-subtle). * @cssproperty --dds-combobox-disabled-background - The background color when disabled. Defaults to var(--dds-background-neutral-stronger). * @cssproperty --dds-combobox-disabled-text - The text color when disabled. Defaults to var(--dds-text-neutral-disabled). * @cssproperty --dds-combobox-error-border - The border color for error state. Defaults to var(--dds-border-negative-base). * @cssproperty --dds-combobox-success-border - The border color for success state. Defaults to var(--dds-border-positive-base). * @cssproperty --dds-combobox-icon-color - The color of the icons. Defaults to var(--dds-text-icon-neutral-subtle). * @cssproperty --dds-combobox-clear-icon-color - The color of the clear icon. Defaults to var(--dds-button-subtle-icon-neutral-enabled). * @cssproperty --dds-combobox-popup-background - The background color of the popup. Defaults to var(--dds-background-neutral-subtle). * @cssproperty --dds-combobox-popup-shadow - The box shadow of the popup. Defaults to 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%). * * @cssproperty --dds-combobox-padding-xs - The padding for extra small size. Defaults to var(--dds-spacing-200). * @cssproperty --dds-combobox-padding-sm - The padding for small size. Defaults to var(--dds-spacing-200). * @cssproperty --dds-combobox-padding-lg - The padding for large size. Defaults to var(--dds-spacing-300). * @cssproperty --dds-combobox-padding-horizontal - The horizontal padding. Defaults to var(--dds-spacing-300). * @cssproperty --dds-combobox-padding-vertical - The vertical padding. Defaults to var(--dds-spacing-200). * @cssproperty --dds-combobox-gap - The gap between elements. Defaults to var(--dds-spacing-100). * @cssproperty --dds-combobox-icon-gap - The gap between icons. Defaults to var(--dds-spacing-200). * @cssproperty --dds-combobox-action-gap - The gap between action elements. Defaults to var(--dds-spacing-200). * @cssproperty --dds-combobox-action-padding - The padding for action elements. Defaults to var(--dds-spacing-300). * @cssproperty --dds-combobox-clear-icon-width - The width of the clear icon. Defaults to var(--dds-spacing-800). * @cssproperty --dds-combobox-dropdown-icon-right - The right position of the dropdown icon. Defaults to var(--dds-spacing-600). * @cssproperty --dds-combobox-min-width - The minimum width of the combobox. Defaults to 7.5rem. * */ export declare class DapDSDatePicker extends GenericFormElement { private readonly triggerInput; private readonly calendar; /** The current visible date of the calendar. Only the month and year are considered. * @type {Dayjs} * @default dayjs() */ currentDate: default_2.Dayjs; /** The minimum date of the datepicker. This date will be the minimum selectable date. * @type {Dayjs} * @default dayjs('1901-01-01') */ minDate: default_2.Dayjs; /** The maximum date of the datepicker. This date will be the maximum selectable date. * @type {Dayjs} * @default dayjs('2099-12-31') */ maxDate: default_2.Dayjs; /** The disabled date of the datepicker. This function will be called for each date to determine if it is disabled. * @type {(date: Dayjs) => boolean} * @default (date: Dayjs) => false */ disabledDate: (date: Dayjs) => boolean; /** The placement of the dropdown of the datepicker. * @type {'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end'} */ placement: PopupPlacement; /** The open state of the datepicker. */ opened: boolean; /** Wheter the calendar should open on typing. */ openCalendarOnInput: boolean; /** Wheter the calendar should send an empty event on typing. */ sendEmptyEventOnInput: boolean; /** The placeholder of the datepicker. */ placeholder: string | null; /** The loading state of the datepicker. */ loading?: boolean; /** The format of the datepicker. This is a comma separated list of [formats](https://day.js.org/docs/en/display/format). */ format?: string; /** The format separator character in the format attribute. */ formatSeparator: string; /** Whether the clear button should be shown. */ clearButton?: string; /** The aria label of the clear button. */ clearButtonAriaLabel?: string; /** The floating strategy of the datepicker. */ floatingStrategy: FloatingStrategy; /** The locale of the datepicker. By default it uses the global locale from dayjs. It is determined from the browser language. * @type {'hu' | 'en'} */ locale: string; private formatOptions; private setValueState; static readonly styles: CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; protected updated(_changedProperties: PropertyValueMap | Map): void; getFormattedValue(): string; isValidFormat(value: string): boolean; isValueValid(): boolean; isInputValid(): boolean; setValue(value?: Dayjs, setInputValue?: boolean, sendEmptyEventOnInput?: boolean): void; clearSelection(): Promise; private readonly handleDocumentMouseDown; private readonly handleInput; private readonly handleKeyDown; get focusElement(): HTMLInputElement; private readonly handleClick; private readonly handleClearClick; showCalendar(): Promise; hideCalendar(): Promise; private readonly handleFocus; private readonly handleBlur; getValidity(): boolean; get validity(): ValidityState; checkValidity(): boolean; reportValidity(): boolean; setValidity(): void; handleInvalid(event: Event): void; render(): TemplateResult_2; } /** * `dap-ds-divider` * @summary A divider is a visual separator between elements. * @element dap-ds-divider * @title - Divider * * @cssproperty --dds-divider-border-width - The width of the divider border. Defaults to var(--dds-border-width-base) * @cssproperty --dds-divider-border-style - The style of the divider border. Defaults to solid * @cssproperty --dds-divider-border-color - The color of the divider border. Defaults to var(--dds-border-neutral-divider) * @cssproperty --dds-divider-border-color-inverted - The color of the divider border when inverted. Defaults to var(--dds-border-neutral-divider-inverted) */ export declare class DapDSDivider extends DdsElement { /** Whether the divider is vertical */ vertical: boolean; /** The spacing of the divider * @type { 0 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 1000 | 1200 | 1400 | 1600 | 1800 | 2000 | 2400 | 3000 | 4000 | 5000 | 6000 } */ spacing: Spacing; /** The variant of the divider * @type {'normal' | 'inverted'} */ variant: string; static readonly styles: CSSResult; connectedCallback(): void; } /** * `dap-ds-feedback` * @summary A feedback is a container for feedback messages. * @element dap-ds-feedback * @title - Feedback * * @property {string} feedback - The feedback message. * @property {'xs' | 'sm' | 'lg'} feedbackSize - The size of the feedback. Default is `sm`. * @property {'negative' | 'positive' | 'warning'} feedbackSize - The type of the feedback. * @property {boolean} feedbackSubtle - The weight of the feedback. * @property {boolean} feedbackNoMargin - Removes the margins around the feedback. * @property {string} feedbackId - The id of the feedback. * * @slot icon - The custom icon of the feedback. * @slot - The text of the feedback. * * @csspart base - The main feedback container. * @csspart icon - The icon of the feedback. * @csspart text - The text of the feedback. * * @cssproperty --dds-feedback-spacing - The spacing around the feedback component. Default is `var(--dds-spacing-200)`. * @cssproperty --dds-feedback-color - The text color of the feedback. Default is `var(--dds-text-positive-subtle)`. * @cssproperty --dds-feedback-font-size - The font size of the feedback. Default is `var(--dds-font-sm)`. * @cssproperty --dds-feedback-font-weight - The font weight of the feedback. Default is `var(--dds-font-weight-bold)`. * @cssproperty --dds-feedback-icon-fill - The fill color of the feedback icon. Default is `var(--dds-icon-positive-subtle)`. * @cssproperty --dds-feedback-icon-spacing - The spacing between the icon and text. Default is `var(--dds-spacing-100)`. * * @cssproperty --dds-feedback-color-warning - The text color for warning feedback. Default is `var(--dds-text-neutral-base)`. * @cssproperty --dds-feedback-color-positive - The text color for positive feedback. Default is `var(--dds-text-positive-subtle)`. * @cssproperty --dds-feedback-color-negative - The text color for negative feedback. Default is `var(--dds-text-negative-subtle)`. * @cssproperty --dds-feedback-icon-fill-warning - The icon fill color for warning feedback. Default is `var(--dds-icon-informative-subtle)`. * @cssproperty --dds-feedback-icon-fill-positive - The icon fill color for positive feedback. Default is `var(--dds-icon-positive-subtle)`. * @cssproperty --dds-feedback-icon-fill-negative - The icon fill color for negative feedback. Default is `var(--dds-icon-negative-subtle)`. */ export declare class DapDSFeedback extends DapDSFeedback_base { static readonly styles: CSSResult; render(): unknown; } declare const DapDSFeedback_base: typeof DdsElement & { new (...args: any[]): SizedElementInterface; prototype: SizedElementInterface; } & { new (...args: any[]): FeedbackElementInterface; prototype: FeedbackElementInterface; }; /** * `dap-ds-file-input` * @summary A file input is a control that allows users to select files to upload. * @element dap-ds-file-input * @title - File input * * @property {string} name - The name of the file input. * @property {string} value - The value of the file input. * @property {'success' | 'error'} status - The status of the file input. * @property {string} label - The label for the file input. * @property {string} description - The description for the file input. * @property {string} tooltip - The tooltip for the file input. * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input. * @property {boolean} disabled - Whether the file input is disabled. * @property { 'xs' | 'sm' | 'lg' } size - The size of the file input. * @property {string} feedback - The feedback for the file input. * @property {'negative' | 'positive' | 'warning'} feedbackType - The type of feedback for the file input. * @property {boolean} required - Whether the file input is required. * @property {boolean} optional - Whether the file input is optional. * @property {boolean} subtle - Font weight of the feedback label. Default is `false` which is bold. * @property {string} uploadButtonLabel - The label for the upload button. * @property {string} browseButtonLabel - The label for the browse button. * @property {string} accept - The file types that the file input accepts. * @property {boolean} multiple - Whether the file input accepts multiple files. * @property {boolean} keepValue - Whether to keep the value when new files are selected. * @property {string} uploadUrl - A remote URL to upload files to. * @property {string} deleteUrl - A remote URL to delete uploaded files from. Supports placeholders: `{fileName}`, `{id}`, `{key}`, `{location}`. * @property {string} uploadHeaders - Custom headers for upload requests (JSON string). * @property {string} deleteHeaders - Custom headers for delete requests (JSON string). * @property {boolean} autoupload - Whether to automatically upload files after selection. * @property {number} maxFiles - The maximum number of files that can be uploaded. * @property {number} maxFileSize - The maximum size of files that can be uploaded (in bytes). * @property {boolean} showDropzone - Whether to show a separate dropzone area. * @property {string} dropzoneText - Text to display in the dropzone. * @property {boolean} showFileList - Whether to show the built-in file list. * @property {boolean} confirmRemove - Whether to show confirmation dialog before removing files. * * @event {{ file: File }} dds-upload-start - Fired when a file upload starts. * @event {{ file: File, progress: number }} dds-upload-progress - Fired during file upload progress. * @event {{ file: File, item: DapDSFileInputListItem, result: any }} dds-upload-complete - Fired when a file upload completes successfully. * @event {{ file: File, item: DapDSFileInputListItem, error: Error }} dds-upload-error - Fired when a file upload encounters an error. * @event {{ void }} dds-all-uploads-complete - Fired when all file uploads are complete. * @event {{ file: FileListElement }} dds-file-removed - Fired when a file is removed from the file input. * @event {{ file: FileListElement, error: Error }} dds-file-delete-error - Fired when a file deletion from server encounters an error. * @event {{ files: File[] }} dds-file-change - Fired when the file input value changes. * * @slot dropzone-content - The content to display in the dropzone. * * @csspart base - The main file input container. * @csspart input - The file input control. * @csspart label - The file input label. * @csspart description - The file input description. * @csspart feedback - The file input feedback. * @csspart tooltip - The file input tooltip. * @csspart upload-progress - The upload progress container. * @csspart browse-button - The browse button. * @csspart upload-button - The upload button. * @csspart dropzone - The dropzone area. * @csspart file-list - The file list container. * @csspart file-list-item - Individual file list items. */ export declare class DapDSFileInput extends GenericFormElement { private readonly input; /** Label for the upload button */ uploadButtonLabel: string; /** Label for the browse button */ browseButtonLabel: string; /** Whether to show a separate dropzone area */ showDropzone: boolean; /** Text to display in the dropzone */ dropzoneText: string; /** Whether to show the built-in file list */ showFileList: boolean; /** Whether to show confirmation dialog before removing files */ confirmRemove: boolean; /** The file types that the file input accepts */ accept: string; /** Whether the file input accepts multiple files. */ multiple: boolean; /** Whether to keep the value of the file input when new files are selected. */ keepValue: boolean; /** A remote URL to upload files to */ uploadUrl: string; /** Whether to automatically upload files after selection */ autoupload: boolean; /** The property to use when uploading files */ uploadProperty: string; /** The HTTP method to use when uploading files */ uploadMethod: string; /** A remote URL to delete uploaded files from */ deleteUrl: string; /** The HTTP method to use when deleting files */ deleteMethod: string; /** Whether to send credentials with the file upload request */ withCredentials: boolean; /** Custom headers to send with upload requests (JSON string) */ uploadHeaders: string; /** Custom headers to send with delete requests (JSON string) */ deleteHeaders: string; /** The file list component to bind to */ fileList: DapDSFileInputList | null; /** The maximum number of files that can be uploaded */ maxFiles?: number; /** The maximum size of files that can be uploaded (in bytes) */ maxFileSize?: number; get files(): File[]; private _files; private _uploadProgress; private readonly _uploadingFiles; private readonly _activeUploads; private readonly _uploadedFiles; private _isDragOver; private _showRemoveDialog; private _fileToRemove; private _removeResolve; private _removeReject; static readonly styles: CSSResult; checkFileEquality(file1: File | FileListElement, file2: File | FileListElement): boolean; /** * Validates if a file type is accepted based on the accept attribute */ private validateFileType; /** * Validates a file list against all constraints (count, size, type) */ private validateFiles; private removeFile; private performFileRemoval; connectedCallback(): void; onConfirmDelete(): Promise; onCancelDelete(): void; onCancel(): void; onClick(): void; onDropzoneKeydown(event: KeyboardEvent): void; setFileLoadingState(file: File, loading: boolean): DapDSFileInputListItem | undefined; /** * Aborts upload for a specific file */ abortUpload(fileName: string): void; /** * Aborts all active uploads */ abortAllUploads(): void; /** * Manually start upload of all selected files */ startUpload(): void; /** * Delete an uploaded file from the server */ private deleteUploadedFile; private uploadFiles; private handleFileList; onChange(event: InputEvent): void; onDragenter(event: DragEvent): void; onDragover(event: DragEvent): void; onDragleave(event: DragEvent): void; onDrop(event: DragEvent): void; render(): TemplateResult_2<1>; } /** * `dap-ds-file-input-list` * @summary A file input list is a container for file input items. * @element dap-ds-file-input-list * @title - File input list * @group file-input * * @csspart base - The main file input list container. * * @cssproperty --dds-file-list-display - Controls the display property (default: flex) * @cssproperty --dds-file-list-flex-direction - Controls the flex-direction property (default: column) * @cssproperty --dds-file-list-padding - Controls the padding property (default: 0) * @cssproperty --dds-file-list-list-style - Controls the list-style-type property (default: none) * @cssproperty --dds-file-list-gap - Controls the row-gap property (default: var(--dds-spacing-200)) */ export declare class DapDSFileInputList extends DapDSFileInputList_base { /** The id of the file input element to bind to. */ for: string; /** Disables the file input list. */ disabled: boolean; /** Whether to show the delete button in the file input list item. */ showDeleteButton: string; private _files; static readonly styles: CSSResult; private fileInputElement; get files(): NodeListOf; getFileByName(name: string): Element | null; private _handleFileChange; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; removeFile(event: CustomEvent): void; render(): TemplateResult_2<1>; } declare const DapDSFileInputList_base: typeof DdsElement & { new (...args: any[]): SizedElementInterface; prototype: SizedElementInterface; }; /** * `dap-ds-file-input-list-item` * @summary A file input list item is a container for file input list items. * @element dap-ds-file-input-list-item * @title - File input list item * @group file-input * * @event {{ file: FileListElement }} dds-file-remove - Dispatched when a file is removed from the list. * * @csspart base - The main file input list item container. * @csspart feedback - The feedback container. * @csspart link - The link text of the item component. * * @cssproperty --dds-file-list-item-padding - The padding of the file list item. * @cssproperty --dds-file-list-item-border-width - The border width of the file list item. * @cssproperty --dds-file-list-item-border-color - The border color of the file list item. * @cssproperty --dds-file-list-item-border-radius - The border radius of the file list item. * @cssproperty --dds-file-list-item-bg-color - The background color of the file list item. * @cssproperty --dds-file-list-item-font-weight - The font weight of the file list item. * @cssproperty --dds-file-list-item-disabled-bg-color - The background color of the disabled file list item. * @cssproperty --dds-file-list-item-disabled-color - The text color of the disabled file list item. * @cssproperty --dds-file-list-item-content-margin - The margin of the content within the file list item. * @cssproperty --dds-file-list-item-content-gap - The gap between content elements in the file list item. * @cssproperty --dds-file-list-item-filename-color - The color of the filename text. * @cssproperty --dds-file-list-item-filesize-color - The color of the filesize text. * @cssproperty --dds-file-list-item-feedback-padding - The padding of the feedback section. * @cssproperty --dds-file-list-item-feedback-border-color - The border color of the feedback section. * @cssproperty --dds-file-list-item-feedback-font-size - The font size of the feedback text. */ export declare class DapDSFileInputListItem extends DapDSFileInputListItem_base { /** Disables the file input list item. */ disabled: boolean; /** The name of the file input. */ inputName: string; /** The feedback message. */ feedback: string; /** Feedback type. * @type {'negative' | 'positive' | 'warning' | 'info'} */ feedbackType: FeedbackType; /** Loading state of the file input list item. */ loading?: boolean | undefined; /** Show delete button. */ showDeleteButton: string; /** Show file size. */ showSize?: boolean | undefined; fileData: FileListElement; /** Subtle style. */ subtle: boolean; /** The progress of the file upload. */ progress: string; /** The url of the item link. If present, the item title will rendered as a link. */ href: string; /** The rel of the item link. Only used if href is present. */ rel: string; /** The target of the item link. Only used if href is present. */ target: LinkTarget; /** Whether the file should be downloaded when clicked. */ download: string; static readonly styles: CSSResult; delete(): void; get formattedSize(): string; render(): TemplateResult_2<1>; } declare const DapDSFileInputListItem_base: typeof DdsElement & { new (...args: any[]): SizedElementInterface; prototype: SizedElementInterface; }; /** * `dap-ds-form-label` * @summary A form label is a container for labels in a form. * @element dap-ds-form-label * @title - Form label * @group form * * @property {string} optionalLabel - Label of optional text * @property {boolean} subtle - Text weight of the label. * @property {boolean} optional - If the label is optional. * @property {boolean} required - If the label is required. * @property {string} label - The label text. * * @csspart base - The main form label container. * @csspart required - The required indicator of the form label. * @csspart optional - The optional indicator of the form label. * * @cssproperty --dds-form-label-font-weight - Font weight of the label. Defaults to var(--dds-font-weight-bold). * @cssproperty --dds-form-label-line-height - Line height of the label. Defaults to var(--dds-font-line-height-xlarge). * @cssproperty --dds-form-label-color - Text color of the label. Defaults to var(--dds-text-neutral-enabled). * @cssproperty --dds-form-label-disabled-color - Text color when the label is disabled. Defaults to var(--dds-text-neutral-disabled). * @cssproperty --dds-form-label-required-color - Color of the required indicator. Defaults to var(--dds-text-negative-subtle). * @cssproperty --dds-form-label-optional-color - Color of the optional indicator. Defaults to var(--dds-text-neutral-subtle). * @cssproperty --dds-form-label-margin-bottom - Bottom margin of the label. Defaults to var(--dds-spacing-200). */ export declare class DapDSFormLabel extends DapDSFormLabel_base { /** The id of the form element that the label is associated with. */ for?: string; /** Whether the label should be rendered as text or a