import { EventName } from '@lit/react'; import { default as Component } from '../../components/select/select.component.js'; import { DdsChangeEvent, DdsBlurEvent, DdsFocusEvent, DdsOpenedEvent, DdsClosedEvent } from '../../events/events'; export type { DdsChangeEvent } from '../../events/events'; export type { DdsBlurEvent } from '../../events/events'; export type { DdsFocusEvent } from '../../events/events'; export type { DdsOpenedEvent } from '../../events/events'; export type { DdsClosedEvent } from '../../events/events'; /** * `dap-ds-select` * @summary A select is a form element that allows the user to select one option from a set. * @element dap-ds-select * @title - Select * * @event {{ value: string }} dds-change - Fired when the select value changes. * @event {{ void }} dds-blur - Emitted when the select loses focus. * @event {{ void }} dds-focus - Emitted when the select gains focus. * @event {{ void }} dds-opened - Emitted when the select dropdown is opened. * @event {{ void }} dds-closed - Emitted when the select dropdown is closed. * * @property {string} value - The value of the select. * @property {string} label - The label of the select. * @property {string} description - The description of the select. * @property {string} tooltip - The tooltip of the select. * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the select. * @property {'xs' | 'sm' | 'lg'} size - The size of the select. Default is `sm`. * @property {boolean} disabled - Whether the select is disabled. * @property {boolean} required - Whether the select is required. * @property {boolean} readonly - Whether the select is readonly. * @property {boolean} autofocus - Whether the select is autofocus. * @property {string} feedback - The feedback of the select. * @property {negative | positive | warning} feedbackType - The feedback type of the select. Can be `negative`, `positive`, or `warning`. * @property {string} status - The status of the select. Can be `success` or `error`. * @property {boolean} optional - The optional state of the select. * @property {string} optionalLabel - The optional label of the select. * @property {boolean} subtle - The weight of the label. Default is `false` * * @csspart base - The main select container. * @csspart trigger - The trigger button of the select. * @csspart label - The label of the select. * @csspart description - The description of the select. * @csspart feedback - The feedback of the select. * @csspart tooltip - The tooltip of the select. * @csspart popup-base - The base of the popup. * @csspart option-list - The option list of the select. * @csspart option-item - The option item of the select. * @csspart option-item-base - The base of the option item. * @csspart option-item-label - The label of the option item. * @csspart option-item-prefix - The prefix of the option item. * @csspart option-item-suffix - The suffix of the option item. * @csspart indicator-icon - The indicator icon of the select. * @csspart mobile-tray - The mobile tray of the select. * @csspart mobile-content - The mobile content of the select. * @csspart mobile-body - The mobile body of the select. * @csspart mobile-header - The mobile header of the select. * @csspart mobile-footer - The mobile footer of the select. * * @cssproperty --dds-select-min-height - Minimum height of the select component (default: var(--dds-spacing-1000)) * @cssproperty --dds-select-padding - Padding of the select component (default: var(--dds-spacing-300)) * @cssproperty --dds-select-column-gap - Column gap of the select component (default: var(--dds-spacing-100)) * @cssproperty --dds-select-border-color - Border color of the select component (default: var(--dds-border-neutral-base)) * @cssproperty --dds-select-border-radius - Border radius of the select component (default: var(--dds-radius-base)) * @cssproperty --dds-select-bg-color - Background color of the select component (default: var(--dds-background-neutral-subtle)) * @cssproperty --dds-select-text-color - Text color of the select component (default: var(--dds-text-neutral-base)) * @cssproperty --dds-select-icon-right - Right position of the icon (default: var(--dds-spacing-200)) * @cssproperty --dds-select-icon-color - Color of the icon (default: var(--dds-icon-neutral-subtle)) * @cssproperty --dds-select-text-margin-right - Right margin of the text (default: var(--dds-spacing-600)) * @cssproperty --dds-select-disabled-border-color - Border color when disabled (default: var(--dds-background-neutral-stronger)) * @cssproperty --dds-select-disabled-bg-color - Background color when disabled (default: var(--dds-background-neutral-stronger)) * @cssproperty --dds-select-disabled-text-color - Text color when disabled (default: var(--dds-text-neutral-disabled)) * @cssproperty --dds-select-error-border-color - Border color in error state (default: var(--dds-border-negative-base)) * @cssproperty --dds-select-success-border-color - Border color in success state (default: var(--dds-border-positive-base)) * @cssproperty --dds-select-xs-min-height - Minimum height for extra small size (default: var(--dds-spacing-800)) * @cssproperty --dds-select-xs-padding - Padding for extra small size (default: var(--dds-spacing-200)) * @cssproperty --dds-select-xs-font-size - Font size for extra small size (default: var(--dds-font-sm)) * @cssproperty --dds-select-lg-min-height - Minimum height for large size (default: var(--dds-spacing-1200)) * @cssproperty --dds-select-lg-padding - Padding for large size (default: var(--dds-spacing-400)) * @cssproperty --dds-select-lg-font-size - Font size for large size (default: var(--dds-font-lg)) * @cssproperty --dds-select-lg-icon-right - Right position of the icon for large size (default: var(--dds-spacing-300)) * @cssproperty --dds-select-lg-icon-color - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle)) * @cssproperty --dds-select-popup-bg-color - Background color of the popup (default: var(--dds-background-neutral-subtle)) * @cssproperty --dds-select-icon-opened-transform - Transform of the icon when the select is opened (default: rotate(90deg)) * * @slot - The option list of the select. * @slot indicator-icon - The indicator icon of the select. */ declare const reactWrapper: import('@lit/react').ReactWebComponent; onDdsBlur: EventName; onDdsFocus: EventName; onDdsOpened: EventName; onDdsClosed: EventName; }>; export default reactWrapper;