export function normalize(value: string): string; /** * Implement keyboard and mouse interactions for a grouping composite widget. */ export class Group { /** * Initialize a new `Group` instance. * @param {HTMLElement} parent Parent element. * @param {object} [options] Options. * @param {boolean} [options.clickToSelect] Whether to select an item by clicking on it. */ constructor(parent: HTMLElement, { clickToSelect }?: { clickToSelect?: boolean | undefined; }); /** * Whether {@link activate} has run. Until then, members are left as they are rendered. * @type {boolean} */ activated: boolean; parent: HTMLElement; role: string; multi: boolean; id: string; parentGroupSelector: string; clickToSelect: boolean; /** @type {(event: MouseEvent) => void} */ _onClick: (event: MouseEvent) => void; /** @type {(event: KeyboardEvent) => void} */ _onKeyDown: (event: KeyboardEvent) => void; orientation: string; childRoles: string[]; childSelectedAttr: "aria-selected" | "aria-checked"; childSelectedProp: string; focusChild: boolean; selectFirst: boolean; /** * Whether a member’s `aria-controls` target is a panel this group owns, as with a tab and its * tabpanel. Only then may the group hide the target when the member isn’t selected. Elsewhere * `aria-controls` means something quite different — on a menu item it points at the submenu the * item opens, and on a toolbar button at the region it acts on — and hiding those would break * the very widget the member controls. * @type {boolean} */ controlsPanel: boolean; /** * Which member holds the group’s single tab stop. `selected` suits widgets where one member is * the natural entry point, such as the checked radio or the current tab. `first` suits menus, * where any number of items can be checked at once, so the checked state says nothing about * where the keyboard should land. * @type {'selected' | 'first'} */ rovingTabStop: "selected" | "first"; observer: MutationObserver; /** * Activate the members. */ activate(): void; /** * Put exactly one member in the tab sequence, as a composite widget should. Giving every checked * member `tabindex="0"` would scatter tab stops through the widget — a menu with two checked * items would take three tab presses to step over. */ updateTabStop(): void; /** * Count the columns of a grid layout from where the members sit, rather than from their widths: * a row of a data grid spans the full width, a tile in a grid listbox doesn’t, and a header row * may have no box at all. * @returns {number} Number of members per visual row, at least 1. */ get columnCount(): number; /** * CSS selector to retrieve the members. * @type {string} */ get selector(): string; /** * List of all the members. * @type {HTMLElement[]} */ get allMembers(): HTMLElement[]; /** * List of the enabled and visible members. * @type {HTMLElement[]} */ get activeMembers(): HTMLElement[]; /** * The element that opens this menu, either a menu button or a menu item in the menu above. * @type {HTMLElement | null} */ get opener(): HTMLElement | null; /** * The menu item that opens this menu, when this menu is a submenu. A menu button is deliberately * excluded, because closing a top-level menu is not what “back to the parent item” means. * @type {HTMLElement | null} */ get parentMenuItem(): HTMLElement | null; /** * Close this menu along with every menu above it. * @returns {HTMLElement | null} The element that opens the outermost menu, so the caller can * hand focus back to it. */ closeMenuChain(): HTMLElement | null; /** * Leave the menu the way Tab should: close it along with every menu above it, then carry focus on * to whatever follows the outermost opener. The browser can’t be left to do this itself, because * a modal `` confines Tab to its own contents. * @param {boolean} backwards Whether to move to the previous tab stop instead, as Shift+Tab. */ leaveMenu(backwards: boolean): Promise; /** * Open the submenu of the given menu item if needed, and move focus onto its first item. * @param {HTMLElement} item Menu item with `aria-haspopup="menu"`. */ enterSubmenu(item: HTMLElement): Promise; /** * Close this submenu and move focus back onto the menu item that opens it. * @param {HTMLElement} item Menu item with `aria-haspopup="menu"`. */ leaveSubmenu(item: HTMLElement): void; /** * Get the currently selected member. * @type {HTMLElement | undefined} */ get selected(): HTMLElement | undefined; /** * Whether the parent is disabled. * @type {boolean} */ get isDisabled(): boolean; /** * Whether the parent is read-only. * @type {boolean} */ get isReadOnly(): boolean; /** * Whether the widget is displayed in grid mode. * @type {boolean} */ get grid(): boolean; /** * Select (and move focus to) the given target. * @param {(MouseEvent | KeyboardEvent)} event Triggered event. * @param {HTMLElement} newTarget Target element. */ selectTarget(event: (MouseEvent | KeyboardEvent), newTarget: HTMLElement): void; /** * Handle the `click` event on the widget. * @param {MouseEvent} event `click` event. */ onClick(event: MouseEvent): void; /** * Handle the `keydown` event on the widget. * @param {KeyboardEvent} event `keydown` event. */ onKeyDown(event: KeyboardEvent): void; /** * Clean up event listeners. */ destroy(): void; /** * Called whenever the params are updated. Filter the items based on the search terms. * @param {{ searchTerms: string }} params Updated params. */ onUpdate({ searchTerms }: { searchTerms: string; }): void; #private; } export function activateGroup(paramsOrGetter?: object | (() => object)): Attachment; import type { Attachment } from 'svelte/attachments';