import React from 'react'; import * as lit_html from 'lit-html'; import * as lit from 'lit'; import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit'; declare class Tailwind$1 extends LitElement { static styles: lit.CSSResult[]; constructor(); emit(name: string, options?: CustomEventInit): CustomEvent; } declare const Sizes: { readonly xs: "xs"; readonly sm: "sm"; readonly md: "md"; readonly lg: "lg"; readonly xl: "xl"; }; type Size = typeof Sizes[keyof typeof Sizes]; /** * @tag plus-avatar * @since 0.0.0 * @status experimental * * PlusAvatar component provides a visual representation for users or entities. * Supports images, text initials, icons and various visual styles. * * @slot - The default slot for avatar content * @slot fallback - Optional slot for custom fallback content * * @csspart base - The component's base wrapper * * @cssproperty --text-color - Controls the text color of the avatar * @cssproperty --bg-default - Controls the default background color */ declare class PlusAvatar$1 extends Tailwind$1 { static styles: lit.CSSResult[]; /** * URL of the avatar image */ image?: string; /** * Alternative text for the avatar */ alt?: string; /** * Shape of the avatar * - circle: Circular shape * - square: Square shape with slight rounding * @default 'circle' */ shape: 'circle' | 'square'; /** * Size of the avatar * Can be a predefined size (xs, sm, md, lg, xl) or custom value * @default 'md' */ size: Size | string; /** * Icon name to use when no image is available * @default 'user' */ icon: string; /** * Toggles inverted color scheme * @default false */ invert: boolean; /** * Text to display as initials when no image is available */ text?: string; /** * Strategy to use when image fails to load * - icon: Shows an icon * - text: Shows text initials * - custom: Uses fallback slot content * @default 'icon' */ fallbackStrategy: 'icon' | 'text' | 'custom'; private isFallback; private get hasValidImage(); private get hasValidText(); private getInitials; private handleError; private handleLoad; private renderImage; private renderFallback; private renderContent; render(): lit_html.TemplateResult<1>; } declare class PlusButton$1 extends Tailwind$1 { static styles: lit.CSSResult[]; /** * Determines the visual style of the button * - filled: Solid background color * - outlined: Transparent background with border * - dashed: Transparent background with dashed border * - text: Text only without background or border * @default 'filled' */ kind: 'filled' | 'outlined' | 'dashed' | 'text'; /** * Sets the status/color variant of the button * - default: Neutral color scheme * - primary: Brand color scheme * - success: Green color scheme * - warning: Yellow color scheme * - danger: Red color scheme * - info: Blue color scheme * @default 'default' */ status: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'; /** * Sets the size of the button * - sm: Small size * - md: Medium size * - lg: Large size * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * Disables the button interaction * @default false */ disabled: boolean; /** * Shows loading spinner and disables interaction * @default false */ loading: boolean; fullWidth: boolean; /** * When provided, renders as an anchor link instead of a button * @default undefined */ href?: string; /** * Specifies where to display the linked URL * Common values: _blank, _self, _parent, _top * @default undefined */ target?: string; /** * Specifies the relationship between the current document and the linked document * Common values: nofollow, noopener, noreferrer * @default undefined */ rel?: string; /** * Sets the link to download the target URL instead of navigating * Optional value specifies the suggested filename * @default undefined */ download?: string; /** * When true, link opens in new tab with secure attributes * Automatically sets target="_blank" and rel="noopener noreferrer" * @default false */ external: boolean; /** * Specifies the button type for form interactions * Only applies when rendering as a button (no href) * @default 'button' */ type: 'button' | 'submit' | 'reset'; private handleClick; private handleFocus; private handleBlur; render(): lit_html.TemplateResult<1>; } /** * Orientation type for button group */ type Orientation = 'horizontal' | 'vertical'; /** * @tag plus-button-group * @summary Button group component that groups related buttons together. * * @slot - The default slot for the buttons * * @cssproperty --button-group-gap - Gap between buttons in the group * * @example * ```html * * First * Second * Third * * ``` */ declare class PlusButtonGroup$1 extends Tailwind$1 { /** * The orientation of the button group. */ orientation: Orientation; /** * Determines whether the button group's properties override the properties of its child buttons. * When true, all buttons in the group will have the same appearance. * When false, each button can have its own properties. * @default false */ override: boolean; /** * Determines the visual style of the button * - filled: Solid background color * - outlined: Transparent background with border * - dashed: Transparent background with dashed border * - text: Text only without background or border * @default 'filled' */ kind: 'filled' | 'outlined' | 'dashed' | 'text'; /** * Sets the status/color variant of the button * - default: Neutral color scheme * - primary: Brand color scheme * - success: Green color scheme * - warning: Yellow color scheme * - danger: Red color scheme * - info: Blue color scheme * @default 'default' */ status: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'; /** * Sets the size of the button * - sm: Small size * - md: Medium size * - lg: Large size * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * Disables the button interaction * @default false */ disabled: boolean; /** * Shows loading spinner and disables interaction * @default false */ loading: boolean; private _buttons; static styles: lit.CSSResult[]; /** * Gets all child buttons in the group */ private get buttons(); /** * Apply shared properties to buttons in the group. * This method either overrides the properties of child buttons or respects their individual properties * based on the override prop. */ private applyPropertiesToButtons; /** * Apply styles to buttons based on their position in the group */ private applyStylesToButtons; /** * Updates the properties and styles of all buttons in the group */ private updateButtons; /** * Handle slot changes: update button list and styles */ private handleSlotChange; updated(changedProperties: Map): void; connectedCallback(): void; render(): lit_html.TemplateResult<1>; } declare class PlusBadge$1 extends Tailwind$1 { static styles: lit.CSSResult[]; /** * Sets the status/color variant of the badge * - default: Neutral color scheme * - primary: Brand color scheme * - success: Green color scheme * - warning: Yellow color scheme * - danger: Red color scheme * - info: Blue color scheme * @default 'default' */ status: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'; /** * Sets the size of the badge * - sm: Small size * - md: Medium size * - lg: Large size * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * Sets the position of the badge relative to its content * - top-right: Top right corner * - top-left: Top left corner * - bottom-right: Bottom right corner * - bottom-left: Bottom left corner * - '': No specific position * @default 'top-right' */ orientation: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | ''; /** * Sets the offset of the badge from its default position * Format: "x,y" where x and y can be any valid CSS length value * Example: "10px,5px" or "-5px,-10px" */ offset: [string, string]; /** * Sets the content of the badge * If not provided, the badge will be displayed as a dot */ content?: string; hasSlot: boolean; private handleSlotChange; render(): lit_html.TemplateResult<1>; } /** * A versatile tag component for displaying status, labels, and categories * * @tag plus-tag * * @csspart tag - The container element for the tag * * @cssproperty [--tag-bg-color] - Background color for default state (inherits from --plus-color-background-neutral-default) * @cssproperty [--tag-text-color] - Text color for default state (inherits from --plus-color-text-default) * * @property {('success'|'warning'|'error'|'info'|'default')} status - Defines the tag's visual state and color scheme * @property {('sm'|'md'|'lg')} size - Controls the tag's size variant * @property {boolean} invert - Toggles between light/dark color themes * @property {('full'|'medium'|'none')} radius - Sets the border radius style * * @attribute {string} aria-label - Accessible label for the tag (falls back to text content) * @attribute {string} role - ARIA role (defaults to "status") * * @example * ```html * * Default Tag * * * Success * Warning * Error * * * Small * Medium * Large * * * Pill Shape * Rounded * Square * * * Dark Theme * ``` * * @cssExample * ```css * plus-tag { * --tag-bg-color: #f0f0f0; * --tag-text-color: #333333; * } * ``` */ declare class PlusTag$1 extends Tailwind$1 { static styles: lit.CSSResult[]; /** * Sets the status/color variant of the tag * - default: Neutral color scheme * - primary: Brand color scheme * - success: Green color scheme * - warning: Yellow color scheme * - danger: Red color scheme * - info: Blue color scheme * @default 'default' */ status: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'; /** * Sets the size of the tag * - sm: Small size * - md: Medium size * - lg: Large size * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** Inverts the color scheme of the tag. */ invert: boolean; /** * Sets the border radius style * - full: Pill shape * - medium: Rounded corners * - none: Square corners * @default 'full' */ radius: 'full' | 'medium' | 'none'; constructor(); get ariaLabel(): string; render(): lit_html.TemplateResult<1>; } type IconStyle = 'solid' | 'regular' | 'light'; type IconName = string; /** * @tag plus-icon * @since 0.0.0 * @status stable * * PlusIcon component provides a consistent way to render SVG icons across the system. * Supports size variants, style variants (solid, regular, light), and CDN fallback. * * @csspart base - The component's base wrapper * @csspart icon - The SVG icon element * * @cssproperty --icon-size - Custom icon size (overrides size variants) * @cssproperty --icon-color - Custom icon color (overrides currentColor) * * @example * ```html * * * * * * * * * * * * ``` */ declare class PlusIcon$1 extends LitElement { static styles: lit.CSSResult; /** * Name of the icon to display */ iconName: IconName; /** * Style variant of the icon: solid, regular, or light * @default 'solid' */ iconStyle: IconStyle; /** * Size variant for the icon * @default 'md' */ size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'; /** * Label for accessibility - will be used as aria-label */ label?: string; private svgContent; private isLoading; private hasError; protected updated(changedProperties: Map): void; private loadIcon; render(): lit_html.TemplateResult<1> | typeof nothing; } /** * @tag plus-chip * @since 0.0.0 * @status experimental * * PlusChip component provides a compact element for displaying information, tags, or actions. * Supports various visual styles, sizes, and states. * * @slot - The default slot for chip content * * @csspart base - The component's base wrapper * @csspart icon - The dismiss icon wrapper * * @cssproperty --text-color - Controls the text color of the chip * @cssproperty --border-color - Controls the border color of the chip * @cssproperty --bg-default - Controls the default background color * @cssproperty --bg-hovered - Controls the background color when hovered * @cssproperty --bg-pressed - Controls the background color when pressed * @cssproperty --bg-focused - Controls the background color when focused */ declare class PlusChip$1 extends Tailwind$1 { /** * Determines the visual style of the chip * - filled: Solid background color * - outlined: Transparent background with border * @default 'filled' */ kind: 'filled' | 'outlined'; /** * Sets the size of the chip * - sm: Small size * - md: Medium size * - lg: Large size * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * Defines the type of chip * - default: Standard chip * - avatar: Chip with avatar support * @default 'default' */ type: 'default' | 'avatar'; /** * Sets the status/color variant of the chip * - default: Neutral color scheme * - success: Green color scheme * - warning: Yellow color scheme * - danger: Red color scheme * - info: Blue color scheme * @default 'default' */ status: 'default' | 'success' | 'warning' | 'danger' | 'info'; /** * Controls the border radius style * - full: Fully rounded corners * - rounded: Slightly rounded corners * @default 'full' */ shape: 'full' | 'rounded'; /** * Toggles inverted color scheme * @default false */ invert: boolean; /** * Shows/hides the dismiss button * @default false */ dismiss: boolean; /** * Disables the chip interaction * @default false */ disabled: boolean; /** * Handles the dismiss event * @private */ private onDismiss; render(): lit_html.TemplateResult<1>; } /** * @tag plus-link * @since 0.0.0 * @status experimental * * PlusLink component provides a customizable link element for navigation and actions. * * @slot - The default slot for link content * @slot prefix - Slot for content to be placed before the link content * @slot suffix - Slot for content to be placed after the link content * * @csspart base - The component's base wrapper */ declare class PlusLink$1 extends Tailwind$1 { static styles: lit.CSSResult[]; /** * Controls the size of the link * - sm: Small size with smaller text and spacing * - md: Medium size with default text and spacing * - lg: Large size with larger text and spacing * - inherit: Inherits size from parent element * @default 'inherit' */ size: 'sm' | 'md' | 'lg' | 'inherit'; /** * When true, the link becomes non-interactive and shows disabled styling * @default false */ disabled: boolean; /** * When true, the link becomes non-interactive but maintains normal styling * @default false */ readonly: boolean; /** * The URL that the hyperlink points to * @default '' */ href?: string; /** * Specifies where to display the linked URL * Common values: _blank, _self, _parent, _top * @default '' */ target?: string; /** * Specifies the relationship between the current document and the linked document * Common values: nofollow, noopener, noreferrer * @default '' */ rel?: string; /** * Sets the link to download the target URL instead of navigating * Optional value specifies the suggested filename * @default '' */ download?: string; /** * When true, displays loading state and disables interaction * @default false */ loading: boolean; /** * When true, link opens in new tab with secure attributes * Automatically sets target="_blank" and rel="noopener noreferrer" * @default false */ external: boolean; /** * Controls the underline style of the link * values: * - always: always underlined * - hover: underlined on hover * - never: never underlined * @default 'hover' */ underline?: 'always' | 'hover' | 'never'; private handleClick; private handleFocus; private handleBlur; render(): lit_html.TemplateResult<1>; } /** * @tag plus-alert * @summary Alert component that displays important messages to users. * * @slot message - The main message content * @slot description - Additional descriptive content * @slot prefix - Custom status icon * @slot dismiss - Custom dismiss button * * @csspart base - The main container element * @csspart status-icon - The status icon container * @csspart content - The content container * @csspart message - The message container * @csspart description - The description container * @csspart dismiss - The dismiss button container * * @event plus-dismiss - Emitted when the alert is dismissed * * @example * ```html * *
Success!
*
Your changes have been saved.
* * ``` */ declare class PlusAlert$1 extends Tailwind$1 { /** * Determines the visual style of the alert * - filled: Solid background color * - outlined: Transparent background with border * - dashed: Transparent background with dashed border * @default 'filled' * @type {'filled' | 'outlined' | 'dashed'} */ kind: 'filled' | 'outlined' | 'dashed'; /** * The size of the alert * * @type {'sm' | 'md' | 'lg'} * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * Sets the status/color variant of the alert * - default: Neutral color scheme * - primary: Brand color scheme * - success: Green color scheme * - warning: Yellow color scheme * - danger: Red color scheme * - info: Blue color scheme * @default 'default' */ status: 'default' | 'success' | 'warning' | 'danger' | 'info'; /** * When true, the alert will be displayed with an inverted color scheme * @default false * @type {boolean} */ invert: boolean; /** * When true, the alert will be displayed with a dismissible close button * @default true * @type {boolean} */ dismissible: boolean; /** * The message of the alert * @default '' * @type {string} * @slot message */ message: string; /** * The description of the alert * @default '' * @type {string} * @slot description */ description: string; /** * The status icon of the alert * @default '' * @type {string} * @slot prefix */ statusIcon?: string; /** * The dismiss icon of the alert * @default '' * @type {string} * @slot dismiss */ dismissIcon?: string; /** * When true, the alert will be displayed with a full width * @default false * @type {boolean} */ fullWidth: boolean; /** * When true, the alert will be hidden * @default false * @type {boolean} */ hiddenAlert: boolean; /** * Handles the dismiss action of the alert * @private */ private handleDismiss; render(): lit_html.TemplateResult<1>; static styles: lit.CSSResult[]; } /** * @tag plus-radio * @summary Radio button component that allows single selection from a group of options. * * @slot - The radio button label content * * @csspart radio - The component's radio input element * * @event plus-change - Emitted when the radio button's checked state changes * * @example * ```html * Male * Female * ``` */ declare class PlusRadio$1 extends Tailwind$1 { input: HTMLInputElement; /** * Sets the size of the radio button * - sm: Small size * - md: Medium size * - lg: Large size * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * Defines the text label for the radio button * @default undefined */ text?: string; /** Whether the radio is checked. */ checked: boolean; /** Whether the radio is in an error state. */ error: boolean; /** Whether the radio is disabled. */ disabled: boolean; /** Whether the radio is readonly. */ readonly: boolean; /** The radio's name attribute. */ name: string; /** Whether the radio is required. */ required: boolean; /** The radio's value attribute. */ value: string; /** * Internal state to track if the radio button has focus * @default false */ hasFocus: boolean; /** * Handles the change event when the radio button is toggled */ handleChange(): void; /** * Handles the focus event when the radio button gains focus */ private handleFocus; /** * Handles the blur event when the radio button loses focus */ private handleBlur; render(): lit_html.TemplateResult<1>; } /** * @tag plus-segmented-picker-item * @summary An item component for the segmented picker. * * @slot - The content of the item. * * @csspart label - The label element. * @csspart input - The input element. * @cssproperty --active-color - Color of the active indicator */ declare class PlusSegmentedPickerItem$1 extends Tailwind$1 { /** The value associated with the item. */ checked: boolean; /** * The status of the item. * @type {'default' | 'primary'} * @default 'default' */ status: 'default' | 'primary'; /** Disables the item, making it non-interactive. */ disabled: boolean; /** * The shape of the item. * @type {'square' | 'circle'} * @default 'square' */ shape: 'square' | 'circle'; /** * The size of the item. * @type {'sm' | 'md' | 'lg'} * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * The name of the group this item belongs to. * @type {string} * @default '' */ groupName: string; /** * The value of the item. * @type {string} * @default '' */ value: string; internalId: string; private handleClick; updated(changedProps: Map): void; render(): lit_html.TemplateResult<1>; } /** * @tag plus-segmented-picker * @summary A segmented picker component that allows users to select one option from a group of options. * * @slot - The content of the segmented picker, should be plus-segmented-picker-item elements. * * @csspart host - The host element. * @csspart animation-overlay - The animation overlay element. * * @event plus-segmented-picker-item-changed - Emitted when an item is selected. * @eventDetail {item: PlusSegmentedPickerItem, value: string} - The selected item and its value. */ declare class PlusSegmentedPicker$1 extends Tailwind$1 { slots: PlusSegmentedPickerItem$1[]; /** * The status of the segmented picker. * @type {'default' | 'primary'} * @default 'default' */ status: 'default' | 'primary'; /** * The shape of the segmented picker. * @type {'square' | 'circle'} * @default 'square' */ shape: 'square' | 'circle'; /** * The size of the segmented picker. * @type {'sm' | 'md' | 'lg'} * @default 'md' */ size: 'sm' | 'md' | 'lg'; private readonly groupName; private isFirstRender; firstUpdated(changedProperties: Map): void; updated(changedProperties: Map): void; private handleSlotChange; private updateOverlay; render(): lit_html.TemplateResult<1>; } declare class PlusRadioGroup$1 extends Tailwind$1 { static formAssociated: boolean; name: string; value: string; /** Disables all radio buttons in the group. */ disabled: boolean; /** Makes the radio group required for form submission. */ required: boolean; /** * The size of all radio buttons in the group * - sm: Small size * - md: Medium size * - lg: Large size * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** Displays the radio buttons in an error state. */ error: boolean; /** * Orientation of the radio buttons * - horizontal: Radio buttons are arranged side by side * - vertical: Radio buttons are stacked vertically */ orientation: 'horizontal' | 'vertical'; private internals; constructor(); private updateRadios; private handlePlusChange; updated(changedProperties: Map): void; firstUpdated(): void; connectedCallback(): void; disconnectedCallback(): void; render(): lit_html.TemplateResult<1>; } type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'; type ModalPlacement = 'center' | 'top'; /** * @tag plus-modal * @summary Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management. * * @slot - Main content area (same as body slot) * @slot header - The header content of the modal * @slot body - The main content of the modal (alternative to default slot) * @slot footer - The footer content of the modal * @slot close - Custom close button (defaults to an X icon) * * @csspart dialog - The native dialog element * @csspart container - The container wrapper for centering and scrolling * @csspart modal - The main modal box * @csspart header - The header section * @csspart header-content - The content wrapper inside header * @csspart body - The main content area * @csspart footer - The footer section * @csspart close-button - The close button element * * @event plus-modal-open - Emitted after the modal has opened * @event plus-modal-close - Emitted after the modal has closed * @event plus-modal-before-open - Emitted before the modal opens (cancelable) * @event plus-modal-before-close - Emitted before the modal closes (cancelable) * * @example * ```html * * *
Modal Title
*
Modal Content
*
* *
* * * * *
Full Screen
*

Content here

* * * * *
Can't Close Outside
*

Must use close button

* * ``` */ declare class PlusModal$1 extends Tailwind$1 { private dialogRef?; /** * The size of the modal * @type {'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'} * @default 'md' * @attr size */ size: ModalSize; /** * The placement of the modal on the screen * @type {'center' | 'top'} * @default 'center' * @attr placement */ placement: ModalPlacement; /** * Whether the modal is open * @type {boolean} * @default false * @attr is-open */ isOpen: boolean; /** * Whether the modal should take full width * @type {boolean} * @default false * @attr full-width */ fullWidth: boolean; /** * Makes the modal take the full screen (100vw x 100vh, no border radius) * @type {boolean} * @default false * @attr full-screen */ fullScreen: boolean; /** * Controls backdrop behavior * - true: Shows backdrop, modal can be closed by clicking outside * - false: No backdrop * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation) * @type {boolean | 'static'} * @default true * @attr backdrop */ backdrop: boolean | 'static'; /** * Whether the modal should close when clicking the backdrop * @type {boolean} * @default true * @attr close-on-backdrop */ closeOnBackdrop: boolean; /** * Whether the modal should close when pressing the Escape key * @type {boolean} * @default true * @attr close-on-esc */ closeOnEsc: boolean; /** * Hides the header section completely * @type {boolean} * @default false * @attr no-header */ noHeader: boolean; /** * Hides the footer section completely * @type {boolean} * @default false * @attr no-footer */ noFooter: boolean; /** * The duration of the animation in milliseconds * @type {number} * @default 300 * @attr animation-duration */ animationDuration: number; private isAnimating; private shake; connectedCallback(): void; disconnectedCallback(): void; firstUpdated(): void; updated(changedProperties: Map): void; /** * Shows the modal with animation * @returns {Promise} */ show(): Promise; /** * Hides the modal with animation * @returns {Promise} */ hide(): Promise; /** * Toggles the modal open/closed state * @returns {Promise} */ toggle(): Promise; private handleOpenChange; private handleCloseChange; private handleBeforeOpen; private handleBeforeClose; private handleBackdropClick; private handleDialogCancel; private handleKeydown; private handleClick; private shakeModal; private getModalStyle; render(): lit_html.TemplateResult<1>; } /** * @tag plus-drawer * @summary Sliding panel component that appears from the edge of the screen. * * @slot header - The header content of the drawer * @slot body - The main content of the drawer * @slot footer - The footer content of the drawer * @slot close - Custom close button (defaults to an X icon) * * @csspart container - The main container element * @csspart overlay - The overlay element * @csspart drawer - The drawer element * @csspart header - The header element * @csspart body - The body element * @csspart footer - The footer element * @csspart close-button - The close button element * * @example * ```html * *
Drawer Title
*
Drawer Content
*
* *
* * ``` */ declare class PlusDrawer$1 extends Tailwind$1 { /** * The size of the drawer * @type {'sm' | 'md' | 'lg'} * @default 'md' * @attr size */ size: 'sm' | 'md' | 'lg'; /** * Whether the drawer is open * @type {boolean} * @default false * @attr is-open */ isOpen: boolean; /** * The position of the drawer * @type {'left' | 'right' | 'top' | 'bottom'} * @default 'right' * @attr orientation */ orientation: 'left' | 'right' | 'top' | 'bottom'; /** * The duration of the animation in milliseconds * @type {number} * @default 300 * @attr animation-duration */ animationDuration: number; private isAnimating; constructor(); connectedCallback(): void; /** * Hides the drawer with animation * @returns {void} */ hide(): void; private handleBeforeHide; /** * Shows the drawer with animation * @returns {void} */ show(): void; private handleBeforeShow; disconnectedCallback(): void; private handleKeydown; render(): lit_html.TemplateResult<1>; } /** * @tag plus-accordion * @summary Accordion component for displaying collapsible content. * * @slot header - The header content of the accordion * @slot helper - Optional helper text displayed next to the header * @slot panel - The content that is shown when the accordion is expanded * * @csspart header - The header container * @csspart panel - The panel container * @csspart icon - The expand/collapse icon * @csspart helper - The helper text container * * @event plus-accordion-toggle - Emitted when the accordion is toggled * @eventDetail {boolean} expand - Whether the accordion is expanded * * @example * ```html * *
Header
*
Helper text
*
Content
* * ``` */ declare class PlusAccordion$1 extends Tailwind$1 { /** * Whether the accordion is expanded * @type {boolean} * @default false * @attr expand */ expand: boolean; /** * Whether the accordion is part of a group * @type {boolean} * @default false * @attr is-grouped */ isGrouped: boolean; /** * Whether the accordion is the last item in a group * @type {boolean} * @default false * @attr is-last */ isLast: boolean; /** * Whether the accordion is the first item in a group * @type {boolean} * @default false * @attr is-first */ isFirst: boolean; /** * The size of the accordion * @type {'sm' | 'md' | 'lg'} * @default 'md' * @attr size */ size: 'sm' | 'md' | 'lg'; /** * Whether the accordion is disabled * @type {boolean} * @default false * @attr disabled */ disabled: boolean; static styles: lit.CSSResult[]; private toggleOpen; render(): lit_html.TemplateResult<1>; } /** * @tag plus-accordion-group * @summary A container for grouping accordion items together. * * @slot default - Accordion items to be grouped * * @csspart container - The container element * * @example * ```html * * *
First Item
*
Content
* * *
Second Item
*
Content
* * * ``` */ declare class PlusAccordionGroup$1 extends Tailwind$1 { accordions: Array; /** * Whether multiple accordions can be expanded at the same time * @type {boolean} * @default false * @attr multi */ multi: boolean; /** * The visual style of the accordion group * @type {'bordered' | 'divided' | 'separated'} * @default 'bordered' * @attr kind */ kind: 'bordered' | 'divided' | 'separated'; /** * The size of the accordions in the group * @type {'sm' | 'md' | 'lg'} * @default 'md' * @attr size */ size: 'sm' | 'md' | 'lg'; private toggleListener; static styles: lit.CSSResult[]; private handleSlotChange; disconnectedCallback(): void; render(): lit_html.TemplateResult<1>; } /** * @tag plus-divider * @since 0.0.0 * @status stable * * PlusDivider component is used to visually separate content in a list or group. * * @slot - The default slot for optional divider content (for text dividers) * * @csspart divider - The component's base wrapper * @csspart label - The text content container * * @cssproperty --divider-color - Controls the color of the divider * @cssproperty --divider-thickness - Controls the thickness of the divider * @cssproperty --divider-spacing - Controls the spacing around the divider */ declare class PlusDivider$1 extends Tailwind$1 { /** * The orientation of the divider. * @default 'horizontal' */ orientation: 'horizontal' | 'vertical'; /** * The Kind of the divider. * @default 'solid' */ kind: 'solid' | 'dashed' | 'dotted'; /** * The position of the text content (only applicable with hasContent=true) * @default 'center' */ contentPosition: 'left' | 'center' | 'right'; /** * The thickness of the divider * @default 'thin' */ thickness: 'thin' | 'medium' | 'thick'; /** * Whether the divider has content or not * @default false */ hasContent: boolean; static styles: lit.CSSResult[]; handleSlotChange(event: Event): void; render(): lit_html.TemplateResult<1>; } declare enum PopoverTrigger { Hover = "hover", Click = "click" } declare enum PopoverPosition { Top = "top", TopStart = "top-start", TopEnd = "top-end", Bottom = "bottom", BottomStart = "bottom-start", BottomEnd = "bottom-end", Left = "left", LeftStart = "left-start", LeftEnd = "left-end", Right = "right", RightStart = "right-start", RightEnd = "right-end" } /** * @tag plus-popover * @summary Popover component that displays content in a floating panel. * * @slot - The target element that triggers the popover * @slot icon - Custom icon for the popover * @slot title - The popover title * @slot actions - Actions like close button * @slot content - The main content inside the popover * * @csspart popover - The popover container element * @csspart arrow - The popover arrow indicator * @csspart title - The popover title * @csspart close - The close button area * @csspart content - The main content inside the popover * * @event plus-popover-open - Emitted when the popover is opened * @event plus-popover-close - Emitted when the popover is closed * @event plus-popover-dismiss - Emitted when the popover is dismissed via close button * * @example * ```html * * Click me *
Popover Title
*
Popover content goes here
* * ``` */ declare class PlusPopover$1 extends Tailwind$1 { slots: Array; /** * The size of the popover. * * Available options: * - `sm` (small) * - `md` (medium - default) * - `lg` (large) * * @type {'sm' | 'md' | 'lg'} * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * The position of the popover relative to the target element. * * Available options: * - `top` (default) * - `top-start` * - `top-end` * - `bottom` * - `bottom-start` * - `bottom-end` * - `left` * - `left-start` * - `left-end` * - `right` * - `right-start` * - `right-end` * * @type {PopoverPosition} * @default PopoverPosition.Top */ orientation: PopoverPosition; /** * Determines how the popover is triggered. * * Available options: * - `click` (default) - Popover toggles on click. * - `hover` - Popover appears on hover. * * @type {'click' | 'hover'} * @default 'click' */ trigger: PopoverTrigger; /** * The main text content of the popover. * * If a slot with `name="content"` is provided, this text will be ignored. * * @type {string} */ text?: string; /** * The header title of the popover. * * If a slot with `name="title"` is provided, this text will be ignored. * * @type {string} * @default 'Title' */ headerText?: string; /** * The status of the popover, which affects its styling. * * Available options: * - `success` (green) * - `warning` (yellow) * - `danger` (red) * - `info` (blue) * - `primary` (default theme color) * - `default` (gray - default) * * @type {'success' | 'warning' | 'danger' | 'info' | 'primary' | 'default'} * @default 'default' */ status: 'success' | 'warning' | 'danger' | 'info' | 'primary' | 'default'; /** * Determines whether the popover can be dismissed by clicking the close button. * * - `true` (default) - Popover can be closed. * - `false` - The close button is hidden. * * @type {boolean} * @default true */ dismissable: boolean; /** * Determines whether a status icon should be displayed in the popover. * * - `true` (default) - An icon representing the status will be displayed. * - `false` - No icon will be displayed. * * @type {boolean} * @default true */ statusIcon: boolean; /** * Determines whether the arrow should be displayed. * * - `true` (default) - Arrow will be displayed. * - `false` - Arrow will be hidden. * * @type {boolean} * @default true */ showArrow: boolean; /** * Controls the visibility of the popover. * * @private * @type {boolean} * @default false */ private isVisible; private targetElement?; private arrowElement?; private cleanup?; private getPopover; private updatePosition; private handleMouseEnter; private handleMouseLeave; private handleClick; private closePopover; private cleanupAutoUpdate; private _cleanupTarget; private handleOutsideClick; private handleSlotChange; private _setupPopover; firstUpdated(): void; disconnectedCallback(): void; render(): lit_html.TemplateResult<1>; } /** * @tag plus-list-box-item * * List box item component that provides a selectable item for list-based containers. * Offers consistent styling and behavior for interactive list items. * * @slot - The default slot for the list box item content * * @csspart base - The component's base wrapper * * @event click - Emitted when the list box item is clicked * * @cssproperty --i-bg-default - Controls the default background color * @cssproperty --i-bg-hovered - Controls the background color when hovered * @cssproperty --i-bg-pressed - Controls the background color when pressed * @cssproperty --i-text-color - Controls the text color * @cssproperty --i-selected-bg - Controls the background color when selected */ declare class PlusListBoxItem$1 extends Tailwind$1 { /** * Sets the size of the list box item * - sm: Small size * - md: Medium size * - lg: Large size * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** Disables the item, making it non-interactive. */ disabled: boolean; /** Indicates whether the item is currently selected. */ selected: boolean; /** * Sets the text content of the list box item * If provided, this will be used as the item's content when no slot content is present */ text?: string; /** * Renders the list box item * Applies the appropriate styles based on disabled and selected states * @returns The rendered template */ render(): lit_html.TemplateResult<1>; } /** * @tag plus-dropdown-item * * Dropdown item component that represents a selectable option within a dropdown menu. * Automatically registers itself as a dropdown-item slot. * * @slot - The default slot for dropdown item content * * @csspart base - The component's base wrapper * @csspart item - The listbox item element * * @event click - Emitted when the dropdown item is clicked * * @cssproperty --i-bg-default - Controls the default background color * @cssproperty --i-bg-hovered - Controls the background color when hovered * @cssproperty --i-bg-pressed - Controls the background color when pressed * @cssproperty --i-text-color - Controls the text color * @cssproperty --i-selected-bg - Controls the background color when selected */ declare class PlusDropDownItem$1 extends Tailwind$1 { /** * Sets the size of the dropdown item * - sm: Small size * - md: Medium size * - lg: Large size * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * Disables the dropdown item interaction * When disabled, the item cannot be clicked or selected * @default false */ disabled: boolean; /** * Indicates whether the dropdown item is currently selected * The selected state is managed by the parent PlusDropdown component * @default false */ selected: boolean; /** * Sets the text content of the dropdown item * If provided, this will be used as the item's content, * and also as the aria-label for accessibility */ text?: string; /** * Lifecycle method called when the component is added to the DOM * Automatically sets itself to be slotted as a dropdown-item * @private */ connectedCallback(): void; /** * Renders the dropdown item * Uses plus-list-box-item as the underlying component * with proper ARIA attributes for accessibility * @returns The rendered template */ render(): lit_html.TemplateResult<1>; } /** * @tag plus-dropdown * * Dropdown component that provides a collapsible menu with selectable options. * Uses Floating UI for intelligent positioning. * * @slot - The default slot for the dropdown trigger button content * @slot suffix - Slot for adding content to the right side of the trigger button * @slot dropdown-item - Slot for dropdown menu items * * @csspart base - The component's base wrapper * @csspart button - The dropdown trigger button * @csspart dropdown-box - The dropdown list container * * @event plus-dropdown-open - Emitted when the dropdown is opened * @event plus-dropdown-close - Emitted when the dropdown is closed * @event plus-dropdown-selected-item - Emitted when an item is selected with the selected item in detail * */ declare class PlusDropdown$1 extends Tailwind$1 { /** * Query all dropdown items * @private */ slots: PlusDropDownItem$1[]; /** * Sets the size of the dropdown button * - sm: Small size * - md: Medium size * - lg: Large size * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * Sets the status/color variant of the dropdown button * - default: Neutral color scheme * - primary: Primary color scheme * - success: Green color scheme * - warning: Yellow color scheme * - danger: Red color scheme * - info: Blue color scheme * @default 'default' */ status: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'; /** * Determines the visual style of the dropdown button * - filled: Solid background color * - outlined: Transparent background with border * - dashed: Transparent background with dashed border * - text: No background or border * @default 'filled' */ kind: 'filled' | 'outlined' | 'dashed' | 'text'; /** * Disables the dropdown interaction * @default false */ disabled: boolean; /** * Sets the text content of the dropdown button if no default slot is provided */ text?: string; /** * Tracks whether the dropdown is open or closed * @private */ private isVisible; /** * Tracks the currently selected dropdown item * @private */ private selectedItem; /** * Reference to the dropdown trigger button * @private */ private targetElement; /** * Reference to the dropdown container * @private */ private dropdownBox; /** * Cleanup function for Floating UI's autoUpdate * @private */ private cleanup?; /** * Unique ID for the dropdown for ARIA relationship * @private */ private dropdownId; /** * Updates the dropdown's position using Floating UI * @private */ private updatePosition; /** * Handles the click event for the trigger button * @private */ private handleClick; /** * Handles keyboard navigation for dropdown items * @param event The keyboard event * @private */ private handleKeyDown; /** * Handles the click event for dropdown items * @param event The click event * @private */ private handleItemClick; /** * Lifecycle method called after the component's first update * @param _changedProperties Map of changed properties * @private */ firstUpdated(_changedProperties: PropertyValues): void; /** * Handles clicks outside of the dropdown to close it * @param event The click event * @private */ private handleOutsideClick; /** * Cleans up the Floating UI autoUpdate subscription * @private */ private cleanupAutoUpdate; /** * Lifecycle method called when the component is removed from the DOM * @private */ disconnectedCallback(): void; /** * Renders the dropdown component * @returns The rendered template */ render(): lit_html.TemplateResult<1>; } /** * @tag plus-tooltip * @summary Tooltip component that displays additional information on hover or click. * * @slot - The target element that triggers the tooltip * * @csspart tooltip - The tooltip container element * @csspart arrow - The tooltip arrow indicator * * @event plus-tooltip-show - Emitted when the tooltip is shown * @event plus-tooltip-hide - Emitted when the tooltip is hidden * * @example * ```html * * Hover me * * ``` */ declare enum TooltipTrigger { Hover = "hover", Click = "click" } declare enum TooltipOrientation { Top = "top", Bottom = "bottom", Left = "left", Right = "right" } declare class PlusTooltip$1 extends Tailwind$1 { slots: Array; /** * Sets the size of the tooltip. * - sm: Small size * - md: Medium size * - lg: Large size * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * The text content displayed inside the tooltip. */ message: string; /** * The trigger event for the tooltip. * - hover: Tooltip appears on hover. * - click: Tooltip appears on click. * @default 'hover' */ trigger: TooltipTrigger; /** * The tooltip placement relative to the target element. * - top, bottom, left, right * @default 'top' */ orientation: TooltipOrientation; hideDelay: number; private isVisible; private targetElement?; private cleanup?; private hideTimeout?; /** * Retrieves the tooltip element from the DOM. */ private getTooltip; /** * Updates the tooltip position dynamically. */ private updatePosition; /** * Handles tooltip appearance when the mouse enters the target element. */ private handleMouseEnter; /** * Handles tooltip disappearance when the mouse leaves the target element. */ private handleMouseLeave; /** * Handles tooltip toggle when the target element is clicked. */ private handleClick; private handleKeyDown; /** * Cleans up auto-update behavior to improve performance. */ private cleanupAutoUpdate; /** * Removes event listeners and resets tooltip state. */ private _cleanupTarget; /** * Handles changes to the slotted content and reattaches event listeners. */ private handleSlotChange; /** * Attaches event listeners based on the trigger type. */ private _setupTooltip; disconnectedCallback(): void; render(): lit_html.TemplateResult<1>; } /** * @tag plus-input * @summary Form input component that provides various input types, validation, and styling features. * * @slot prefix - Content to be placed before the input * @slot suffix - Content to be placed after the input * * @csspart input - The native input element * @csspart wrapper - The input wrapper element * @csspart prefix - The prefix container * @csspart suffix - The suffix container * @csspart clear-button - The clear button * @csspart password-toggle - The password visibility toggle button * * @event plus-input - Emitted when the input value changes * @event plus-change - Emitted when the input value changes and the input loses focus * @event plus-focus - Emitted when the input gains focus * @event plus-blur - Emitted when the input loses focus * @event plus-clear - Emitted when the clear button is clicked * @event plus-password-toggle - Emitted when the password visibility is toggled * @event plus-invalid - Emitted when the input value is invalid * * @example * ```html * console.log('Invalid input:', e.detail)} * > * ``` */ declare class PlusInput$1 extends Tailwind$1 { static styles: lit.CSSResult[]; /** * Reference to the native input element * @private */ input: HTMLInputElement; /** * Indicates if the input has focus * @private */ private hasFocus; /** * Validation message for the input * @private */ private validationMessage; /** * The type of input * @type {'date'|'datetime-local'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url'} * @default 'text' */ type: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url'; /** * The name of the input * @type {string} * @default '' */ name: string; /** * The value of the input * @type {string} * @default '' */ value: string; /** * The placeholder text * @type {string} * @default '' */ placeholder: string; /** * The size of the input * @type {'sm'|'md'|'lg'} * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * Whether the input should have a clear button * @type {boolean} * @default false * @attr clearable */ clearable: boolean; /** * Whether the input is disabled * @type {boolean} * @default false * @attr disabled */ disabled: boolean; /** * Whether the input is readonly * @type {boolean} * @default false * @attr readonly */ readonly: boolean; /** * Whether the input is required * @type {boolean} * @default false * @attr required */ required: boolean; /** * Whether to show a password toggle button * @type {boolean} * @default false * @attr password-toggle */ passwordToggle: boolean; /** * Whether the password is visible * @type {boolean} * @default false * @attr password-visible */ passwordVisible: boolean; /** * The label for the input * @type {string} */ label?: string; /** * The validation pattern for the input * @type {string} */ pattern?: string; /** * The minimum length of the input value * @type {number} */ minlength?: number; /** * The maximum length of the input value * @type {number} */ maxlength?: number; /** * The minimum value of the input * @type {number|string} */ min?: number | string; /** * The maximum value of the input * @type {number|string} */ max?: number | string; /** * The step value for numeric inputs * @type {number|'any'} */ step?: number | 'any'; /** * Whether autocorrect is enabled * @type {'off'|'on'} */ autocorrect?: 'off' | 'on'; /** * The autocomplete attribute * @type {string} */ autocomplete?: string; /** * Whether the input should automatically get focus */ autoFocus?: boolean; /** * The enterkeyhint attribute * @type {'enter'|'done'|'go'|'next'|'previous'|'search'|'send'} */ enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; /** * The inputmode attribute * @type {'none'|'text'|'decimal'|'numeric'|'tel'|'search'|'email'|'url'} */ inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; /** * Whether spellcheck is enabled */ spellCheck?: boolean; /** * Caption text to display below the input * @type {string} */ caption?: string; /** * Whether the input is in an error state * @type {boolean} * @default false * @attr error */ error: boolean; /** * The error message to display * @type {string} * @default '' */ errorMessage: string; /** * Whether the input should take up full width * @type {boolean} * @default false */ fullWidth: boolean; /** * Whether the input is used as part of a select component * @type {boolean} * @default false * @internal * @attr isSelect */ isSelect: boolean; /** * Icon name for the prefix icon * @type {string} */ prefixIcon?: string; /** * Icon name for the suffix icon * @type {string} */ suffixIcon?: string; constructor(); /** * Checks the validity of the input against constraints. * @returns {boolean} True if the input is valid, false otherwise. */ checkValidity(): boolean; /** * Reports the validity of the input. If the input is invalid, * it dispatches an 'invalid' event and focuses the input. * @returns {boolean} True if the input is valid, false otherwise. */ reportValidity(): boolean; /** * Sets a custom validation message for the input. * @param {string} message - The custom validation message. */ setCustomValidity(message: string): void; /** * Called when the input loses focus * @private */ private handleBlur; /** * Called when the input value changes * @private */ private handleChange; /** * Called when the clear button is clicked * @param {MouseEvent} event The event object * @private */ private handleClearClick; /** * Called when the password toggle button is clicked * @param {MouseEvent} event The event object * @private */ private handlePasswordToggle; /** * Called when the input receives focus * @private */ private handleFocus; /** * Called when the input value changes * @private */ private handleInput; /** * Gets the validation message for the input * @returns {string} The validation message * @private */ private getValidationMessage; /** * Validates the input * @private */ private validate; /** * Called when the input is invalid * @param {Event} event The event object * @private */ private handleInvalid; /** * Called when a key is pressed * @param {KeyboardEvent} event The event object * @private */ private handleKeyDown; /** * Calculates the step value * @returns {number} The calculated step value * @private */ private getStepValue; /** * Called when a slot changes * @param {Event} e The event object * @private */ handleSlotchange(e: Event): void; /** * Renders the component * @returns {TemplateResult} The template to render * @override */ render(): lit_html.TemplateResult<1>; } declare enum PopconfirmTrigger { Hover = "hover", Click = "click" } declare enum PopconfirmPosition { Top = "top", TopStart = "top-start", TopEnd = "top-end", Bottom = "bottom", BottomStart = "bottom-start", BottomEnd = "bottom-end", Left = "left", LeftStart = "left-start", LeftEnd = "left-end", Right = "right", RightStart = "right-start", RightEnd = "right-end" } /** * @tag plus-popconfirm * @summary Popconfirm component that displays a confirmation dialog in a floating panel. * * @slot - The target element that triggers the popconfirm * @slot icon - Custom icon for the popconfirm * @slot title - The popconfirm title * @slot header - The entire header section * @slot footer - The footer section with action buttons * @slot content - The main content inside the popconfirm * * @csspart popconfirm - The popconfirm container element * @csspart arrow - The popconfirm arrow indicator * @csspart header - The popconfirm header section * @csspart title - The popconfirm title * @csspart content - The main content inside the popconfirm * @csspart footer - The footer section with action buttons * * @event plus-popconfirm-open - Emitted when the popconfirm is opened * @event plus-popconfirm-close - Emitted when the popconfirm is closed * @event plus-popconfirm-confirm - Emitted when the confirm button is clicked * @event plus-popconfirm-cancel - Emitted when the cancel button is clicked * * @example * ```html * * Delete *
Are you sure?
*
This action cannot be undone.
* * ``` */ declare class PlusPopconfirm$1 extends Tailwind$1 { slots: Array; /** * The size of the popconfirm. * * Available options: * - `sm` (small) * - `md` (medium - default) * - `lg` (large) * * @type {'sm' | 'md' | 'lg'} * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * The position of the popconfirm relative to the target element. * * Available options: * - `top` (default) * - `top-start` * - `top-end` * - `bottom` * - `bottom-start` * - `bottom-end` * - `left` * - `left-start` * - `left-end` * - `right` * - `right-start` * - `right-end` * * @type {PopconfirmPosition} * @default PopconfirmPosition.Top */ orientation: PopconfirmPosition; /** * Determines how the popconfirm is triggered. * * Available options: * - `click` (default) - Popconfirm toggles on click. * - `hover` - Popconfirm appears on hover. * * @type {'click' | 'hover'} * @default 'click' */ trigger: PopconfirmTrigger; /** * The title of the popconfirm. * * @type {string} * @default 'Are you sure?' */ title: string; /** * The text for the confirm button. * * @type {string} * @default 'Confirm' */ confirmText: string; /** * The text for the cancel button. * * @type {string} * @default 'Cancel' */ cancelText: string; /** * The status of the popconfirm, which affects its styling. * * Available options: * - `success` (green) * - `warning` (yellow) * - `danger` (red) * - `info` (blue) * - `primary` (default theme color) * - `default` (gray - default) * * @type {'success' | 'warning' | 'danger' | 'info' | 'primary' | 'default'} * @default 'default' */ status: 'success' | 'warning' | 'danger' | 'info' | 'primary' | 'default'; /** * Determines whether a status icon should be displayed in the popconfirm. * * @type {boolean} * @default true */ statusIcon: boolean; /** * Determines whether the arrow should be displayed. * * @type {boolean} * @default true */ showArrow: boolean; /** * Controls the visibility of the popconfirm. * * @private * @type {boolean} * @default false */ private isVisible; private targetElement?; private arrowElement?; private cleanup?; private getPopconfirm; private updatePosition; private handleMouseEnter; private handleMouseLeave; private handleClick; private closePopconfirm; private handleConfirm; private handleCancel; private cleanupAutoUpdate; private _cleanupTarget; private handleOutsideClick; private handleSlotChange; private _setupPopconfirm; firstUpdated(): void; disconnectedCallback(): void; render(): lit_html.TemplateResult<1>; } /** * @tag plus-text * * Text component for displaying text with various styles based on the design system. * Renders the appropriate semantic HTML tag based on the `kind` property (e.g., h1, h2, p, div). * * @slot - The default slot for the text content. * * @csspart base - The component's base wrapper element (e.g., h1, p, div). * * @cssproperty --i-text-color - Inherited text color variable. */ declare class PlusText$1 extends Tailwind$1 { /** * Defines the visual style and semantic meaning of the text. * - `display`: For large, prominent display text (rendered as div). * - `heading1`: For the main heading (rendered as h1). * - `heading2`: For secondary headings (rendered as h2). * - `title1`: For primary titles (rendered as h3 - adjust as needed). * - `title2`: For secondary titles (rendered as h4 - adjust as needed). * - `body`: For standard body text (rendered as p) (default). * - `body-accent`: For emphasized body text (rendered as p). * - `helper`: For helper text, often used with form elements (rendered as div). * - `caption`: For small caption text (rendered as div). * @default 'body' */ kind: 'display' | 'heading1' | 'heading2' | 'title1' | 'title2' | 'body' | 'body-accent' | 'helper' | 'caption'; private getTag; /** * Renders the text component with the appropriate styles and semantic tag. * @returns The rendered template. */ render(): lit_html.TemplateResult; } /** * @tag plus-breadcrumb * * Displays a hierarchical navigation path, typically showing the user's location within a site or app. * It uses `plus-breadcrumb-item` components slotted inside for each step in the path. * * @slot - Default slot for `plus-breadcrumb-item` elements. * * @csspart base - The main container element (`nav`). */ declare class PlusBreadcrumb$1 extends Tailwind$1 { private _items; /** Defines the visual style of the breadcrumb container. */ kind: 'non-framed' | 'framed'; /** The type of separator to display between items. */ separator: 'arrow' | 'slash'; /** The size of the breadcrumb items and separators. */ size: 'sm' | 'md' | 'lg'; private handleSlotChange; render(): lit_html.TemplateResult<1>; } /** * @tag plus-breadcrumb-item * * Represents a single item within a breadcrumb trail. * Should be used inside a `plus-breadcrumb` component. * * @slot - The default slot for the item's label content. * @slot prefix - Optional slot for content/icon to display before the label. Overrides `prefix-icon` property. * @slot suffix - Optional slot for content/icon to display after the label. Overrides `suffix-icon` property. * * @csspart base - The component's base wrapper element. * @csspart link - The `plus-link` element (if `href` is provided). * @csspart text - The `span` element (if `href` is not provided). * @csspart prefix - The prefix container (slot or icon). * @csspart suffix - The suffix container (slot or icon). * @csspart separator - The separator element. */ declare class PlusBreadcrumbItem$1 extends Tailwind$1 { private readonly slotController; /** The URL to navigate to when the item is clicked. If omitted, the item is rendered as text. */ href?: string; /** Name of the optional icon to display before the label. Used only if the `prefix` slot is empty. */ prefixIcon?: string; /** Name of the optional icon to display after the label. Used only if the `suffix` slot is empty. */ suffixIcon?: string; /** @internal */ isLastItemInternal: boolean; /** @internal */ sizeInternal: 'sm' | 'md' | 'lg'; /** @internal */ separatorInternal: 'arrow' | 'slash'; private renderSeparator; private renderPrefix; private renderSuffix; render(): TemplateResult<1>; } /** * @tag plus-checkbox * * Checkbox component allowing users to select one or more options. * * @slot - The label for the checkbox. * * @csspart base - The component's base wrapper (label). * @csspart control - The container for the actual checkbox input and its visual representation. * @csspart checkbox - The visual representation of the checkbox. * @csspart icon - The checkmark or indeterminate icon. * @csspart label - The text label container. * * @property {boolean} error - If true, the checkbox is displayed in an error state. * * @event plus-change - Emitted when the checkbox's checked state changes. * @event plus-focus - Emitted when the checkbox gains focus. * @event plus-blur - Emitted when the checkbox loses focus. * * @cssproperty --checkbox-size - Controls the size of the checkbox control. Typically maps to sm, md, lg tokens. * @cssproperty --checkbox-color-default - Default background color. * @cssproperty --checkbox-color-checked - Background color when checked. * @cssproperty --checkbox-color-border - Border color. * @cssproperty --checkbox-color-border-checked - Border color when checked. * @cssproperty --checkbox-color-icon - Color of the checkmark/indeterminate icon. * @cssproperty --checkbox-border-color-error - Border color in the error state. */ declare class PlusCheckbox$1 extends Tailwind$1 { static formAssociated: boolean; private internals; input: HTMLInputElement; /** The checkbox's name, submitted as a name/value pair with form data. */ name?: string; /** The size of the checkbox. */ size: 'sm' | 'md' | 'lg'; /** Whether the checkbox is checked. */ checked: boolean; /** Whether the checkbox is in an indeterminate state. */ indeterminate: boolean; /** Whether the checkbox is disabled. */ disabled: boolean; /** The value associated with the checkbox. Submitted with the form data if checked. */ value: string; /** Whether the checkbox is in an error state. */ error: boolean; /** The text label displayed next to the checkbox. If not provided, use the default slot. */ text?: string; constructor(); private setFormValue; updated(changedProperties: Map): void; /** * Called when the associated form is reset. * Resets the checkbox to its initial checked state. * We need to specific attribute initialChecked */ formResetCallback(): void; /** * Called when the disabled state of the parent form changes. */ formDisabledCallback(disabled: boolean): void; private handleFocus; private handleBlur; private handleChange; /** Clicks the checkbox */ click(): void; /** Focuses the checkbox */ focus(options?: FocusOptions): void; /** Blurs the checkbox */ blur(): void; render(): lit_html.TemplateResult<1>; } /** * @tag plus-checkbox-group * * A container for grouping related checkboxes. * * @slot - Default slot for `plus-checkbox` elements. * * @csspart base - The main container element. * * @event plus-change - Emitted when the value of the group changes (any checkbox is checked/unchecked). */ declare class PlusCheckboxGroup$1 extends Tailwind$1 { private checkboxes; /** The selected values in the group. */ value: string[]; /** Whether to display the checkboxes vertically. */ vertical: boolean; /** The size of the checkboxes in the group. */ size: 'sm' | 'md' | 'lg'; /** Whether the entire group is disabled. */ disabled: boolean; updated(changedProperties: Map): void; private handleSlotChange; private updateCheckboxes; private handleCheckboxChange; render(): lit_html.TemplateResult<1>; } /** * @tag plus-textarea * @summary A form-associated textarea component with validation and styling. * * @csspart textarea - The native textarea element * @csspart label - The label element * @csspart caption - The caption/error message container * * @event plus-input - Emitted when the textarea value changes * @event plus-change - Emitted when the textarea value changes and loses focus * @event plus-focus - Emitted when the textarea gains focus * @event plus-blur - Emitted when the textarea loses focus * @event plus-invalid - Emitted when the textarea value is invalid * * @cssprop [--focus-ring-color=--primary-500] - Color of the focus ring * @cssprop [--error-color=--red-500] - Color used for error states */ declare class PlusTextarea$1 extends Tailwind$1 { static styles: lit.CSSResult[]; textarea: HTMLTextAreaElement; private validationMessage; /** The textarea's name attribute. */ name: string; /** The textarea's value attribute. */ value: string; /** The textarea's placeholder text. */ placeholder: string; /** The size variant of the textarea. */ size: 'sm' | 'md' | 'lg'; /** Whether the textarea is disabled. */ disabled: boolean; /** Whether the textarea is readonly. */ readonly: boolean; /** Whether the textarea is required. */ required: boolean; /** The label for the textarea. */ label?: string; /** The minimum length of the value. */ minlength?: number; /** The maximum length of the value. */ maxlength?: number; /** Whether the textarea should automatically get focus. */ autoFocus?: boolean; /** Caption text to display below the textarea. */ caption?: string; /** Whether the textarea is in an error state. */ error: boolean; /** The error message to display (overrides default validation messages). */ errorMessage: string; /** Whether the textarea should take up full width. */ fullWidth: boolean; /** Specifies the visible number of lines in a text area. */ rows: number; /** Controls how the textarea can be resized. */ resize: 'none' | 'vertical' | 'horizontal' | 'both'; /** Specifies how the text in a text area is to be wrapped when submitted in a form. */ wrap: 'hard' | 'soft' | 'off'; /** Checks the validity of the textarea against constraints. */ checkValidity(): boolean; /** Reports the validity state to the user. */ reportValidity(): boolean; /** Sets a custom validation message. */ setCustomValidity(message: string): void; private handleBlur; private handleChange; private handleFocus; private handleInput; private handleInvalid; /** Gets the appropriate validation message. */ private getValidationMessage; /** Validates the textarea and updates state. */ private validate; render(): lit_html.TemplateResult<1>; } /** * @tag plus-rating * @summary A rating component to display and optionally set a rating value. * * @csspart host - The main container element. * @csspart star-container - The container for each star. * @csspart star-icon - Each individual star icon. * @csspart star-partial - The element used to display partial stars. * * @event plus-change - Emitted when the rating value changes via user interaction. * @event plus-hover - Emitted when the user hovers over a star, includes the potential value. * * @cssprop [--star-color-active=--color-warning-500] - Color of active/selected stars. * @cssprop [--star-color-inactive=--color-neutral-300] - Color of inactive stars. * @cssprop [--star-color-hover=--plus-color-text-primary] - Color of stars on hover. */ declare class PlusRating$1 extends Tailwind$1 { static styles: lit.CSSResult[]; value: number; max: number; precision: number; readonly: boolean; disabled: boolean; size: 'sm' | 'md' | 'lg'; name?: string; /** The name of the icon to use for empty rating items. */ emptyIconName: string; /** The name of the icon to use for filled rating items. */ filledIconName: string; /** The label for the rating component. */ label?: string; /** The caption text displayed below the rating. */ caption?: string; required: boolean; private hoverValue; private isHovering; private error; connectedCallback(): void; private clampValue; private getStarValue; private getStarLabel; private handleMouseOver; private handleMouseLeave; private handleClick; private handleKeyDown; /** Checks validity and sets the error state. Returns true if valid, false otherwise. */ reportValidity(): boolean; render(): lit_html.TemplateResult<1>; } type SizeType = 'sm' | 'md' | 'lg'; type StatusType = 'info' | 'success' | 'warning' | 'danger' | 'default'; /** * @tag plus-toast * @summary Displays short, temporary messages. * * @slot - The default slot for the toast message content. If both message and header properties are set, this slot is ignored. * @slot header - Optional header content for the toast. Overrides the header property. * @slot icon - Optional icon content to replace the default status icon. * * @csspart base - The component's base wrapper. * @csspart container - The main container for icon, content, and close button. * @csspart icon - The container for the status icon. * @csspart content - The container for header and message text. * @csspart header - The header text element. * @csspart message - The message text element. * @csspart close-button - The close button container. * * @cssproperty --toast-border-radius - Controls the border radius of the toast. * @cssproperty --toast-padding - Controls the padding of the toast. * @cssproperty --icon-size - Controls the size of the status icon. * @cssproperty --close-button-size - Controls the size of the close button. * * @event plus-close - Emitted when the toast is closed by the user via the close button. * * @dependency plus-icon * @dependency SlotController */ declare class PlusToast$1 extends Tailwind$1 { private readonly slotController; static styles: lit.CSSResult[]; /** The size of the toast. */ size: SizeType; /** The visual style of the toast. */ kind: 'default' | 'outlined' | 'dashed'; /** The status variant of the toast, controlling color and icon. */ status: StatusType; /** Determines if the dismiss button is shown. */ dismiss: boolean; /** Shows the default status icon. */ statusIcon: boolean; header?: string; /** Optional custom icon name (e.g., 'fa-solid fa-star') or SVG string. Overrides the default status icon. Ignored if the 'icon' slot is used.*/ icon?: string; message?: string; private _handleCloseClick; private _renderIcon; private _renderHeader; private _renderMessage; private _renderDismissButton; render(): TemplateResult<1>; } type PositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; /** * @tag plus-toast-container * @summary A container element that listens to the ToastService to display toast notifications. * @dependency plus-toast * @dependency ToastService * * @slot - Toast components are rendered here based on ToastService updates. * * @csspart base - The component's base wrapper. * * @cssproperty --toast-container-gap - Controls the gap between toasts within the container. * @cssproperty --toast-container-z-index - Controls the stack order of the container. */ declare class PlusToastContainer$1 extends Tailwind$1 { static styles: lit.CSSResult[]; /** * The position the container is responsible for. * Only toasts targeted for this position via ToastService will be displayed. * @default 'top-right' */ position: PositionType; /** The list of active toasts provided by the service. */ private _toasts; private _unsubscribe; connectedCallback(): void; disconnectedCallback(): void; private _handleToastEvent; render(): lit_html.TemplateResult<1>; } /** * @tag plus-service * @summary A utility component to automatically set up the UI infrastructure for global services. * Currently sets up the necessary containers for the ToastService. * Place this component once at the root of your application. * @dependency plus-toast-container */ declare class PlusService$1 extends LitElement { createRenderRoot(): this; render(): lit_html.TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { 'plus-service': PlusService$1; } } /** * A select item component that represents a selectable option within a select menu. * Automatically registers itself as a select-item slot in the parent PlusSelect component. * * @tag plus-select-item * @slot - The default slot for select item content * @csspart base - The component's base wrapper * @csspart item - The listbox item element * @event click - Emitted when the select item is clicked, handled by the parent PlusSelect component * @cssproperty --i-bg-default - Controls the default background color * @cssproperty --i-bg-hovered - Controls the background color when hovered * @cssproperty --i-bg-pressed - Controls the background color when pressed * @cssproperty --i-text-color - Controls the text color * @cssproperty --i-selected-bg - Controls the background color when selected */ declare class PlusSelectItem$1 extends Tailwind$1 { /** * Sets the size of the select item. * @values 'sm' | 'md' | 'lg' * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * Disables the select item, preventing interaction. * When disabled, the item cannot be clicked or selected. * @default false */ disabled: boolean; /** * Indicates whether the select item is currently selected. * The selected state is managed by the parent PlusSelect component. * @default false */ selected: boolean; /** * Sets the text content of the select item. * If provided, this will be used as the item's content and as the aria-label for accessibility. * If not provided, the slotted content is used for accessibility. */ text?: string; /** * Initializes the component when it is added to the DOM. * Automatically assigns the component to the 'select-item' slot of the parent PlusSelect. * @private */ connectedCallback(): void; /** * Renders the select item using a plus-list-box-item component. * Includes ARIA attributes for accessibility and proper styling. * @returns The rendered template */ render(): lit_html.TemplateResult<1>; } /** * A select component that provides a collapsible menu with selectable options. * Uses Floating UI for intelligent positioning of the select menu. * * @tag plus-select * @slot - The default slot for the select trigger button content * @slot suffix - Slot for adding content to the right side of the trigger button * @slot select-item - Slot for select menu items * @csspart base - The component's base wrapper * @csspart select - The select trigger input * @csspart select-box - The select list container * @event plus-select-open - Emitted when the select is opened * @event plus-select-close - Emitted when the select is closed * @event plus-select-selected-item - Emitted when an item is selected, with the selected item in detail */ declare class PlusSelect$1 extends Tailwind$1 { /** * CSS styles for the component, including Tailwind base styles and custom styles. */ static styles: lit.CSSResult[]; /** * Queries all select items assigned to the 'select-item' slot. * @private */ slots: PlusSelectItem$1[]; /** * Sets the size of the select button. * @values 'sm' | 'md' | 'lg' * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * Placeholder text for the select trigger input. * @default '' */ placeholder: string; /** * Label text for the select. * @default '' */ label: string; /** * Indicates if the select is in an error state. * @default false */ error: boolean; /** * Disables the select, preventing interaction. * @default false */ disabled: boolean; /** * Marks the select as required. * @default false */ required: boolean; /** * Makes the select read-only, preventing changes. * @default false */ readonly: boolean; /** * Caption text displayed below the select. */ caption?: string; /** * Enables a clear button to reset the selection. * @default false */ clearable: boolean; /** * Makes the select full width. * @default false */ fullWidth: boolean; /** * Tracks the visibility state of the select menu. * @private */ private isVisible; /** * Stores the currently selected select item. * @private */ private selectedItem; /** * Reference to the select trigger input element. * @private */ private targetElement; /** * Reference to the select menu container. * @private */ private selectBox; /** * Cleanup function for Floating UI's autoUpdate. * @private */ private cleanup?; /** * Unique ID for ARIA relationship between the trigger and select menu. * @private */ private selectId; /** * Updates the select menu's position using Floating UI. * @private */ private updatePosition; /** * Handles click events on the select trigger input to toggle the menu. * @private */ private handleClick; /** * Handles keyboard navigation for select items. * @param event - The keyboard event * @private */ private handleKeyDown; /** * Handles click events on select items to select them. * @param event - The click event * @private */ private handleItemClick; /** * Handles changes to the 'select-item' slot to update item properties. * @private */ private handleSlotChange; /** * Initializes the component after it is first updated. * @param changedProperties - Map of changed properties * @private */ firstUpdated(changedProperties: PropertyValues): void; /** * Handles clicks outside the select to close it. * @param event - The click event * @private */ private handleOutsideClick; /** * Cleans up the Floating UI autoUpdate subscription. * @private */ private cleanupAutoUpdate; /** * Cleans up event listeners and subscriptions when the component is removed from the DOM. * @private */ disconnectedCallback(): void; /** * Renders the select component. * @returns The rendered template */ render(): lit_html.TemplateResult<1>; } /** * @tag plus-toggle * @summary Toggle component that provides a switch with various styles and states. * * @slot - The default slot for toggle text content when no text property is specified * * @csspart base - The component's base wrapper * @csspart label - The label element * @csspart control - The control element containing the toggle and text * @csspart switch - The switch element * @csspart dot - The dot element inside the switch * @csspart text - The text element * @csspart icon - The icon element when an icon is used * @csspart caption - The caption element * * @cssproperty --text-color - Controls the text color * @cssproperty --border-color - Controls the border color of the toggle * @cssproperty --switch-bg - Controls the background color of the switch * @cssproperty --switch-bg-hover - Controls the background color when hovered * @cssproperty --switch-bg-active - Controls the background color when pressed * @cssproperty --dot-bg - Controls the background color of the dot * @cssproperty --dot-text - Controls the text color of the icon in the dot * * @event plus-change - Emitted when the toggle state changes * @event plus-input - Emitted when the toggle state changes (for input event compatibility) * @event plus-focus - Emitted when the toggle gains focus * @event plus-blur - Emitted when the toggle loses focus * @event plus-invalid - Emitted when the toggle validation fails * * @example * ```html * Enable dark mode * ``` */ declare class PlusToggle$1 extends Tailwind$1 { static formAssociated: boolean; private internals; static styles: lit.CSSResult[]; input: HTMLInputElement; private hasFocus; private validationMessage; name: string; value: string; checked: boolean; size: 'sm' | 'md' | 'lg'; label?: string; caption?: string; text?: string; textPosition: 'left' | 'right'; toggleIcon?: string; toggleActiveIcon?: string; toggleInActiveIcon?: string; error: boolean; errorMessage: string; disabled: boolean; readonly: boolean; required: boolean; fullWidth: boolean; animation: 'default' | 'bounce' | 'smooth'; customAriaLabel?: string; constructor(); /** * Checks the validity of the toggle input * @returns True if the toggle is valid, false otherwise */ checkValidity(): boolean; /** * Reports the validity of the toggle input * @returns True if the toggle is valid, false otherwise */ reportValidity(): boolean; /** * Sets a custom validity message for the toggle * @param message The custom validity message */ setCustomValidity(message: string): void; private setFormValue; updated(changedProperties: Map | PropertyValues): void; formResetCallback(): void; formDisabledCallback(disabled: boolean): void; private handleBlur; private handleFocus; /** * Gets the validation message for the toggle * @returns {string} The validation message * @private */ private getValidationMessage; /** * Validates the toggle input * @private */ private validate; /** * Called when the input is invalid * @param {Event} event The event object * @private */ private handleInvalid; private handleChange; private handleControlClick; click(): void; focus(options?: FocusOptions): void; blur(): void; getToggleIcon(): lit_html.TemplateResult<1> | ""; render(): lit_html.TemplateResult<1>; } /** * @tag plus-tab * @summary Tab component that represents a single tab in a tab group. * * @slot - The default slot for tab content * @slot prefix - Content to be placed before the tab content * @slot suffix - Content to be placed after the tab content * * @csspart tab - The component's base wrapper * * @cssproperty --text-color - Controls the text color of the tab * @cssproperty --active-color - Controls the color of the active indicator * @cssproperty --bg-default - Controls the default background color * @cssproperty --bg-hovered - Controls the background color when hovered * * @example * ```html * Tab 1 * ``` */ declare class PlusTab$1 extends Tailwind$1 { static styles: lit.CSSResult[]; /** * Sets the value of the tab, used for identification and selection */ value: string; /** * Indicates if the tab is currently selected * @default false */ active: boolean; /** * Sets the size of the tab * - sm: Small size * - md: Medium size * - lg: Large size * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * Disables the tab interaction * @default false */ disabled: boolean; /** * Sets the orientation of the tabs * - horizontal: Tabs arranged horizontally * - vertical: Tabs arranged vertically * @default 'horizontal' */ orientation: 'horizontal' | 'vertical'; /** * Icon name to display before the tab content */ prefixIcon?: string; /** * Icon name to display after the tab content */ suffixIcon?: string; /** * Enables the dismiss button to remove the tab * @default false */ dismissible: boolean; /** * Truncates the text if it's too long * @default false */ truncate: boolean; /** * Use animated indicator instead of border for active tab * This is controlled by the parent tab-group * @default false */ animated: boolean; constructor(); private handleClick; private handleDismiss; render(): lit_html.TemplateResult<1>; } /** * @tag plus-tab-panel * @summary Tab panel component that displays content associated with a tab. * * @slot - The default slot for tab panel content * * @csspart panel - The component's base wrapper * * @example * ```html * Tab 1 Content * ``` */ declare class PlusTabPanel$1 extends Tailwind$1 { static styles: lit.CSSResult[]; /** * Sets the value of the tab panel, used for matching with a tab */ value: string; /** * Indicates whether the panel is currently active/visible. */ active: boolean; /** * An optional class to apply to the panel container. */ panelClass: string; render(): lit_html.TemplateResult<1>; } /** * @tag plus-tab-group * @summary Tab group component that manages a set of tabs and panels. * * @slot tablist - Slot for tabs * @slot panels - Slot for tab panels * * @csspart group - The component's base wrapper * @csspart tablist - The tabs container * @csspart panels - The tab panels container * @csspart indicator - The animated indicator element (when animated=true) * * @cssproperty --tabs-gap - Controls the gap between tabs * @cssproperty --tabs-indicator-color - Controls the color of the active tab indicator * @cssproperty --tabs-indicator-height - Controls the height of the animated indicator * * @event plus-tabs-change - Emitted when a tab is selected with the tab's value * * @example * ```html * * Tab 1 * Tab 2 * Content 1 * Content 2 * * ``` */ declare class PlusTabGroup$1 extends Tailwind$1 { static styles: lit.CSSResult[]; /** * Sets the size of the tabs * - sm: Small size * - md: Medium size * - lg: Large size * @default 'md' */ size: 'sm' | 'md' | 'lg'; /** * Sets the orientation of the tabs * - horizontal: Tabs arranged horizontally * - vertical: Tabs arranged vertically * @default 'horizontal' */ orientation: 'horizontal' | 'vertical'; /** * Disables all tabs * @default false */ disabled: boolean; /** * Allows individual tabs to be dismissed (closed). * @default false */ dismissible: boolean; /** * Currently active tab value */ value: string; /** * Enables animated sliding indicator for active tab * @default false */ animated: boolean; /** * References to DOM elements */ private tablistSlot; private panelsSlot; private indicator; /** * Internal state to track tabs and panels */ private tabs; private panels; private resizeObserver?; private mutationObserver?; constructor(); connectedCallback(): void; disconnectedCallback(): void; /** * Get all tabs from the tablist slot */ private getTabs; /** * Get all panels from the panels slot */ private getPanels; /** * Handle tab slot change */ private handleTabsSlotChange; /** * Handle panels slot change */ private handlePanelsSlotChange; /** * Updates the indicator position and size */ private updateIndicator; /** * Synchronize tabs with panels and apply properties */ private syncTabsWithPanels; /** * Handle tab click event */ private handleTabClick; /** * Handle tab dismiss event */ private handleTabDismiss; updated(changedProperties: Map): void; render(): lit_html.TemplateResult<1>; } interface TailwindProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * * --- * */ declare const Tailwind: React.ForwardRefExoticComponent; interface PlusAvatarProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Toggles inverted color scheme */ invert?: boolean; /** URL of the avatar image */ image?: PlusAvatar$1["image"]; /** Alternative text for the avatar */ alt?: PlusAvatar$1["alt"]; /** Shape of the avatar - circle: Circular shape - square: Square shape with slight rounding */ shape?: PlusAvatar$1["shape"]; /** Size of the avatar Can be a predefined size (xs, sm, md, lg, xl) or custom value */ size?: PlusAvatar$1["size"]; /** Icon name to use when no image is available */ icon?: PlusAvatar$1["icon"]; /** Text to display as initials when no image is available */ text?: PlusAvatar$1["text"]; /** Strategy to use when image fails to load - icon: Shows an icon - text: Shows text initials - custom: Uses fallback slot content */ fallbackStrategy?: PlusAvatar$1["fallbackStrategy"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * * --- * * * ### **Slots:** * - _default_ - The default slot for avatar content * - **fallback** - Optional slot for custom fallback content * * ### **CSS Properties:** * - **--text-color** - Controls the text color of the avatar _(default: undefined)_ * - **--bg-default** - Controls the default background color _(default: undefined)_ * * ### **CSS Parts:** * - **base** - The component's base wrapper */ declare const PlusAvatar: React.ForwardRefExoticComponent; interface PlusButtonProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Disables the button interaction */ disabled?: boolean; /** Shows loading spinner and disables interaction */ loading?: boolean; /** undefined */ fullWidth?: boolean; /** When true, link opens in new tab with secure attributes Automatically sets target="_blank" and rel="noopener noreferrer" */ external?: boolean; /** Determines the visual style of the button - filled: Solid background color - outlined: Transparent background with border - dashed: Transparent background with dashed border - text: Text only without background or border */ kind?: PlusButton$1["kind"]; /** Sets the status/color variant of the button - default: Neutral color scheme - primary: Brand color scheme - success: Green color scheme - warning: Yellow color scheme - danger: Red color scheme - info: Blue color scheme */ status?: PlusButton$1["status"]; /** Sets the size of the button - sm: Small size - md: Medium size - lg: Large size */ size?: PlusButton$1["size"]; /** When provided, renders as an anchor link instead of a button */ href?: PlusButton$1["href"]; /** Specifies where to display the linked URL Common values: _blank, _self, _parent, _top */ target?: PlusButton$1["target"]; /** Specifies the relationship between the current document and the linked document Common values: nofollow, noopener, noreferrer */ rel?: PlusButton$1["rel"]; /** Sets the link to download the target URL instead of navigating Optional value specifies the suggested filename */ download?: PlusButton$1["download"]; /** Specifies the button type for form interactions Only applies when rendering as a button (no href) */ type?: PlusButton$1["type"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * * --- * */ declare const PlusButton: React.ForwardRefExoticComponent; interface PlusButtonGroupProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Determines whether the button group's properties override the properties of its child buttons. When true, all buttons in the group will have the same appearance. When false, each button can have its own properties. */ override?: boolean; /** Disables the button interaction */ disabled?: boolean; /** Shows loading spinner and disables interaction */ loading?: boolean; /** The orientation of the button group. */ orientation?: PlusButtonGroup$1["orientation"]; /** Determines the visual style of the button - filled: Solid background color - outlined: Transparent background with border - dashed: Transparent background with dashed border - text: Text only without background or border */ kind?: PlusButtonGroup$1["kind"]; /** Sets the status/color variant of the button - default: Neutral color scheme - primary: Brand color scheme - success: Green color scheme - warning: Yellow color scheme - danger: Red color scheme - info: Blue color scheme */ status?: PlusButtonGroup$1["status"]; /** Sets the size of the button - sm: Small size - md: Medium size - lg: Large size */ size?: PlusButtonGroup$1["size"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * Button group component that groups related buttons together. * --- * * * ### **Slots:** * - _default_ - The default slot for the buttons * * ### **CSS Properties:** * - **--button-group-gap** - Gap between buttons in the group _(default: undefined)_ */ declare const PlusButtonGroup: React.ForwardRefExoticComponent; interface PlusBadgeProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Sets the status/color variant of the badge - default: Neutral color scheme - primary: Brand color scheme - success: Green color scheme - warning: Yellow color scheme - danger: Red color scheme - info: Blue color scheme */ status?: PlusBadge$1["status"]; /** Sets the size of the badge - sm: Small size - md: Medium size - lg: Large size */ size?: PlusBadge$1["size"]; /** Sets the position of the badge relative to its content - top-right: Top right corner - top-left: Top left corner - bottom-right: Bottom right corner - bottom-left: Bottom left corner - '': No specific position */ orientation?: PlusBadge$1["orientation"]; /** Sets the offset of the badge from its default position Format: "x,y" where x and y can be any valid CSS length value Example: "10px,5px" or "-5px,-10px" */ offset?: PlusBadge$1["offset"]; /** Sets the content of the badge If not provided, the badge will be displayed as a dot */ content?: PlusBadge$1["content"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * * --- * */ declare const PlusBadge: React.ForwardRefExoticComponent; interface PlusTagProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Toggles between light/dark color themes */ invert?: boolean; /** Accessible label for the tag (falls back to text content) */ undefined?: PlusTag$1["undefined"]; /** ARIA role (defaults to "status") */ undefined?: PlusTag$1["undefined"]; /** Defines the tag's visual state and color scheme */ status?: PlusTag$1["status"]; /** Controls the tag's size variant */ size?: PlusTag$1["size"]; /** Sets the border radius style */ radius?: PlusTag$1["radius"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * A versatile tag component for displaying status, labels, and categories * --- * * * ### **CSS Properties:** * - **--tag-bg-color** - Background color for default state (inherits from --plus-color-background-neutral-default) _(default: undefined)_ * - **--tag-text-color** - Text color for default state (inherits from --plus-color-text-default) _(default: undefined)_ * * ### **CSS Parts:** * - **tag** - The container element for the tag */ declare const PlusTag: React.ForwardRefExoticComponent; interface PlusIconProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Name of the icon to display */ iconName?: PlusIcon$1["iconName"]; /** Style variant of the icon: solid, regular, or light */ iconStyle?: PlusIcon$1["iconStyle"]; /** Size variant for the icon */ size?: PlusIcon$1["size"]; /** Label for accessibility - will be used as aria-label */ label?: PlusIcon$1["label"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * * --- * * * ### **CSS Properties:** * - **--icon-size** - Custom icon size (overrides size variants) _(default: undefined)_ * - **--icon-color** - Custom icon color (overrides currentColor) _(default: undefined)_ * * ### **CSS Parts:** * - **base** - The component's base wrapper * - **icon** - The SVG icon element */ declare const PlusIcon: React.ForwardRefExoticComponent; interface PlusChipProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Toggles inverted color scheme */ invert?: boolean; /** Shows/hides the dismiss button */ dismiss?: boolean; /** Disables the chip interaction */ disabled?: boolean; /** Determines the visual style of the chip - filled: Solid background color - outlined: Transparent background with border */ kind?: PlusChip$1["kind"]; /** Sets the size of the chip - sm: Small size - md: Medium size - lg: Large size */ size?: PlusChip$1["size"]; /** Defines the type of chip - default: Standard chip - avatar: Chip with avatar support */ type?: PlusChip$1["type"]; /** Sets the status/color variant of the chip - default: Neutral color scheme - success: Green color scheme - warning: Yellow color scheme - danger: Red color scheme - info: Blue color scheme */ status?: PlusChip$1["status"]; /** Controls the border radius style - full: Fully rounded corners - rounded: Slightly rounded corners */ shape?: PlusChip$1["shape"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * * --- * * * ### **Slots:** * - _default_ - The default slot for chip content * * ### **CSS Properties:** * - **--text-color** - Controls the text color of the chip _(default: undefined)_ * - **--border-color** - Controls the border color of the chip _(default: undefined)_ * - **--bg-default** - Controls the default background color _(default: undefined)_ * - **--bg-hovered** - Controls the background color when hovered _(default: undefined)_ * - **--bg-pressed** - Controls the background color when pressed _(default: undefined)_ * - **--bg-focused** - Controls the background color when focused _(default: undefined)_ * * ### **CSS Parts:** * - **base** - The component's base wrapper * - **icon** - The dismiss icon wrapper */ declare const PlusChip: React.ForwardRefExoticComponent; interface PlusLinkProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** When true, the link becomes non-interactive and shows disabled styling */ disabled?: boolean; /** When true, the link becomes non-interactive but maintains normal styling */ readonly?: boolean; /** When true, displays loading state and disables interaction */ loading?: boolean; /** When true, link opens in new tab with secure attributes Automatically sets target="_blank" and rel="noopener noreferrer" */ external?: boolean; /** Controls the size of the link - sm: Small size with smaller text and spacing - md: Medium size with default text and spacing - lg: Large size with larger text and spacing - inherit: Inherits size from parent element */ size?: PlusLink$1["size"]; /** The URL that the hyperlink points to */ href?: PlusLink$1["href"]; /** Specifies where to display the linked URL Common values: _blank, _self, _parent, _top */ target?: PlusLink$1["target"]; /** Specifies the relationship between the current document and the linked document Common values: nofollow, noopener, noreferrer */ rel?: PlusLink$1["rel"]; /** Sets the link to download the target URL instead of navigating Optional value specifies the suggested filename */ download?: PlusLink$1["download"]; /** Controls the underline style of the link values: - always: always underlined - hover: underlined on hover - never: never underlined */ underline?: PlusLink$1["underline"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * * --- * * * ### **Slots:** * - _default_ - The default slot for link content * - **prefix** - Slot for content to be placed before the link content * - **suffix** - Slot for content to be placed after the link content * * ### **CSS Parts:** * - **base** - The component's base wrapper */ declare const PlusLink: React.ForwardRefExoticComponent; interface PlusAlertProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** When true, the alert will be displayed with an inverted color scheme */ invert?: boolean; /** When true, the alert will be displayed with a dismissible close button */ dismissible?: boolean; /** When true, the alert will be displayed with a full width */ fullWidth?: boolean; /** When true, the alert will be hidden */ hiddenAlert?: boolean; /** Determines the visual style of the alert - filled: Solid background color - outlined: Transparent background with border - dashed: Transparent background with dashed border */ kind?: PlusAlert$1["kind"]; /** The size of the alert */ size?: PlusAlert$1["size"]; /** Sets the status/color variant of the alert - default: Neutral color scheme - primary: Brand color scheme - success: Green color scheme - warning: Yellow color scheme - danger: Red color scheme - info: Blue color scheme */ status?: PlusAlert$1["status"]; /** The message of the alert */ message?: PlusAlert$1["message"]; /** The description of the alert */ description?: PlusAlert$1["description"]; /** The status icon of the alert */ statusIcon?: PlusAlert$1["statusIcon"]; /** The dismiss icon of the alert */ dismissIcon?: PlusAlert$1["dismissIcon"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the alert is dismissed */ onPlusDismiss?: (event: CustomEvent) => void; } /** * Alert component that displays important messages to users. * --- * * * ### **Events:** * - **plus-dismiss** - Emitted when the alert is dismissed * * ### **Slots:** * - **message** - The main message content * - **description** - Additional descriptive content * - **prefix** - Custom status icon * - **dismiss** - Custom dismiss button * * ### **CSS Parts:** * - **base** - The main container element * - **status-icon** - The status icon container * - **content** - The content container * - **message** - The message container * - **description** - The description container * - **dismiss** - The dismiss button container */ declare const PlusAlert: React.ForwardRefExoticComponent; interface PlusRadioProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Whether the radio is checked. */ checked?: boolean; /** Whether the radio is in an error state. */ error?: boolean; /** Whether the radio is disabled. */ disabled?: boolean; /** Whether the radio is readonly. */ readonly?: boolean; /** Whether the radio is required. */ required?: boolean; /** Sets the size of the radio button - sm: Small size - md: Medium size - lg: Large size */ size?: PlusRadio$1["size"]; /** Defines the text label for the radio button */ text?: PlusRadio$1["text"]; /** The radio's name attribute. */ name?: PlusRadio$1["name"]; /** The radio's value attribute. */ value?: PlusRadio$1["value"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Internal state to track if the radio button has focus */ hasFocus?: PlusRadio$1["hasFocus"]; /** Emitted when the radio button's checked state changes */ onPlusChange?: (event: CustomEvent) => void; } /** * Radio button component that allows single selection from a group of options. * --- * * * ### **Events:** * - **plus-change** - Emitted when the radio button's checked state changes * * ### **Methods:** * - **handleChange()** - Handles the change event when the radio button is toggled * * ### **Slots:** * - _default_ - The radio button label content * * ### **CSS Parts:** * - **radio** - The component's radio input element */ declare const PlusRadio: React.ForwardRefExoticComponent; interface PlusSegmentedPickerItemProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** The value associated with the item. */ checked?: boolean; /** Disables the item, making it non-interactive. */ disabled?: boolean; /** The status of the item. */ status?: PlusSegmentedPickerItem$1["status"]; /** The shape of the item. */ shape?: PlusSegmentedPickerItem$1["shape"]; /** The size of the item. */ size?: PlusSegmentedPickerItem$1["size"]; /** The name of the group this item belongs to. */ groupName?: PlusSegmentedPickerItem$1["groupName"]; /** The value of the item. */ value?: PlusSegmentedPickerItem$1["value"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * An item component for the segmented picker. * --- * * * ### **Slots:** * - _default_ - The content of the item. * * ### **CSS Properties:** * - **--active-color** - Color of the active indicator _(default: undefined)_ * * ### **CSS Parts:** * - **label** - The label element. * - **input** - The input element. */ declare const PlusSegmentedPickerItem: React.ForwardRefExoticComponent; interface PlusSegmentedPickerProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** The status of the segmented picker. */ status?: PlusSegmentedPicker$1["status"]; /** The shape of the segmented picker. */ shape?: PlusSegmentedPicker$1["shape"]; /** The size of the segmented picker. */ size?: PlusSegmentedPicker$1["size"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when an item is selected. */ onPlusSegmentedPickerItemChanged?: (event: CustomEvent) => void; } /** * A segmented picker component that allows users to select one option from a group of options. * --- * * * ### **Events:** * - **plus-segmented-picker-item-changed** - Emitted when an item is selected. * * ### **Slots:** * - _default_ - The content of the segmented picker, should be plus-segmented-picker-item elements. * * ### **CSS Parts:** * - **host** - The host element. * - **animation-overlay** - The animation overlay element. */ declare const PlusSegmentedPicker: React.ForwardRefExoticComponent; interface PlusRadioGroupProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Disables all radio buttons in the group. */ disabled?: boolean; /** Makes the radio group required for form submission. */ required?: boolean; /** Displays the radio buttons in an error state. */ error?: boolean; /** undefined */ name?: PlusRadioGroup$1["name"]; /** undefined */ value?: PlusRadioGroup$1["value"]; /** The size of all radio buttons in the group - sm: Small size - md: Medium size - lg: Large size */ size?: PlusRadioGroup$1["size"]; /** Orientation of the radio buttons - horizontal: Radio buttons are arranged side by side - vertical: Radio buttons are stacked vertically */ orientation?: PlusRadioGroup$1["orientation"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * * --- * */ declare const PlusRadioGroup: React.ForwardRefExoticComponent; interface PlusModalProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Whether the modal is open */ isOpen?: boolean; /** Whether the modal should take full width */ fullWidth?: boolean; /** Makes the modal take the full screen (100vw x 100vh, no border radius) */ fullScreen?: boolean; /** Controls backdrop behavior - true: Shows backdrop, modal can be closed by clicking outside - false: No backdrop - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation) */ backdrop?: boolean | "static"; /** Whether the modal should close when clicking the backdrop */ closeOnBackdrop?: boolean; /** Whether the modal should close when pressing the Escape key */ closeOnEsc?: boolean; /** Hides the header section completely */ noHeader?: boolean; /** Hides the footer section completely */ noFooter?: boolean; /** The size of the modal */ size?: PlusModal$1["size"]; /** The placement of the modal on the screen */ placement?: PlusModal$1["placement"]; /** The duration of the animation in milliseconds */ animationDuration?: PlusModal$1["animationDuration"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted after the modal has opened */ onPlusModalOpen?: (event: CustomEvent) => void; /** Emitted after the modal has closed */ onPlusModalClose?: (event: CustomEvent) => void; /** Emitted before the modal opens (cancelable) */ onPlusModalBeforeOpen?: (event: CustomEvent) => void; /** Emitted before the modal closes (cancelable) */ onPlusModalBeforeClose?: (event: CustomEvent) => void; } /** * Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management. * --- * * * ### **Events:** * - **plus-modal-open** - Emitted after the modal has opened * - **plus-modal-close** - Emitted after the modal has closed * - **plus-modal-before-open** - Emitted before the modal opens (cancelable) * - **plus-modal-before-close** - Emitted before the modal closes (cancelable) * * ### **Methods:** * - **show(): _Promise_** - Shows the modal with animation * - **hide(): _Promise_** - Hides the modal with animation * - **toggle(): _Promise_** - Toggles the modal open/closed state * * ### **Slots:** * - _default_ - Main content area (same as body slot) * - **header** - The header content of the modal * - **body** - The main content of the modal (alternative to default slot) * - **footer** - The footer content of the modal * - **close** - Custom close button (defaults to an X icon) * * ### **CSS Parts:** * - **dialog** - The native dialog element * - **container** - The container wrapper for centering and scrolling * - **modal** - The main modal box * - **header** - The header section * - **header-content** - The content wrapper inside header * - **body** - The main content area * - **footer** - The footer section * - **close-button** - The close button element */ declare const PlusModal: React.ForwardRefExoticComponent; interface PlusDrawerProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Whether the drawer is open */ isOpen?: boolean; /** The size of the drawer */ size?: PlusDrawer$1["size"]; /** The position of the drawer */ orientation?: PlusDrawer$1["orientation"]; /** The duration of the animation in milliseconds */ animationDuration?: PlusDrawer$1["animationDuration"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * Sliding panel component that appears from the edge of the screen. * --- * * * ### **Methods:** * - **hide(): _void_** - Hides the drawer with animation * - **show(): _void_** - Shows the drawer with animation * * ### **Slots:** * - **header** - The header content of the drawer * - **body** - The main content of the drawer * - **footer** - The footer content of the drawer * - **close** - Custom close button (defaults to an X icon) * * ### **CSS Parts:** * - **container** - The main container element * - **overlay** - The overlay element * - **drawer** - The drawer element * - **header** - The header element * - **body** - The body element * - **footer** - The footer element * - **close-button** - The close button element */ declare const PlusDrawer: React.ForwardRefExoticComponent; interface PlusAccordionProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Whether the accordion is expanded */ expand?: boolean; /** Whether the accordion is part of a group */ isGrouped?: boolean; /** Whether the accordion is the last item in a group */ isLast?: boolean; /** Whether the accordion is the first item in a group */ isFirst?: boolean; /** Whether the accordion is disabled */ disabled?: boolean; /** The size of the accordion */ size?: PlusAccordion$1["size"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the accordion is toggled */ onPlusAccordionToggle?: (event: CustomEvent) => void; } /** * Accordion component for displaying collapsible content. * --- * * * ### **Events:** * - **plus-accordion-toggle** - Emitted when the accordion is toggled * * ### **Slots:** * - **header** - The header content of the accordion * - **helper** - Optional helper text displayed next to the header * - **panel** - The content that is shown when the accordion is expanded * * ### **CSS Parts:** * - **header** - The header container * - **panel** - The panel container * - **icon** - The expand/collapse icon * - **helper** - The helper text container */ declare const PlusAccordion: React.ForwardRefExoticComponent; interface PlusAccordionGroupProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Whether multiple accordions can be expanded at the same time */ multi?: boolean; /** The visual style of the accordion group */ kind?: PlusAccordionGroup$1["kind"]; /** The size of the accordions in the group */ size?: PlusAccordionGroup$1["size"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * A container for grouping accordion items together. * --- * * * ### **Slots:** * - **default** - Accordion items to be grouped * * ### **CSS Parts:** * - **container** - The container element */ declare const PlusAccordionGroup: React.ForwardRefExoticComponent; interface PlusDividerProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** The orientation of the divider. */ orientation?: PlusDivider$1["orientation"]; /** The Kind of the divider. */ kind?: PlusDivider$1["kind"]; /** The position of the text content (only applicable with hasContent=true) */ contentPosition?: PlusDivider$1["contentPosition"]; /** The thickness of the divider */ thickness?: PlusDivider$1["thickness"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Whether the divider has content or not */ hasContent?: PlusDivider$1["hasContent"]; } /** * * --- * * * ### **Slots:** * - _default_ - The default slot for optional divider content (for text dividers) * * ### **CSS Properties:** * - **--divider-color** - Controls the color of the divider _(default: undefined)_ * - **--divider-thickness** - Controls the thickness of the divider _(default: undefined)_ * - **--divider-spacing** - Controls the spacing around the divider _(default: undefined)_ * * ### **CSS Parts:** * - **divider** - The component's base wrapper * - **label** - The text content container */ declare const PlusDivider: React.ForwardRefExoticComponent; interface PlusPopoverProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Determines whether the popover can be dismissed by clicking the close button. - `true` (default) - Popover can be closed. - `false` - The close button is hidden. */ dismissable?: boolean; /** Determines whether a status icon should be displayed in the popover. - `true` (default) - An icon representing the status will be displayed. - `false` - No icon will be displayed. */ statusIcon?: boolean; /** Determines whether the arrow should be displayed. - `true` (default) - Arrow will be displayed. - `false` - Arrow will be hidden. */ showArrow?: boolean; /** The size of the popover. Available options: - `sm` (small) - `md` (medium - default) - `lg` (large) */ size?: PlusPopover$1["size"]; /** The position of the popover relative to the target element. Available options: - `top` (default) - `top-start` - `top-end` - `bottom` - `bottom-start` - `bottom-end` - `left` - `left-start` - `left-end` - `right` - `right-start` - `right-end` */ orientation?: PlusPopover$1["orientation"]; /** Determines how the popover is triggered. Available options: - `click` (default) - Popover toggles on click. - `hover` - Popover appears on hover. */ trigger?: PlusPopover$1["trigger"]; /** The main text content of the popover. If a slot with `name="content"` is provided, this text will be ignored. */ text?: PlusPopover$1["text"]; /** The header title of the popover. If a slot with `name="title"` is provided, this text will be ignored. */ headerText?: PlusPopover$1["headerText"]; /** The status of the popover, which affects its styling. Available options: - `success` (green) - `warning` (yellow) - `danger` (red) - `info` (blue) - `primary` (default theme color) - `default` (gray - default) */ status?: PlusPopover$1["status"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the popover is opened */ onPlusPopoverOpen?: (event: CustomEvent) => void; /** Emitted when the popover is closed */ onPlusPopoverClose?: (event: CustomEvent) => void; /** Emitted when the popover is dismissed via close button */ onPlusPopoverDismiss?: (event: CustomEvent) => void; } /** * Popover component that displays content in a floating panel. * --- * * * ### **Events:** * - **plus-popover-open** - Emitted when the popover is opened * - **plus-popover-close** - Emitted when the popover is closed * - **plus-popover-dismiss** - Emitted when the popover is dismissed via close button * * ### **Slots:** * - _default_ - The target element that triggers the popover * - **icon** - Custom icon for the popover * - **title** - The popover title * - **actions** - Actions like close button * - **content** - The main content inside the popover * * ### **CSS Parts:** * - **popover** - The popover container element * - **arrow** - The popover arrow indicator * - **title** - The popover title * - **close** - The close button area * - **content** - The main content inside the popover */ declare const PlusPopover: React.ForwardRefExoticComponent; interface PlusListBoxItemProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Disables the item, making it non-interactive. */ disabled?: boolean; /** Indicates whether the item is currently selected. */ selected?: boolean; /** Sets the size of the list box item - sm: Small size - md: Medium size - lg: Large size */ size?: PlusListBoxItem$1["size"]; /** Sets the text content of the list box item If provided, this will be used as the item's content when no slot content is present */ text?: PlusListBoxItem$1["text"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the list box item is clicked */ onClick?: (event: CustomEvent) => void; } /** * * --- * * * ### **Events:** * - **click** - Emitted when the list box item is clicked * * ### **Slots:** * - _default_ - The default slot for the list box item content * * ### **CSS Properties:** * - **--i-bg-default** - Controls the default background color _(default: undefined)_ * - **--i-bg-hovered** - Controls the background color when hovered _(default: undefined)_ * - **--i-bg-pressed** - Controls the background color when pressed _(default: undefined)_ * - **--i-text-color** - Controls the text color _(default: undefined)_ * - **--i-selected-bg** - Controls the background color when selected _(default: undefined)_ * * ### **CSS Parts:** * - **base** - The component's base wrapper */ declare const PlusListBoxItem: React.ForwardRefExoticComponent; interface PlusDropDownItemProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Disables the dropdown item interaction When disabled, the item cannot be clicked or selected */ disabled?: boolean; /** Indicates whether the dropdown item is currently selected The selected state is managed by the parent PlusDropdown component */ selected?: boolean; /** Sets the size of the dropdown item - sm: Small size - md: Medium size - lg: Large size */ size?: PlusDropDownItem$1["size"]; /** Sets the text content of the dropdown item If provided, this will be used as the item's content, and also as the aria-label for accessibility */ text?: PlusDropDownItem$1["text"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the dropdown item is clicked */ onClick?: (event: CustomEvent) => void; } /** * * --- * * * ### **Events:** * - **click** - Emitted when the dropdown item is clicked * * ### **Slots:** * - _default_ - The default slot for dropdown item content * * ### **CSS Properties:** * - **--i-bg-default** - Controls the default background color _(default: undefined)_ * - **--i-bg-hovered** - Controls the background color when hovered _(default: undefined)_ * - **--i-bg-pressed** - Controls the background color when pressed _(default: undefined)_ * - **--i-text-color** - Controls the text color _(default: undefined)_ * - **--i-selected-bg** - Controls the background color when selected _(default: undefined)_ * * ### **CSS Parts:** * - **base** - The component's base wrapper * - **item** - The listbox item element */ declare const PlusDropDownItem: React.ForwardRefExoticComponent; interface PlusDropdownProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Disables the dropdown interaction */ disabled?: boolean; /** Sets the size of the dropdown button - sm: Small size - md: Medium size - lg: Large size */ size?: PlusDropdown$1["size"]; /** Sets the status/color variant of the dropdown button - default: Neutral color scheme - primary: Primary color scheme - success: Green color scheme - warning: Yellow color scheme - danger: Red color scheme - info: Blue color scheme */ status?: PlusDropdown$1["status"]; /** Determines the visual style of the dropdown button - filled: Solid background color - outlined: Transparent background with border - dashed: Transparent background with dashed border - text: No background or border */ kind?: PlusDropdown$1["kind"]; /** Sets the text content of the dropdown button if no default slot is provided */ text?: PlusDropdown$1["text"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the dropdown is opened */ onPlusDropdownOpen?: (event: CustomEvent) => void; /** Emitted when the dropdown is closed */ onPlusDropdownClose?: (event: CustomEvent) => void; /** Emitted when an item is selected with the selected item in detail */ onPlusDropdownSelectedItem?: (event: CustomEvent) => void; } /** * * --- * * * ### **Events:** * - **plus-dropdown-open** - Emitted when the dropdown is opened * - **plus-dropdown-close** - Emitted when the dropdown is closed * - **plus-dropdown-selected-item** - Emitted when an item is selected with the selected item in detail * * ### **Slots:** * - _default_ - The default slot for the dropdown trigger button content * - **suffix** - Slot for adding content to the right side of the trigger button * - **dropdown-item** - Slot for dropdown menu items * * ### **CSS Parts:** * - **base** - The component's base wrapper * - **button** - The dropdown trigger button * - **dropdown-box** - The dropdown list container */ declare const PlusDropdown: React.ForwardRefExoticComponent; interface PlusTooltipProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Sets the size of the tooltip. - sm: Small size - md: Medium size - lg: Large size */ size?: PlusTooltip$1["size"]; /** The text content displayed inside the tooltip. */ message?: PlusTooltip$1["message"]; /** The trigger event for the tooltip. - hover: Tooltip appears on hover. - click: Tooltip appears on click. */ trigger?: PlusTooltip$1["trigger"]; /** The tooltip placement relative to the target element. - top, bottom, left, right */ orientation?: PlusTooltip$1["orientation"]; /** undefined */ hideDelay?: PlusTooltip$1["hideDelay"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * * --- * */ declare const PlusTooltip: React.ForwardRefExoticComponent; interface PlusInputProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Whether the input should have a clear button */ clearable?: boolean; /** Whether the input is disabled */ disabled?: boolean; /** Whether the input is readonly */ readonly?: boolean; /** Whether the input is required */ required?: boolean; /** Whether to show a password toggle button */ passwordToggle?: boolean; /** Whether the password is visible */ passwordVisible?: boolean; /** Whether the input is in an error state */ error?: boolean; /** Whether the input should automatically get focus */ autoFocus?: boolean | undefined; /** Whether spellcheck is enabled */ spellCheck?: boolean | undefined; /** Whether the input should take up full width */ fullWidth?: boolean; /** The type of input */ type?: PlusInput$1["type"]; /** The name of the input */ name?: PlusInput$1["name"]; /** The value of the input */ value?: PlusInput$1["value"]; /** The placeholder text */ placeholder?: PlusInput$1["placeholder"]; /** The size of the input */ size?: PlusInput$1["size"]; /** The label for the input */ label?: PlusInput$1["label"]; /** The validation pattern for the input */ pattern?: PlusInput$1["pattern"]; /** The minimum length of the input value */ minlength?: PlusInput$1["minlength"]; /** The maximum length of the input value */ maxlength?: PlusInput$1["maxlength"]; /** The minimum value of the input */ min?: PlusInput$1["min"]; /** The maximum value of the input */ max?: PlusInput$1["max"]; /** The step value for numeric inputs */ step?: PlusInput$1["step"]; /** Whether autocorrect is enabled */ autocorrect?: PlusInput$1["autocorrect"]; /** The autocomplete attribute */ autocomplete?: PlusInput$1["autocomplete"]; /** The enterkeyhint attribute */ enterkeyhint?: PlusInput$1["enterkeyhint"]; /** The inputmode attribute */ inputmode?: PlusInput$1["inputmode"]; /** Caption text to display below the input */ caption?: PlusInput$1["caption"]; /** The error message to display */ errorMessage?: PlusInput$1["errorMessage"]; /** Icon name for the prefix icon */ prefixIcon?: PlusInput$1["prefixIcon"]; /** Icon name for the suffix icon */ suffixIcon?: PlusInput$1["suffixIcon"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the input value changes */ onPlusInput?: (event: CustomEvent) => void; /** Emitted when the input value changes and the input loses focus */ onPlusChange?: (event: CustomEvent) => void; /** Emitted when the input gains focus */ onPlusFocus?: (event: CustomEvent) => void; /** Emitted when the input loses focus */ onPlusBlur?: (event: CustomEvent) => void; /** Emitted when the clear button is clicked */ onPlusClear?: (event: CustomEvent) => void; /** Emitted when the password visibility is toggled */ onPlusPasswordToggle?: (event: CustomEvent) => void; /** Emitted when the input value is invalid */ onPlusInvalid?: (event: CustomEvent) => void; } /** * Form input component that provides various input types, validation, and styling features. * --- * * * ### **Events:** * - **plus-input** - Emitted when the input value changes * - **plus-change** - Emitted when the input value changes and the input loses focus * - **plus-focus** - Emitted when the input gains focus * - **plus-blur** - Emitted when the input loses focus * - **plus-clear** - Emitted when the clear button is clicked * - **plus-password-toggle** - Emitted when the password visibility is toggled * - **plus-invalid** - Emitted when the input value is invalid * * ### **Methods:** * - **checkValidity(): _boolean_** - Checks the validity of the input against constraints. * - **reportValidity(): _boolean_** - Reports the validity of the input. If the input is invalid, * it dispatches an 'invalid' event and focuses the input. * - **setCustomValidity(message: _string_): _void_** - Sets a custom validation message for the input. * * ### **Slots:** * - **prefix** - Content to be placed before the input * - **suffix** - Content to be placed after the input * * ### **CSS Parts:** * - **input** - The native input element * - **wrapper** - The input wrapper element * - **prefix** - The prefix container * - **suffix** - The suffix container * - **clear-button** - The clear button * - **password-toggle** - The password visibility toggle button */ declare const PlusInput: React.ForwardRefExoticComponent; interface PlusPopconfirmProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Determines whether a status icon should be displayed in the popconfirm. */ statusIcon?: boolean; /** Determines whether the arrow should be displayed. */ showArrow?: boolean; /** The size of the popconfirm. Available options: - `sm` (small) - `md` (medium - default) - `lg` (large) */ size?: PlusPopconfirm$1["size"]; /** The position of the popconfirm relative to the target element. Available options: - `top` (default) - `top-start` - `top-end` - `bottom` - `bottom-start` - `bottom-end` - `left` - `left-start` - `left-end` - `right` - `right-start` - `right-end` */ orientation?: PlusPopconfirm$1["orientation"]; /** Determines how the popconfirm is triggered. Available options: - `click` (default) - Popconfirm toggles on click. - `hover` - Popconfirm appears on hover. */ trigger?: PlusPopconfirm$1["trigger"]; /** The title of the popconfirm. */ title?: PlusPopconfirm$1["title"]; /** The text for the confirm button. */ confirmText?: PlusPopconfirm$1["confirmText"]; /** The text for the cancel button. */ cancelText?: PlusPopconfirm$1["cancelText"]; /** The status of the popconfirm, which affects its styling. Available options: - `success` (green) - `warning` (yellow) - `danger` (red) - `info` (blue) - `primary` (default theme color) - `default` (gray - default) */ status?: PlusPopconfirm$1["status"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the popconfirm is opened */ onPlusPopconfirmOpen?: (event: CustomEvent) => void; /** Emitted when the popconfirm is closed */ onPlusPopconfirmClose?: (event: CustomEvent) => void; /** Emitted when the confirm button is clicked */ onPlusPopconfirmConfirm?: (event: CustomEvent) => void; /** Emitted when the cancel button is clicked */ onPlusPopconfirmCancel?: (event: CustomEvent) => void; } /** * Popconfirm component that displays a confirmation dialog in a floating panel. * --- * * * ### **Events:** * - **plus-popconfirm-open** - Emitted when the popconfirm is opened * - **plus-popconfirm-close** - Emitted when the popconfirm is closed * - **plus-popconfirm-confirm** - Emitted when the confirm button is clicked * - **plus-popconfirm-cancel** - Emitted when the cancel button is clicked * * ### **Slots:** * - _default_ - The target element that triggers the popconfirm * - **icon** - Custom icon for the popconfirm * - **title** - The popconfirm title * - **header** - The entire header section * - **footer** - The footer section with action buttons * - **content** - The main content inside the popconfirm * * ### **CSS Parts:** * - **popconfirm** - The popconfirm container element * - **arrow** - The popconfirm arrow indicator * - **header** - The popconfirm header section * - **title** - The popconfirm title * - **content** - The main content inside the popconfirm * - **footer** - The footer section with action buttons */ declare const PlusPopconfirm: React.ForwardRefExoticComponent; interface PlusTextProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Defines the visual style and semantic meaning of the text. - `display`: For large, prominent display text (rendered as div). - `heading1`: For the main heading (rendered as h1). - `heading2`: For secondary headings (rendered as h2). - `title1`: For primary titles (rendered as h3 - adjust as needed). - `title2`: For secondary titles (rendered as h4 - adjust as needed). - `body`: For standard body text (rendered as p) (default). - `body-accent`: For emphasized body text (rendered as p). - `helper`: For helper text, often used with form elements (rendered as div). - `caption`: For small caption text (rendered as div). */ kind?: PlusText$1["kind"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * * --- * * * ### **Slots:** * - _default_ - The default slot for the text content. * * ### **CSS Properties:** * - **--i-text-color** - Inherited text color variable. _(default: undefined)_ * * ### **CSS Parts:** * - **base** - The component's base wrapper element (e.g., h1, p, div). */ declare const PlusText: React.ForwardRefExoticComponent; interface PlusBreadcrumbItemProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** The URL to navigate to when the item is clicked. If omitted, the item is rendered as text. */ href?: PlusBreadcrumbItem$1["href"]; /** Name of the optional icon to display before the label. Used only if the `prefix` slot is empty. */ prefixIcon?: PlusBreadcrumbItem$1["prefixIcon"]; /** Name of the optional icon to display after the label. Used only if the `suffix` slot is empty. */ suffixIcon?: PlusBreadcrumbItem$1["suffixIcon"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * * --- * * * ### **Slots:** * - _default_ - The default slot for the item's label content. * - **prefix** - Optional slot for content/icon to display before the label. Overrides `prefix-icon` property. * - **suffix** - Optional slot for content/icon to display after the label. Overrides `suffix-icon` property. * * ### **CSS Parts:** * - **base** - The component's base wrapper element. * - **link** - The `plus-link` element (if `href` is provided). * - **text** - The `span` element (if `href` is not provided). * - **prefix** - The prefix container (slot or icon). * - **suffix** - The suffix container (slot or icon). * - **separator** - The separator element. */ declare const PlusBreadcrumbItem: React.ForwardRefExoticComponent; interface PlusBreadcrumbProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Defines the visual style of the breadcrumb container. */ kind?: PlusBreadcrumb$1["kind"]; /** The type of separator to display between items. */ separator?: PlusBreadcrumb$1["separator"]; /** The size of the breadcrumb items and separators. */ size?: PlusBreadcrumb$1["size"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * * --- * * * ### **Slots:** * - _default_ - Default slot for `plus-breadcrumb-item` elements. * * ### **CSS Parts:** * - **base** - The main container element (`nav`). */ declare const PlusBreadcrumb: React.ForwardRefExoticComponent; interface PlusCheckboxProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Whether the checkbox is checked. */ checked?: boolean; /** Whether the checkbox is in an indeterminate state. */ indeterminate?: boolean; /** Whether the checkbox is disabled. */ disabled?: boolean; /** If true, the checkbox is displayed in an error state. */ error?: boolean; /** The checkbox's name, submitted as a name/value pair with form data. */ name?: PlusCheckbox$1["name"]; /** The size of the checkbox. */ size?: PlusCheckbox$1["size"]; /** The value associated with the checkbox. Submitted with the form data if checked. */ value?: PlusCheckbox$1["value"]; /** The text label displayed next to the checkbox. If not provided, use the default slot. */ text?: PlusCheckbox$1["text"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the checkbox's checked state changes. */ onPlusChange?: (event: CustomEvent) => void; /** Emitted when the checkbox gains focus. */ onPlusFocus?: (event: CustomEvent) => void; /** Emitted when the checkbox loses focus. */ onPlusBlur?: (event: CustomEvent) => void; } /** * * --- * * * ### **Events:** * - **plus-change** - Emitted when the checkbox's checked state changes. * - **plus-focus** - Emitted when the checkbox gains focus. * - **plus-blur** - Emitted when the checkbox loses focus. * * ### **Methods:** * - **formResetCallback()** - Called when the associated form is reset. * Resets the checkbox to its initial checked state. * We need to specific attribute initialChecked * - **formDisabledCallback(disabled: _boolean_)** - Called when the disabled state of the parent form changes. * - **click()** - Clicks the checkbox * - **focus(options: _FocusOptions_)** - Focuses the checkbox * - **blur()** - Blurs the checkbox * * ### **Slots:** * - _default_ - The label for the checkbox. * * ### **CSS Properties:** * - **--checkbox-size** - Controls the size of the checkbox control. Typically maps to sm, md, lg tokens. _(default: undefined)_ * - **--checkbox-color-default** - Default background color. _(default: undefined)_ * - **--checkbox-color-checked** - Background color when checked. _(default: undefined)_ * - **--checkbox-color-border** - Border color. _(default: undefined)_ * - **--checkbox-color-border-checked** - Border color when checked. _(default: undefined)_ * - **--checkbox-color-icon** - Color of the checkmark/indeterminate icon. _(default: undefined)_ * - **--checkbox-border-color-error** - Border color in the error state. _(default: undefined)_ * * ### **CSS Parts:** * - **base** - The component's base wrapper (label). * - **control** - The container for the actual checkbox input and its visual representation. * - **checkbox** - The visual representation of the checkbox. * - **icon** - The checkmark or indeterminate icon. * - **label** - The text label container. */ declare const PlusCheckbox: React.ForwardRefExoticComponent; interface PlusCheckboxGroupProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Whether to display the checkboxes vertically. */ vertical?: boolean; /** Whether the entire group is disabled. */ disabled?: boolean; /** The selected values in the group. */ value?: PlusCheckboxGroup$1["value"]; /** The size of the checkboxes in the group. */ size?: PlusCheckboxGroup$1["size"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the value of the group changes (any checkbox is checked/unchecked). */ onPlusChange?: (event: CustomEvent) => void; } /** * * --- * * * ### **Events:** * - **plus-change** - Emitted when the value of the group changes (any checkbox is checked/unchecked). * * ### **Slots:** * - _default_ - Default slot for `plus-checkbox` elements. * * ### **CSS Parts:** * - **base** - The main container element. */ declare const PlusCheckboxGroup: React.ForwardRefExoticComponent; interface PlusTextareaProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Whether the textarea is disabled. */ disabled?: boolean; /** Whether the textarea is readonly. */ readonly?: boolean; /** Whether the textarea is required. */ required?: boolean; /** Whether the textarea should automatically get focus. */ autoFocus?: boolean | undefined; /** Whether the textarea is in an error state. */ error?: boolean; /** Whether the textarea should take up full width. */ fullWidth?: boolean; /** The textarea's name attribute. */ name?: PlusTextarea$1["name"]; /** The textarea's value attribute. */ value?: PlusTextarea$1["value"]; /** The textarea's placeholder text. */ placeholder?: PlusTextarea$1["placeholder"]; /** The size variant of the textarea. */ size?: PlusTextarea$1["size"]; /** The label for the textarea. */ label?: PlusTextarea$1["label"]; /** The minimum length of the value. */ minlength?: PlusTextarea$1["minlength"]; /** The maximum length of the value. */ maxlength?: PlusTextarea$1["maxlength"]; /** Caption text to display below the textarea. */ caption?: PlusTextarea$1["caption"]; /** The error message to display (overrides default validation messages). */ errorMessage?: PlusTextarea$1["errorMessage"]; /** Specifies the visible number of lines in a text area. */ rows?: PlusTextarea$1["rows"]; /** Controls how the textarea can be resized. */ resize?: PlusTextarea$1["resize"]; /** Specifies how the text in a text area is to be wrapped when submitted in a form. */ wrap?: PlusTextarea$1["wrap"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the textarea value changes */ onPlusInput?: (event: CustomEvent) => void; /** Emitted when the textarea value changes and loses focus */ onPlusChange?: (event: CustomEvent) => void; /** Emitted when the textarea gains focus */ onPlusFocus?: (event: CustomEvent) => void; /** Emitted when the textarea loses focus */ onPlusBlur?: (event: CustomEvent) => void; /** Emitted when the textarea value is invalid */ onPlusInvalid?: (event: CustomEvent) => void; } /** * A form-associated textarea component with validation and styling. * --- * * * ### **Events:** * - **plus-input** - Emitted when the textarea value changes * - **plus-change** - Emitted when the textarea value changes and loses focus * - **plus-focus** - Emitted when the textarea gains focus * - **plus-blur** - Emitted when the textarea loses focus * - **plus-invalid** - Emitted when the textarea value is invalid * * ### **Methods:** * - **checkValidity(): _boolean_** - Checks the validity of the textarea against constraints. * - **reportValidity(): _boolean_** - Reports the validity state to the user. * - **setCustomValidity(message: _string_): _void_** - Sets a custom validation message. * * ### **CSS Properties:** * - **--focus-ring-color** - Color of the focus ring _(default: --primary-500)_ * - **--error-color** - Color used for error states _(default: --red-500)_ * * ### **CSS Parts:** * - **textarea** - The native textarea element * - **label** - The label element * - **caption** - The caption/error message container */ declare const PlusTextarea: React.ForwardRefExoticComponent; interface PlusRatingProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** undefined */ readonly?: boolean; /** undefined */ disabled?: boolean; /** undefined */ required?: boolean; /** undefined */ value?: PlusRating$1["value"]; /** undefined */ max?: PlusRating$1["max"]; /** undefined */ precision?: PlusRating$1["precision"]; /** undefined */ size?: PlusRating$1["size"]; /** undefined */ name?: PlusRating$1["name"]; /** The name of the icon to use for empty rating items. */ emptyIconName?: PlusRating$1["emptyIconName"]; /** The name of the icon to use for filled rating items. */ filledIconName?: PlusRating$1["filledIconName"]; /** The label for the rating component. */ label?: PlusRating$1["label"]; /** The caption text displayed below the rating. */ caption?: PlusRating$1["caption"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the rating value changes via user interaction. */ onPlusChange?: (event: CustomEvent) => void; /** Emitted when the user hovers over a star, includes the potential value. */ onPlusHover?: (event: CustomEvent) => void; } /** * A rating component to display and optionally set a rating value. * --- * * * ### **Events:** * - **plus-change** - Emitted when the rating value changes via user interaction. * - **plus-hover** - Emitted when the user hovers over a star, includes the potential value. * * ### **Methods:** * - **reportValidity(): _boolean_** - Checks validity and sets the error state. Returns true if valid, false otherwise. * * ### **CSS Properties:** * - **--star-color-active** - Color of active/selected stars. _(default: --color-warning-500)_ * - **--star-color-inactive** - Color of inactive stars. _(default: --color-neutral-300)_ * - **--star-color-hover** - Color of stars on hover. _(default: --plus-color-text-primary)_ * * ### **CSS Parts:** * - **host** - The main container element. * - **star-container** - The container for each star. * - **star-icon** - Each individual star icon. * - **star-partial** - The element used to display partial stars. */ declare const PlusRating: React.ForwardRefExoticComponent; interface PlusToastProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Determines if the dismiss button is shown. */ dismiss?: boolean; /** Shows the default status icon. */ statusIcon?: boolean; /** The size of the toast. */ size?: PlusToast$1["size"]; /** The visual style of the toast. */ kind?: PlusToast$1["kind"]; /** The status variant of the toast, controlling color and icon. */ status?: PlusToast$1["status"]; /** undefined */ header?: PlusToast$1["header"]; /** Optional custom icon name (e.g., 'fa-solid fa-star') or SVG string. Overrides the default status icon. Ignored if the 'icon' slot is used. */ icon?: PlusToast$1["icon"]; /** undefined */ message?: PlusToast$1["message"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the toast is closed by the user via the close button. */ onPlusClose?: (event: CustomEvent) => void; } /** * Displays short, temporary messages. * --- * * * ### **Events:** * - **plus-close** - Emitted when the toast is closed by the user via the close button. * * ### **Slots:** * - _default_ - The default slot for the toast message content. If both message and header properties are set, this slot is ignored. * - **header** - Optional header content for the toast. Overrides the header property. * - **icon** - Optional icon content to replace the default status icon. * * ### **CSS Properties:** * - **--toast-border-radius** - Controls the border radius of the toast. _(default: undefined)_ * - **--toast-padding** - Controls the padding of the toast. _(default: undefined)_ * - **--icon-size** - Controls the size of the status icon. _(default: undefined)_ * - **--close-button-size** - Controls the size of the close button. _(default: undefined)_ * * ### **CSS Parts:** * - **base** - The component's base wrapper. * - **container** - The main container for icon, content, and close button. * - **icon** - The container for the status icon. * - **content** - The container for header and message text. * - **header** - The header text element. * - **message** - The message text element. * - **close-button** - The close button container. */ declare const PlusToast: React.ForwardRefExoticComponent; interface PlusToastContainerProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** The position the container is responsible for. Only toasts targeted for this position via ToastService will be displayed. */ position?: PlusToastContainer$1["position"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * A container element that listens to the ToastService to display toast notifications. * --- * * * ### **Slots:** * - _default_ - Toast components are rendered here based on ToastService updates. * * ### **CSS Properties:** * - **--toast-container-gap** - Controls the gap between toasts within the container. _(default: undefined)_ * - **--toast-container-z-index** - Controls the stack order of the container. _(default: undefined)_ * * ### **CSS Parts:** * - **base** - The component's base wrapper. */ declare const PlusToastContainer: React.ForwardRefExoticComponent; interface PlusServiceProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * A utility component to automatically set up the UI infrastructure for global services. * Currently sets up the necessary containers for the ToastService. * Place this component once at the root of your application. * --- * */ declare const PlusService: React.ForwardRefExoticComponent; interface PlusSelectItemProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Disables the select item, preventing interaction. When disabled, the item cannot be clicked or selected. */ disabled?: boolean; /** Indicates whether the select item is currently selected. The selected state is managed by the parent PlusSelect component. */ selected?: boolean; /** Sets the size of the select item. */ size?: PlusSelectItem$1["size"]; /** Sets the text content of the select item. If provided, this will be used as the item's content and as the aria-label for accessibility. If not provided, the slotted content is used for accessibility. */ text?: PlusSelectItem$1["text"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the select item is clicked, handled by the parent PlusSelect component */ onClick?: (event: CustomEvent) => void; } /** * A select item component that represents a selectable option within a select menu. * Automatically registers itself as a select-item slot in the parent PlusSelect component. * --- * * * ### **Events:** * - **click** - Emitted when the select item is clicked, handled by the parent PlusSelect component * * ### **Slots:** * - _default_ - The default slot for select item content * * ### **CSS Properties:** * - **--i-bg-default** - Controls the default background color _(default: undefined)_ * - **--i-bg-hovered** - Controls the background color when hovered _(default: undefined)_ * - **--i-bg-pressed** - Controls the background color when pressed _(default: undefined)_ * - **--i-text-color** - Controls the text color _(default: undefined)_ * - **--i-selected-bg** - Controls the background color when selected _(default: undefined)_ * * ### **CSS Parts:** * - **base** - The component's base wrapper * - **item** - The listbox item element */ declare const PlusSelectItem: React.ForwardRefExoticComponent; interface PlusSelectProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Indicates if the select is in an error state. */ error?: boolean; /** Disables the select, preventing interaction. */ disabled?: boolean; /** Marks the select as required. */ required?: boolean; /** Makes the select read-only, preventing changes. */ readonly?: boolean; /** Enables a clear button to reset the selection. */ clearable?: boolean; /** Makes the select full width. */ fullWidth?: boolean; /** Sets the size of the select button. */ size?: PlusSelect$1["size"]; /** Placeholder text for the select trigger input. */ placeholder?: PlusSelect$1["placeholder"]; /** Label text for the select. */ label?: PlusSelect$1["label"]; /** Caption text displayed below the select. */ caption?: PlusSelect$1["caption"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the select is opened */ onPlusSelectOpen?: (event: CustomEvent) => void; /** Emitted when the select is closed */ onPlusSelectClose?: (event: CustomEvent) => void; /** Emitted when an item is selected, with the selected item in detail */ onPlusSelectSelectedItem?: (event: CustomEvent) => void; } /** * A select component that provides a collapsible menu with selectable options. * Uses Floating UI for intelligent positioning of the select menu. * --- * * * ### **Events:** * - **plus-select-open** - Emitted when the select is opened * - **plus-select-close** - Emitted when the select is closed * - **plus-select-selected-item** - Emitted when an item is selected, with the selected item in detail * * ### **Slots:** * - _default_ - The default slot for the select trigger button content * - **suffix** - Slot for adding content to the right side of the trigger button * - **select-item** - Slot for select menu items * * ### **CSS Parts:** * - **base** - The component's base wrapper * - **select** - The select trigger input * - **select-box** - The select list container */ declare const PlusSelect: React.ForwardRefExoticComponent; interface PlusToggleProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** undefined */ checked?: boolean; /** undefined */ error?: boolean; /** undefined */ disabled?: boolean; /** undefined */ readonly?: boolean; /** undefined */ required?: boolean; /** undefined */ fullWidth?: boolean; /** undefined */ name?: PlusToggle$1["name"]; /** undefined */ value?: PlusToggle$1["value"]; /** undefined */ size?: PlusToggle$1["size"]; /** undefined */ label?: PlusToggle$1["label"]; /** undefined */ caption?: PlusToggle$1["caption"]; /** undefined */ text?: PlusToggle$1["text"]; /** undefined */ textPosition?: PlusToggle$1["textPosition"]; /** undefined */ toggleIcon?: PlusToggle$1["toggleIcon"]; /** undefined */ toggleActiveIcon?: PlusToggle$1["toggleActiveIcon"]; /** undefined */ toggleInActiveIcon?: PlusToggle$1["toggleInActiveIcon"]; /** undefined */ errorMessage?: PlusToggle$1["errorMessage"]; /** undefined */ animation?: PlusToggle$1["animation"]; /** undefined */ customAriaLabel?: PlusToggle$1["customAriaLabel"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when the toggle state changes */ onPlusChange?: (event: CustomEvent) => void; /** Emitted when the toggle state changes (for input event compatibility) */ onPlusInput?: (event: CustomEvent) => void; /** Emitted when the toggle gains focus */ onPlusFocus?: (event: CustomEvent) => void; /** Emitted when the toggle loses focus */ onPlusBlur?: (event: CustomEvent) => void; /** Emitted when the toggle validation fails */ onPlusInvalid?: (event: CustomEvent) => void; } /** * Toggle component that provides a switch with various styles and states. * --- * * * ### **Events:** * - **plus-change** - Emitted when the toggle state changes * - **plus-input** - Emitted when the toggle state changes (for input event compatibility) * - **plus-focus** - Emitted when the toggle gains focus * - **plus-blur** - Emitted when the toggle loses focus * - **plus-invalid** - Emitted when the toggle validation fails * * ### **Methods:** * - **checkValidity(): __** - Checks the validity of the toggle input * - **reportValidity(): __** - Reports the validity of the toggle input * - **setCustomValidity(message: _string_): _void_** - Sets a custom validity message for the toggle * * ### **Slots:** * - _default_ - The default slot for toggle text content when no text property is specified * * ### **CSS Properties:** * - **--text-color** - Controls the text color _(default: undefined)_ * - **--border-color** - Controls the border color of the toggle _(default: undefined)_ * - **--switch-bg** - Controls the background color of the switch _(default: undefined)_ * - **--switch-bg-hover** - Controls the background color when hovered _(default: undefined)_ * - **--switch-bg-active** - Controls the background color when pressed _(default: undefined)_ * - **--dot-bg** - Controls the background color of the dot _(default: undefined)_ * - **--dot-text** - Controls the text color of the icon in the dot _(default: undefined)_ * * ### **CSS Parts:** * - **base** - The component's base wrapper * - **label** - The label element * - **control** - The control element containing the toggle and text * - **switch** - The switch element * - **dot** - The dot element inside the switch * - **text** - The text element * - **icon** - The icon element when an icon is used * - **caption** - The caption element */ declare const PlusToggle: React.ForwardRefExoticComponent; interface PlusTabProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Indicates if the tab is currently selected */ active?: boolean; /** Disables the tab interaction */ disabled?: boolean; /** Enables the dismiss button to remove the tab */ dismissible?: boolean; /** Truncates the text if it's too long */ truncate?: boolean; /** Use animated indicator instead of border for active tab This is controlled by the parent tab-group */ animated?: boolean; /** Sets the value of the tab, used for identification and selection */ value?: PlusTab$1["value"]; /** Sets the size of the tab - sm: Small size - md: Medium size - lg: Large size */ size?: PlusTab$1["size"]; /** Sets the orientation of the tabs - horizontal: Tabs arranged horizontally - vertical: Tabs arranged vertically */ orientation?: PlusTab$1["orientation"]; /** Icon name to display before the tab content */ prefixIcon?: PlusTab$1["prefixIcon"]; /** Icon name to display after the tab content */ suffixIcon?: PlusTab$1["suffixIcon"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * Tab component that represents a single tab in a tab group. * --- * * * ### **Slots:** * - _default_ - The default slot for tab content * - **prefix** - Content to be placed before the tab content * - **suffix** - Content to be placed after the tab content * * ### **CSS Properties:** * - **--text-color** - Controls the text color of the tab _(default: undefined)_ * - **--active-color** - Controls the color of the active indicator _(default: undefined)_ * - **--bg-default** - Controls the default background color _(default: undefined)_ * - **--bg-hovered** - Controls the background color when hovered _(default: undefined)_ * * ### **CSS Parts:** * - **tab** - The component's base wrapper */ declare const PlusTab: React.ForwardRefExoticComponent; interface PlusTabPanelProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Indicates whether the panel is currently active/visible. */ active?: boolean; /** Sets the value of the tab panel, used for matching with a tab */ value?: PlusTabPanel$1["value"]; /** An optional class to apply to the panel container. */ panelClass?: PlusTabPanel$1["panelClass"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; } /** * Tab panel component that displays content associated with a tab. * --- * * * ### **Slots:** * - _default_ - The default slot for tab panel content * * ### **CSS Parts:** * - **panel** - The component's base wrapper */ declare const PlusTabPanel: React.ForwardRefExoticComponent; interface PlusTabGroupProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** Disables all tabs */ disabled?: boolean; /** Allows individual tabs to be dismissed (closed). */ dismissible?: boolean; /** Enables animated sliding indicator for active tab */ animated?: boolean; /** Sets the size of the tabs - sm: Small size - md: Medium size - lg: Large size */ size?: PlusTabGroup$1["size"]; /** Sets the orientation of the tabs - horizontal: Tabs arranged horizontally - vertical: Tabs arranged vertically */ orientation?: PlusTabGroup$1["orientation"]; /** Currently active tab value */ value?: PlusTabGroup$1["value"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: any; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Emitted when a tab is selected with the tab's value */ onPlusTabsChange?: (event: CustomEvent) => void; } /** * Tab group component that manages a set of tabs and panels. * --- * * * ### **Events:** * - **plus-tabs-change** - Emitted when a tab is selected with the tab's value * * ### **Slots:** * - **tablist** - Slot for tabs * - **panels** - Slot for tab panels * * ### **CSS Properties:** * - **--tabs-gap** - Controls the gap between tabs _(default: undefined)_ * - **--tabs-indicator-color** - Controls the color of the active tab indicator _(default: undefined)_ * - **--tabs-indicator-height** - Controls the height of the animated indicator _(default: undefined)_ * * ### **CSS Parts:** * - **group** - The component's base wrapper * - **tablist** - The tabs container * - **panels** - The tab panels container * - **indicator** - The animated indicator element (when animated=true) */ declare const PlusTabGroup: React.ForwardRefExoticComponent; export { PlusAccordion, PlusAccordion$1 as PlusAccordionElement, PlusAccordionGroup, PlusAccordionGroup$1 as PlusAccordionGroupElement, type PlusAccordionGroupProps, type PlusAccordionProps, PlusAlert, PlusAlert$1 as PlusAlertElement, type PlusAlertProps, PlusAvatar, PlusAvatar$1 as PlusAvatarElement, type PlusAvatarProps, PlusBadge, PlusBadge$1 as PlusBadgeElement, type PlusBadgeProps, PlusBreadcrumb, PlusBreadcrumb$1 as PlusBreadcrumbElement, PlusBreadcrumbItem, PlusBreadcrumbItem$1 as PlusBreadcrumbItemElement, type PlusBreadcrumbItemProps, type PlusBreadcrumbProps, PlusButton, PlusButton$1 as PlusButtonElement, PlusButtonGroup, PlusButtonGroup$1 as PlusButtonGroupElement, type PlusButtonGroupProps, type PlusButtonProps, PlusCheckbox, PlusCheckbox$1 as PlusCheckboxElement, PlusCheckboxGroup, PlusCheckboxGroup$1 as PlusCheckboxGroupElement, type PlusCheckboxGroupProps, type PlusCheckboxProps, PlusChip, PlusChip$1 as PlusChipElement, type PlusChipProps, PlusDivider, PlusDivider$1 as PlusDividerElement, type PlusDividerProps, PlusDrawer, PlusDrawer$1 as PlusDrawerElement, type PlusDrawerProps, PlusDropDownItem, PlusDropDownItem$1 as PlusDropDownItemElement, type PlusDropDownItemProps, PlusDropdown, PlusDropdown$1 as PlusDropdownElement, type PlusDropdownProps, PlusIcon, PlusIcon$1 as PlusIconElement, type PlusIconProps, PlusInput, PlusInput$1 as PlusInputElement, type PlusInputProps, PlusLink, PlusLink$1 as PlusLinkElement, type PlusLinkProps, PlusListBoxItem, PlusListBoxItem$1 as PlusListBoxItemElement, type PlusListBoxItemProps, PlusModal, PlusModal$1 as PlusModalElement, type PlusModalProps, PlusPopconfirm, PlusPopconfirm$1 as PlusPopconfirmElement, type PlusPopconfirmProps, PlusPopover, PlusPopover$1 as PlusPopoverElement, type PlusPopoverProps, PlusRadio, PlusRadio$1 as PlusRadioElement, PlusRadioGroup, PlusRadioGroup$1 as PlusRadioGroupElement, type PlusRadioGroupProps, type PlusRadioProps, PlusRating, PlusRating$1 as PlusRatingElement, type PlusRatingProps, PlusSegmentedPicker, PlusSegmentedPicker$1 as PlusSegmentedPickerElement, PlusSegmentedPickerItem, PlusSegmentedPickerItem$1 as PlusSegmentedPickerItemElement, type PlusSegmentedPickerItemProps, type PlusSegmentedPickerProps, PlusSelect, PlusSelect$1 as PlusSelectElement, PlusSelectItem, PlusSelectItem$1 as PlusSelectItemElement, type PlusSelectItemProps, type PlusSelectProps, PlusService, PlusService$1 as PlusServiceElement, type PlusServiceProps, PlusTab, PlusTab$1 as PlusTabElement, PlusTabGroup, PlusTabGroup$1 as PlusTabGroupElement, type PlusTabGroupProps, PlusTabPanel, PlusTabPanel$1 as PlusTabPanelElement, type PlusTabPanelProps, type PlusTabProps, PlusTag, PlusTag$1 as PlusTagElement, type PlusTagProps, PlusText, PlusText$1 as PlusTextElement, type PlusTextProps, PlusTextarea, PlusTextarea$1 as PlusTextareaElement, type PlusTextareaProps, PlusToast, PlusToastContainer, PlusToastContainer$1 as PlusToastContainerElement, type PlusToastContainerProps, PlusToast$1 as PlusToastElement, type PlusToastProps, PlusToggle, PlusToggle$1 as PlusToggleElement, type PlusToggleProps, PlusTooltip, PlusTooltip$1 as PlusTooltipElement, type PlusTooltipProps, Tailwind, Tailwind$1 as TailwindElement, type TailwindProps };