import { type IDropDownable } from '../../../Behaviors/DropDownable'; import { ButtonBaseElement } from '../Abstracts/ButtonBaseElement'; import type { IDropDownButtonElementProps } from './IDropDownButtonElementProps'; declare const DropDownButtonElement_base: (abstract new (...args: Array) => import("../../../../Controls/Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Reversible").IReversibleProps) & (abstract new (...args: Array) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new (...args: Array) => import("../../../Behaviors/ContentAlignable").IContentAlignableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array) => import("../../../Behaviors/DropDownable").IDropDownableProps & IDropDownable) & (abstract new (...args: Array) => import("../../../Behaviors/Busyable").IBusyableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Labelable").ILabelableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Iconable").IIconableProps) & typeof ButtonBaseElement & import("../../../../Controls/Behaviors/Themeable").IThemeableCtor; /** * Drop Down Button - A button that opens a menu when clicked, allowing users to select from a list of options. * * @description * The Drop Down Button is a versatile user interface component that triggers a dropdown menu containing additional * options or actions. When clicked, the button reveals a menu with a list of choices, providing users with multiple * actions or selections in a compact and organized manner. Drop Down Buttons are commonly used in navigation bars, * toolbars, and other interactive areas where a set of related options needs to be presented. * * @name Drop Down Button * @element mosaik-dropdown-button * @category Buttons * * @slot - The default dropdown content slot. * @slot icon - The icon slot. * @slot label - The label slot. * @slot overlay - The overlay slot (useful for badges). * * @csspart button - The button part. * @csspart focusRing - The focus ring part. * @csspart icon - The icon part. * @csspart iconCaret - The icon caret part. * @csspart innerStack - The innerStack part. * @csspart label - The label part. * @csspart popup - The popup part. * @csspart portal - The portal part. * @csspart progressRing - The progress ring part. * @csspart projection - The projection part. * @csspart ripple - The ripple part. * * @cssprop {Color} --drop-down-button-background-color - The background color of the drop down button. * @cssprop {Color} --drop-down-button-border-color - The border color of the drop down button. * @cssprop {String} --drop-down-button-border-radius - The border radius of the drop down button. * @cssprop {String} --drop-down-button-border-style - The down button border style CSS custom property. * @cssprop {String} --drop-down-button-border-width - The border width of the drop down button. * @cssprop {String} --drop-down-button-focus-ring-active-width - The down button focus ring active width CSS custom property. * @cssprop {String} --drop-down-button-focus-ring-color - The down button focus ring color CSS custom property. * @cssprop {String} --drop-down-button-focus-ring-inward-offset - The down button focus ring inward offset CSS custom property. * @cssprop {String} --drop-down-button-focus-ring-outward-offset - The down button focus ring outward offset CSS custom property. * @cssprop {String} --drop-down-button-font-family - The font family of the drop down button. * @cssprop {String} --drop-down-button-font-letter-spacing - The letter spacing of the drop down button font. * @cssprop {String} --drop-down-button-font-line-height - The line height of the drop down button font. * @cssprop {String} --drop-down-button-font-size - The font size of the drop down button. * @cssprop {String} --drop-down-button-font-text-decoration - The text decoration of the drop down button font. * @cssprop {String} --drop-down-button-font-text-transform - The text transform of the drop down button font. * @cssprop {String} --drop-down-button-font-weight - The font weight of the drop down button. * @cssprop {Color} --drop-down-button-foreground-color - The foreground color of the drop down button. * @cssprop {String} --drop-down-button-gap - The gap between elements in the drop down button. * @cssprop {String} --drop-down-button-height - The down button height CSS custom property. * @cssprop {String} --drop-down-button-icon-min-height - The down button icon min height CSS custom property. * @cssprop {String} --drop-down-button-icon-min-width - The down button icon min width CSS custom property. * @cssprop {String} --drop-down-button-line-height - The down button line height CSS custom property. * @cssprop {String} --drop-down-button-min-height - The down button min height CSS custom property. * @cssprop {String} --drop-down-button-min-width - The down button min width CSS custom property. * @cssprop {String} --drop-down-button-padding-bottom - The bottom padding of the drop down button. * @cssprop {String} --drop-down-button-padding-left - The left padding of the drop down button. * @cssprop {String} --drop-down-button-padding-right - The right padding of the drop down button. * @cssprop {String} --drop-down-button-padding-top - The top padding of the drop down button. * @cssprop {String} --drop-down-button-progress-ring-width - The down button progress ring width CSS custom property. * @cssprop {String} --drop-down-button-progress-thickness - The down button progress thickness CSS custom property. * @cssprop {Color} --drop-down-button-ripple-color - The down button ripple color CSS custom property. * @cssprop {String} --drop-down-button-ripple-duration - The down button ripple duration CSS custom property. * @cssprop {String} --drop-down-button-shadow - The shadow of the drop down button. * @cssprop {String} --drop-down-button-shadow-blur - The down button shadow blur CSS custom property. * @cssprop {String} --drop-down-button-shadow-color - The down button shadow color CSS custom property. * @cssprop {String} --drop-down-button-shadow-offset-x - The down button shadow offset x CSS custom property. * @cssprop {String} --drop-down-button-shadow-offset-y - The down button shadow offset y CSS custom property. * @cssprop {String} --drop-down-button-shadow-spread - The down button shadow spread CSS custom property. * @cssprop {String} --drop-down-button-transform - The down button transform CSS custom property. * @cssprop {String} --drop-down-button-transition-duration - The transition duration of the drop down button. * @cssprop {String} --drop-down-button-transition-mode - The down button transition mode CSS custom property. * @cssprop {String} --drop-down-button-transition-property - The down button transition property CSS custom property. * @cssprop {String} --drop-down-button-translate - The down button translate CSS custom property. * @cssprop {String} --drop-down-button-width - The down button width CSS custom property. * * @dependency mosaik-floating - The Floating element. * @dependency mosaik-focus-ring - The Focus Ring element. * @dependency mosaik-icon - The Icon element. * @dependency mosaik-portal - The Portal element. * @dependency mosaik-progress-ring - The Progress Ring element. * @dependency mosaik-ripple - The Ripple element. * @dependency mosaik-stack - The Stack element. * @dependency mosaik-text - The Text element. * * @example * Basic dropdown button: * ```html * * * * * * * ``` * * @example * Dropdown button with variant and no caret: * ```html * * * * * * * ``` * * @public */ export declare class DropDownButtonElement extends DropDownButtonElement_base implements IDropDownButtonElementProps, IDropDownable { private readonly _clickOutsideController; private readonly _projectionController; private _caretVisible; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `caretVisible` property. * * @public * @attr caret-visible */ get caretVisible(): boolean; set caretVisible(value: boolean); /** * @public * @override */ connectedCallback(): void; /** * @protected */ protected onIsDropDownOpenPropertyChanged(_prev?: boolean, next?: boolean): void; /** * @protected */ protected onIsBusyPropertyChanged(_prev: boolean, next?: string): void; /** * @private */ private onClickedOutside; /** * @private * @template */ onFloatingActiveChanged(active: boolean): void; } /** * @public */ export declare namespace DropDownButtonElement { type Props = IDropDownButtonElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-dropdown-button': DropDownButtonElement; } } export {}; //# sourceMappingURL=DropDownButtonElement.d.ts.map