import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/button-group/button-group.d.ts /** * * * @summary Displays related buttons in a stylized group. * @tag sigvelo-button-group * @documentation https://design-system.sigvelo.com/docs/components/button-group * @status stable * @since 1.0 * * @slot - One or more `` elements to place in the button group. * * @example Default * ```html * * * * New * * * * Open * * * * Save * * * * Print * * * ``` * * **Note:** Button groups work really well in conjunction with the [toolbar component](/docs/components/toolbar). * * @example With dropdowns * You can nest dropdowns inside button groups to give users additional options. * * ```html * * * * Details * * * * Comments * * * * * Download * * Small 640×480 * Medium 800×600 * Large 1280×1024 * * Custom… * * * ``` * * @example Adding tooltips * You can add tooltips to improve the user experience of your button groups. * * ```html * * * * * * * Details * Comments * Download * ``` * * @example Vertical button groups * To make a vertical button group, set the `orientation` attribute to `vertical`. * * ```html * * * * New * * * * Open * * * * Save * * * * Print * * * ``` * * @example Making a split button * Create a split button by placing a button and a dropdown inside a button group. * * ```html * * * * Share * * * * Share with cats * Share with dogs * * Copy URL * Copy embed code * * * ``` */ declare class SigveloButtonGroup extends SigveloElement { static styles: CSSResultGroup; /** * An accessible label for the tab list. This won't be visible, but it will be read to assistive devices so it's * usually a good idea to include one. */ label: string; /** The button group's orientation. */ orientation: "horizontal" | "vertical"; firstUpdated(): void; updated(changedProperties: PropertyValues): void; /** Gets an array of buttons slotted into the button group. Includes slotted buttons, such as dropdown triggers. */ private getButtons; /** Updates slotted button class names so they get the correct button styles. */ private updateClassNames; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-button-group": SigveloButtonGroup; } } //#endregion export { SigveloButtonGroup as t };