import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/toolbar/toolbar.d.ts /** * * * @summary Turns a collection of buttons and button groups into an accessible toolbar. * @tag sigvelo-toolbar * @documentation https://design-system.sigvelo.com/docs/components/toolbar * @status stable * @since 1.0 * * @slot - A mixture of buttons and/or button groups. * * @example Default * Toolbars follows the ARIA APG toolbar pattern for accessibility. A roving tab index is used, meaning users can tab into the control and use the arrow keys to navigate options. A subsequent tab will exit the toolbar. * * By grouping related buttons and button groups into toolbars, the number of tab stops in the keyboard interface is reduced, resulting in a more user-friendly experience. * * ```html * * *

* * * *

* * * ``` * * @example Toolbars with various components * Toolbars can be used with a mixture of buttons, button groups, and dropdowns that have a `` trigger. Keyboard users will be able to cycle through all buttons with [[Left]] and [[Right]], as expected. * * ```html * * * * New * * * *

* * * * View * Show canvas * Show grid * Show source * * Preferences… * * * * *

* * ``` * * @example Vertical toolbars * To make a vertical toolbar, set the `orientation` attribute to `vertical`. Keyboard users will be able to use [[Up]] and [[Down]] instead of [[Left]] and [[Right]]. Button groups will automatically assume the correct orientation. * * ```html * * * * * New * * * * Open * * * * Save * * * * Print * * * * ``` */ declare class SigveloToolbar extends SigveloElement { static styles: CSSResultGroup; /** The toolbar's orientation. This changes which arrow keys are used to select adjacent buttons. */ orientation: "horizontal" | "vertical"; firstUpdated(): void; updated(changedProperties: PropertyValues): void; /** Gets an array of buttons slotted into the toolbar. Includes slotted buttons, such as dropdown triggers. */ private getButtons; /** Gets an array of button groups slotted into the toolbar. */ private getButtonGroups; private handleDefaultSlotChange; private handleKeyDown; private handlePointerDown; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-toolbar": SigveloToolbar; } } //#endregion export { SigveloToolbar as t };