import { SelectorItemElement } from '../../Selectors/Abstracts/Selector/SelectorItemElement'; import type { ISelectItemElementProps } from './ISelectItemElementProps'; import { SelectElement } from './SelectElement'; declare const SelectItemElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Rippleable").IRippleableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Valueable").IValueableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Focusable").IFocusableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Labelable").ILabelableProps) & (abstract new () => SelectorItemElement>) & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Select Item - An individual selectable option within dropdown select menus. * * @description * The Select Item component represents a single option within a select dropdown menu. * It provides comprehensive interaction states including focus, hover, selection, and * activation with visual feedback through ripple effects and focus rings. The component * supports icons, custom labels, and slot-based content organization with start, icon, * label, and end slots. When selected, a checkmark indicator appears to provide clear * visual confirmation. The component automatically manages ARIA attributes for * accessibility and integrates with the parent Select element through portal projection. * It displays either the label attribute or falls back to text content for flexibility. * * @name Select Item * @element mosaik-select-item * @category Selectors * * @slot start - Content placed before the icon (e.g., status indicators, badges) * @slot icon - The icon display area alongside the label * @slot label - The primary text label for the option * @slot end - Content placed after the label (e.g., shortcuts, metadata) * * @csspart focusRing - The keyboard focus indicator ring * @csspart ripple - The touch feedback ripple effect container * @csspart checkmark - The selection indicator checkmark * * @cssprop {String} --select-item-background-color - The background color of the option * @cssprop {String} --select-item-foreground-color - The text and icon color * @cssprop {String} --select-item-border-color - The border color * @cssprop {String} --select-item-border-width - The border thickness * @cssprop {String} --select-item-border-style - The border line style * @cssprop {String} --select-item-border-radius - The corner rounding radius * @cssprop {String} --select-item-font-family - The font family for option text * @cssprop {String} --select-item-font-size - The font size for option text * @cssprop {String} --select-item-font-weight - The font weight for option text * @cssprop {String} --select-item-padding-top - The top padding inside the option * @cssprop {String} --select-item-padding-right - The right padding inside the option * @cssprop {String} --select-item-padding-bottom - The bottom padding inside the option * @cssprop {String} --select-item-padding-left - The left padding inside the option * @cssprop {String} --select-item-gap - The spacing between icon and label elements * @cssprop {String} --select-item-shadow - The drop shadow or elevation effect * @cssprop {String} --select-item-transition-duration - The duration of hover/focus transitions * @cssprop {String} --select-item-transition-mode - The timing function for transitions * @cssprop {String} --select-item-transition-property - The CSS properties to transition * @cssprop {String} --select-item-focus-ring-color - The focus ring color (from focusRing mixin) * @cssprop {String} --select-item-focus-ring-inward-offset - The focus ring inward offset (from focusRing mixin) * @cssprop {String} --select-item-focus-ring-outward-offset - The focus ring outward offset (from focusRing mixin) * @cssprop {String} --select-item-focus-ring-active-width - The focus ring width when active (from focusRing mixin) * @cssprop {String} --select-item-ripple-color - The ripple effect color (from ripple mixin) * @cssprop {String} --select-item-ripple-duration - The ripple animation duration (from ripple mixin) * * @dependency {TextElement} - Text rendering component for option labels * @dependency {FocusRingElement} - Keyboard focus indicator component * @dependency {RippleElement} - Touch feedback effect component * @dependency {IconElement} - Icon display component for option graphics * * @example * Basic select item: * ```html * * ``` * * @example * Selected item with variant: * ```html * * ``` * * @example * Item with custom content slots: * ```html * * Advanced Features * ⌘A * * ``` * * @public */ export declare class SelectItemElement extends SelectItemElement_base implements ISelectItemElementProps { private _icon; private _isActive; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @override * @readonly */ static get is(): string; /** * Gets or sets the `icon` property. * * @public */ get icon(): string; set icon(value: string); /** * Gets or sets the `isActive` property. * * @public * @attr */ get isActive(): boolean; set isActive(value: boolean); /** * Gets the `displayText` property. * Falls back to text content if label is empty. * * @public * @readonly * @hidden */ get displayText(): string; /** * Get the item parent. * * @protected * @readonly */ protected get parent(): SelectElement; /** * @protected */ protected onSelectedPropertyChange(): void; /** * @protected */ protected onIsActivePropertyChange(): void; } /** * @public */ export declare namespace SelectItemElement { type Props = ISelectItemElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-select-item': SelectItemElement; } } export {}; //# sourceMappingURL=SelectItemElement.d.ts.map