import "./icon-CTW4Gr4z.js"; import { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { SigveloElement, SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/combobox/combobox.d.ts /** * * * @summary Allows users to select from a list of options with type-ahead search. * @tag sigvelo-combobox * @documentation https://design-system.sigvelo.com/docs/components/combobox * @status stable * @since 1.0 * * @dependency sigvelo-icon * @dependency sigvelo-combobox-item * * @slot - One or more `` elements to show as options. * @slot label - The combobox's label. For plain-text labels, use the `label` attribute instead. * @slot description - The combobox's description. For plain-text descriptions, use the `description` attribute instead. * @slot start - An icon or similar element to place before the input. Works great with ``. * @slot end - An icon or similar element to place after the input. Works great with ``. * * @event sigvelo-blur - Emitted when the combobox loses focus. * @event sigvelo-change - Emitted when the user commits changes to the combobox's value. * @event sigvelo-focus - Emitted when the combobox receives focus. * @event sigvelo-input - Emitted when the combobox receives input. * @event sigvelo-before-open - Emitted when the dropdown is instructed to open but before it is shown. * @event sigvelo-open - Emitted when the dropdown opens. * @event sigvelo-before-close - Emitted when the dropdown is instructed to close but before it is hidden. * @event sigvelo-close - Emitted when the dropdown closes. * * @csspart label - The element that contains the combobox's label. * @csspart description - The element that contains the combobox's description. * @csspart visual-box - The element that wraps the internal text box. * @csspart input-area - The wrapper surrounding tags and the internal text box. * @csspart tag - Individual tag elements. * @csspart tag-remove - The remove button for tags. * @csspart text-box - The internal text box, an `` element. * @csspart chevron - The chevron icon, a `` element. * @csspart chevron__svg - The chevron icon's `Choose your purrfect companion * * Browse our available cats or schedule a visit. * * Luna (Tabby, 2 years) * Milo (Orange, 1 year) * Bella (Calico, 3 years) * * ``` * * @example Providing options * Create combobox options by adding `` elements inside the combobox. Each item should have a `value` attribute that will be submitted with the form. If no value is provided, the text content is used. * * ```html * * Playful and Energetic * Cuddly Lap Cat * Independent Spirit * Social Butterfly * Curious Explorer * * ``` * * Combobox items can have structured content with icons and details. * * ```html * * * * Available Now * Ready for adoption * * * * Adoption Pending * Application in review * * * * Medical Hold * Recovering from treatment * * * * Foster Only * Temporary care needed * * * * * ``` * * **Warning:** Avoid placing interactive elements such as buttons and links inside the combobox item, as this will hinder accessibility and can lead to unexpected behaviors. * * @example Providing an initial value * Add the `selected` attribute to the combobox item you want to select initially. When using `multiple`, you can apply `selected` to more than one option. * * ```html * * Morning (6-9 AM) * Noon (11 AM-1 PM) * Evening (5-7 PM) * Night (8-10 PM) * * ``` * * @example Getting and setting the value * The combobox's value can be accessed and modified through JavaScript. For single selection, use the `value` property. For multiple selection, `value` will be an array. * * ```js * // Single selection * const combobox = document.querySelector('sigvelo-combobox'); * console.log(combobox.value); // "persian" * combobox.value = 'siamese'; * * // Multiple selection * const multiCombobox = document.querySelector('sigvelo-combobox[multiple]'); * console.log(multiCombobox.value); // ["persian", "siamese"] * multiCombobox.value = ['bengal', 'ragdoll']; * ``` * * @example Adding a clear button * Add the `with-clear` attribute to show a clear button when the combobox has a value. This allows users to quickly clear their selection. * * ```html * * Yes, I want treats! * No treats needed * Maybe later * * ``` * * @example Multiple selection * Use the `multiple` attribute to enable multi-selection mode. Selected items appear as tags in the input area. Users can remove tags by clicking the × button or pressing Backspace. * * ```html * * Purring * Kneading (Making Biscuits) * Chirping at Birds * Head Bunting * Slow Blinking * Midnight Zoomies * Bringing "Gifts" * Teeth Chattering * * ``` * * **Note:** In multiple mode, the dropdown stays open after selecting an item, allowing users to quickly select multiple options. Press Escape or click outside to close the dropdown. * * @example Start and end content * Use the `start` and `end` slots to add presentational icons or text. Avoid interactive elements such as buttons, links, etc. Works well with `` and `
* * * * Feather Wand * Laser Pointer * Catnip Mouse * Puzzle Feeder * * *
* * * * * Annual Checkup * Vaccination * Dental Cleaning * Grooming * * ``` * * @example Filled and unstyled comboboxes * Use the `variant` attribute to change the visual style of the combobox. Options are `normal` (default), `filled`, and `unstyled`. * * ```html * * Fluffy * Sleek * Short-haired * * *
* * * Fluffy * Sleek * Short-haired * * *
* * * Fluffy * Sleek * Short-haired * * ``` * * @example Pill-shaped comboboxes * Add the `pill` attribute to give the combobox rounded edges. * * ```html * * Salmon Bites * Chicken Strips * Tuna Flakes * Catnip Cookies * Cheese Cubes * * ``` * * When using `multiple`, tags become pill-shaped and the combobox will curve to wrap around them. * * ```html * * Bird Watching * Sunbathing * Toy Hunting * Box Sitting * Treat Begging * Midnight Racing * Lap Napping * * ``` * * @example Changing the size * Use the `size` attribute to change the combobox's size. Available sizes are `xs`, `sm`, `md` (default), `lg`, and `xl`. * * ```html * * * * * * * * * * Solid Color * Tabby Stripes * Calico * Tortoiseshell * Tuxedo * Pointed (Siamese) * * * * ``` * * @example Disabling the combobox * Add the `disabled` attribute to disable the entire combobox. * * ```html * * Bath & Blow-dry * Nail Trim * Full Grooming * * ``` * * @example Disabling items * Add the `disabled` attribute to individual combobox items to make them non-selectable. Disabled items will still appear in search results but cannot be selected. * * ```html * * Annual Checkup * Vaccination * Spay/Neuter (Fully booked) * Dental Cleaning * Emergency Care (Call first) * * ``` * * @example Showing labels on the side * With the `sigvelo-side-label` utility, you can show labels on the side instead of on top of the combobox. You can control the width of the label by setting the `--label-width` custom property. * * ```html * * Kitten (0-1 year) * Young (1-3 years) * Adult (3-7 years) * Senior (7+ years) * *
* * Couch Potato * Moderately Active * Very Energetic * * ``` * * @example Validation * The `required` attribute can be used to enable validation using the Constraint Validation API. * * ```html * * ``` * * @example Using custom validation * Use the `setCustomValidity()` method to make the combobox invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, call the method with an empty string. * * ```html * * * * ``` * * @example Styling validation * You can style valid and invalid comboboxes using the `:valid` and `:invalid` pseudo classes. * * ```html * * * * ``` * * However, these selectors will match even before the user has had a chance to interact with the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted. * * ```html * * * * ``` */ declare class SigveloCombobox extends SigveloFormControlElement { static formAssociated: boolean; static observeSlots: boolean; static styles: CSSResultGroup; private cleanup; private optionIdCounter; private liveRegionTimeoutId; private localize; private navigationDebounceId; protected get focusableAnchor(): HTMLInputElement; private dropdown; private textBox; open: boolean; inputValue: string; private activeItem; private selectedItems; private filteredItems; private inputWidth; protected isInvalid: boolean; protected hadUserInteraction: boolean; protected wasSubmitted: boolean; private liveAnnouncement; /** The combobox's label. */ label: string; /** The combobox's description. */ description: string; /** The name of the combobox for form submission. */ name: string; /** The combobox's value(s). */ value: string | string[]; /** Placeholder text for the input. */ placeholder: string; /** Disables the combobox. */ disabled: boolean; /** Makes the combobox required. */ required: boolean; /** Enables multiple selection. */ multiple: boolean; /** Adds a clear button when not blank. */ withClear: boolean; /** The visual variant of the combobox. */ variant: "normal" | "filled" | "unstyled"; /** The size of the combobox. */ size: "xs" | "sm" | "md" | "lg" | "xl"; /** Draws the combobox in a pill shape. */ pill: boolean; /** The dropdown's placement relative to the input. */ placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end"; /** The distance of the dropdown from the input. */ distance: number; /** The offset of the dropdown along the input. */ offset: number; /** The form to associate with. */ form: string; disconnectedCallback(): void; firstUpdated(): void; updated(changedProperties: PropertyValues): void; formResetCallback(): void; /** Gets all elements that aren't disabled (by default). */ private getItems; private updateItems; private syncSelectedItems; private findMatchingItem; private filterItems; private setActiveItem; private navigateItems; private clearInvalidInput; private selectItem; private deselectItem; private removeTag; private clearAnnouncementTimers; private announceChange; private announceOption; private announceFilterResults; private showDropdown; private hideDropdown; private positionDropdown; private isBlank; private updateFormValue; private updateValidity; private updateInputWidth; private handleInput; private handleFocus; private handleInputClick; private handleBlur; private handleKeyDown; private handleDocumentClick; private handleDocumentKeyDown; private handleVisualBoxClick; private handleClear; private handleSlotChange; private handleItemClick; private handleItemPointerMove; /** * A custom function for rendering tag content. By default, this function returns the item's full `textContent`. You * can override it to customize the content that gets rendered in tags in `multiple` mode. */ getTagContent(item: SigveloComboboxItem): TemplateResult; /** Sets focus to the combobox. */ focus(): void; /** Removes focus from the combobox. */ blur(): void; render(): TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-combobox": SigveloCombobox; } } //#endregion //#region src/components/combobox-item/combobox-item.d.ts /** * * * @summary An item that can be selected from a combobox control. * @tag sigvelo-combobox-item * @documentation https://design-system.sigvelo.com/docs/components/combobox-item * @status stable * @since 1.0 * * @dependency sigvelo-icon * * @slot - The item's label. * @slot icon - An optional icon to display at the start of the item. * @slot details - Optional details to display at the end of the item. * * @csspart icon - The container that wraps the icon slot. * @csspart label - The container that wraps the item's label. * @csspart details - The container that wraps the details slot. * @csspart checkmark - The checkmark icon shown when selected in multiple mode. * * @cssstate selected - Applied when the item is selected. * @cssstate disabled - Applied when the item is disabled. * @cssstate active - Applied when the item is active (keyboard navigation). * * @example Default * This component must only be used within a combobox. You can see some examples of combobox items being used in the combobox documentation. */ declare class SigveloComboboxItem extends SigveloElement { static observeSlots: boolean; static styles: CSSResultGroup; defaultSlot: HTMLSlotElement; /** The value to submit when this item is selected. If not provided, the text content is used. */ value: string; /** Disables the item. */ disabled: boolean; /** @internal Whether the item is currently selected. */ selected: boolean; /** @internal Whether the item is currently active (keyboard navigation). */ active: boolean; /** @internal Reference to the parent combobox */ combobox: SigveloCombobox | null; connectedCallback(): void; /** Gets the text content from the combobox item's label. */ getLabelText(): string; updated(changedProperties: PropertyValues): void; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-combobox-item": SigveloComboboxItem; } } //#endregion export { SigveloCombobox as n, SigveloComboboxItem as t };