import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/select/select.d.ts /** * * * @summary Allows users to choose an option from a predefined list of options. * @tag sigvelo-select * @documentation https://design-system.sigvelo.com/docs/components/select * @status stable * @since 1.0 * * @dependency sigvelo-icon * * @slot label - The select's label. For plain-text labels, you can use the `label` attribute instead. * @slot description - The select's description. For plain-text descriptions, you can use the `description` attribute * instead. * @slot start - An icon or similar element to place before the label. Works great with ``. * @slot end - An icon or similar element to place after the label. Works great with ``. * * @event sigvelo-blur - Emitted when the select loses focus. This event does not bubble. * @event sigvelo-change - Emitted when the user commits changes to the select's value. * @event sigvelo-focus - Emitted when the select receives focus. This event does not bubble. * @event sigvelo-input - Emitted when the select receives input. * * @csspart label - The element that contains the select's label. * @csspart description - The element that contains the select's description. * @csspart visual-box - The element that wraps the internal text box. * @csspart text-box - The internal text box, a `` element. You can add ``, and `

` elements to it to group and provide options, which are then copied into the component's shadow root. * * ```html * * * * * * * * * * * * * ``` * * @example Labels and descriptions * You can use the `label` and `description` attributes to provide plain text labels and descriptions for the select. If you want to provide HTML, use the `label` and `description` slots instead. * * ```html * * * For more information, visit our website. * * * * * * * * ``` * * @example Providing an initial value * Use the `value` attribute to provide an initial value for the select. * * ```html * * * * * * * * ``` * * **Note:** This behavior is different from native selects that use the option's `selected` attribute to set the value. With ``, always use the `value` attribute to set the value. * * @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 `
* * * * * * * * * * ``` * * @example Filled and unstyled selects * Set the `variant` attribute to `normal`, `filled`, or `unstyled` to change the select's variant. * * ```html * * * * *
* * * * * *
* * * * * * * ``` * * @example Pill-shaped selects * Selects can be rendered with pill-shaped edges by adding the `pill` attribute. * * ```html * * * * * * ``` * * @example Changing the size * Use the `size` attribute to change the select's size. * * ```html * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * * * ``` * * @example Adding option groups * Use `` elements to add option groups. Set the `label` attribute to an appropriate label. * * ```html * * * * * * * * * * * * * ``` * * @example Adding dividers * Use `

` to add dividers between options. * * ```html * * * * * *

* * * ``` * * @example Disabling options * Use the `disabled` attribute to disable individual options. * * ```html * * * * * * * ``` * * @example Disabling option groups * Use the `disabled` attribute to disable an option group. * * ```html * * * * * * * * * * * * * ``` * * **Warning:** Disabled option groups [don't currently work](https://bugs.webkit.org/show_bug.cgi?id=227042) in iOS Safari. * * @example Disabling selects * Use the `disabled` attribute to disable the select. * * ```html * * * * * * * ``` * * @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 select. You can control the width of the label by setting the `--label-width` custom property. * * ```html * * * * * * * *
* * * * * * ``` * * @example Validation * The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission until an option with a non-empty value is selected. * * * ```html * * ``` * * @example Using custom validation * Use the `setCustomValidity()` method to make the select invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string. * * ```html * * * * ``` * * @example Styling validation * You can style valid and invalid selects using the `:valid` and `:invalid` pseudo classes. * * ```html * * * * ``` * * However, these selectors will match even before the user has had a chance to fill out 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 SigveloSelect extends SigveloFormControlElement { static formAssociated: boolean; static observeSlots: boolean; static styles: CSSResultGroup; protected get focusableAnchor(): HTMLSelectElement; private defaultSlot; private textBox; isInvalid: boolean; hadUserInteraction: boolean; wasSubmitted: boolean; options: string; /** * The select's label. If you need to provide HTML in the label, use the `label` slot instead. */ label: string; /** * The select's description. If you need to provide HTML in the description, use the `description` slot instead. */ description: string; /** The name of the select. This will be submitted with the form as a name/value pair. */ name: string; /** The select's value. */ value: string; /** Disables the select. */ disabled: boolean; /** Makes the select a read-only field. */ readonly: boolean; /** The type of select to render. */ variant: "normal" | "filled" | "unstyled"; /** The select's size. */ size: "xs" | "sm" | "md" | "lg" | "xl"; /** Draws the select in a pill shape. */ pill: boolean; /** * The form to associate this control with. If omitted, the closest containing `

` will be used. The value of * this attribute must be an ID of a form in the same document or shadow root. */ form: string; /** * Makes the select required. Form submission will not be allowed when this is set and the select is blank. */ required: boolean; /** * Tells the browser how to autocomplete the select. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) * for available values. */ autocomplete: string; /** Sets the enter key label on virtual keyboards. */ enterkeyhint: "enter" | "done" | "go" | "next" | "previous" | "search" | "send"; firstUpdated(): void; updated(changedProperties: PropertyValues): void; /** @internal Called when the form is reset. */ formResetCallback(): void; private handleBlur; private handleVisualBoxPointerDown; private handleChange; private handleFocus; private handleInput; private syncOptions; /** Sets the form control's validity */ private updateValidity; /** Sets focus to the select. */ focus(): void; /** Removes focus from the select. */ blur(): void; /** Shows the picker in supportive browsers. */ showPicker(): void; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-select": SigveloSelect; } } //#endregion export { SigveloSelect as t };