@plusui/library 0.1.0

package/types/custom-element-jsx.d.ts

@@ -0,0 +1,1953 @@
+/**
+ * This type can be used to create scoped tags for your components.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
+ *
+ * declare module "my-library" {
+ *   namespace JSX {
+ *     interface IntrinsicElements
+ *       extends ScopedElements<'test-', ''> {}
+ *   }
+ * }
+ * ```
+ *
+ */
+export type ScopedElements<Prefix extends string = "", Suffix extends string = ""> = {
+  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
+};
+
+type BaseProps = {
+  /** Content added between the opening and closing tags of the element */
+  children?: any;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  className?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** For <label> and <output>, lets you associate the label with some control. */
+  htmlFor?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Keys tell React which array item each component corresponds to */
+  key?: string | number;
+  /** Specifies the language of the element. */
+  lang?: 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;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: unknown | ((e: unknown) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+  style?: Record<string, string | number>;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no";
+};
+
+type BaseEvents = {};
+
+export type PlusAvatarProps = {
+  /** URL of the avatar image */
+  image?: string | undefined;
+  /** Alternative text for the avatar */
+  alt?: string | undefined;
+  /** Shape of the avatar
+- circle: Circular shape
+- square: Square shape with slight rounding */
+  shape?: "circle" | "square";
+  /** Size of the avatar
+Can be a predefined size (xs, sm, md, lg, xl) or custom value */
+  size?: Size | string;
+  /** Icon class to use when no image is available */
+  icon?: string;
+  /** Toggles inverted color scheme */
+  invert?: boolean;
+  /** Text to display as initials when no image is available */
+  text?: string | undefined;
+  /** Strategy to use when image fails to load
+- icon: Shows an icon
+- text: Shows text initials
+- custom: Uses fallback slot content */
+  fallbackStrategy?: "icon" | "text" | "custom";
+};
+
+export type PlusButtonProps = {
+  /** 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?: "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 */
+  status?: "default" | "primary" | "success" | "warning" | "danger" | "info";
+  /** Sets the size of the button
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: "sm" | "md" | "lg";
+  /** Disables the button interaction */
+  disabled?: boolean;
+  /** Shows loading spinner and disables interaction */
+  loading?: boolean;
+  /**  */
+  "full-width"?: boolean;
+};
+
+export type PlusButtonGroupProps = {
+  /** 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. */
+  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 */
+  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 */
+  status?: "default" | "primary" | "success" | "warning" | "danger" | "info";
+  /** Sets the size of the button
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: "sm" | "md" | "lg";
+  /** Disables the button interaction */
+  disabled?: boolean;
+  /** Shows loading spinner and disables interaction */
+  loading?: boolean;
+};
+
+export type PlusIconProps = {
+  /**  */
+  iconName?: IconName | undefined;
+  /**  */
+  prefix?: IconPrefix;
+};
+
+export type PlusBadgeProps = {
+  /** 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?: "default" | "primary" | "success" | "warning" | "danger" | "info";
+  /** Sets the size of the badge
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  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 */
+  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 | undefined;
+  /**  */
+  hasSlot?: boolean;
+};
+
+export type PlusTagProps = {
+  /** Accessible label for the tag (falls back to text content) */
+  "aria-label"?: string;
+  /** ARIA role (defaults to "status") */
+  role?: string;
+  /** Defines the tag's visual state and color scheme */
+  status?: "success" | "warning" | "error" | "info" | "default";
+  /** Controls the tag's size variant */
+  size?: "sm" | "md" | "lg";
+  /** Toggles between light/dark color themes */
+  invert?: boolean;
+  /** Sets the border radius style */
+  radius?: "full" | "medium" | "none";
+  /**  */
+  ariaLabel?: string;
+};
+
+export type PlusSvgIconProps = {
+  /**  */
+  iconName?: IconName | undefined;
+};
+
+export type PlusChipProps = {
+  /** Determines the visual style of the chip
+- filled: Solid background color
+- outlined: Transparent background with border */
+  kind?: "filled" | "outlined";
+  /** Sets the size of the chip
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: "sm" | "md" | "lg";
+  /** Defines the type of chip
+- default: Standard chip
+- avatar: Chip with avatar support */
+  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 */
+  status?: "default" | "success" | "warning" | "danger" | "info";
+  /** Controls the border radius style
+- full: Fully rounded corners
+- rounded: Slightly rounded corners */
+  shape?: "full" | "rounded";
+  /** Toggles inverted color scheme */
+  invert?: boolean;
+  /** Shows/hides the dismiss button */
+  dismiss?: boolean;
+  /** Disables the chip interaction */
+  disabled?: boolean;
+};
+
+export type PlusLinkProps = {
+  /** 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?: "sm" | "md" | "lg" | "inherit";
+  /** 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;
+  /** The URL that the hyperlink points to */
+  href?: string;
+  /** Specifies where to display the linked URL
+Common values: _blank, _self, _parent, _top */
+  target?: string;
+  /** Specifies the relationship between the current document and the linked document
+Common values: nofollow, noopener, noreferrer */
+  rel?: string;
+  /** Sets the link to download the target URL instead of navigating
+Optional value specifies the suggested filename */
+  download?: string;
+  /** 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 underline style of the link
+values:
+- always: always underlined
+- hover: underlined on hover
+- never: never underlined */
+  underline?: "always" | "hover" | "never" | undefined;
+};
+
+export type PlusAlertProps = {
+  /** Determines the visual style of the alert
+- filled: Solid background color
+- outlined: Transparent background with border
+- dashed: Transparent background with dashed border */
+  kind?: "filled" | "outlined" | "dashed";
+  /** The size of the alert */
+  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 */
+  status?: "default" | "success" | "warning" | "danger" | "info";
+  /** 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;
+  /** The message of the alert */
+  message?: string;
+  /** The description of the alert */
+  description?: string;
+  /** The status icon of the alert */
+  statusIcon?: string;
+  /** The dismiss icon of the alert */
+  dismissIcon?: string;
+  /** When true, the alert will be displayed with a full width */
+  "full-width"?: boolean;
+  /** When true, the alert will be hidden */
+  hidden?: boolean;
+
+  /** Emitted when the alert is dismissed */
+  "onplus-dismiss"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusRadioProps = {
+  /** Sets the size of the radio button
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: "sm" | "md" | "lg";
+  /** Defines the text label for the radio button */
+  text?: string | undefined;
+  /** Indicates whether the radio button is checked */
+  checked?: boolean;
+  /** Indicates if the radio button is in an error state */
+  error?: boolean;
+  /** Disables the radio button interaction */
+  disabled?: boolean;
+  /** Makes the radio button readonly (non-interactive but not disabled) */
+  readonly?: boolean;
+  /** The name of the radio button, used for form submission and radio grouping */
+  name?: string;
+  /** Indicates if the radio input is required */
+  required?: boolean;
+  /** The value associated with the radio button */
+  value?: string;
+  /**  */
+  input?: HTMLInputElement;
+  /** Internal state to track if the radio button has focus */
+  hasFocus?: boolean;
+  /** Emitted when the radio button's checked state changes */
+  "onplus-change"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusSegmentedPickerItemProps = {
+  /** Whether the item is checked. */
+  checked?: boolean;
+  /** The status of the item. */
+  status?: "default" | "primary";
+  /** Whether the item is disabled. */
+  disabled?: boolean;
+  /** The shape of the item. */
+  shape?: "square" | "circle";
+  /** The size of the item. */
+  size?: "sm" | "md" | "lg";
+  /** The name of the group this item belongs to. */
+  groupName?: string;
+  /** The value of the item. */
+  value?: string;
+  /**  */
+  internalId?: string;
+};
+
+export type PlusSegmentedPickerProps = {
+  /** The status of the segmented picker. */
+  status?: "default" | "primary";
+  /** The shape of the segmented picker. */
+  shape?: "square" | "circle";
+  /** The size of the segmented picker. */
+  size?: "sm" | "md" | "lg";
+  /**  */
+  slots?: PlusSegmentedPickerItem[];
+  /** Emitted when an item is selected. */
+  "onplus-segmented-picker-item-changed"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusRadioGroupProps = {
+  /**  */
+  name?: string;
+  /**  */
+  value?: string;
+  /**  */
+  disabled?: boolean;
+  /**  */
+  required?: boolean;
+  /** The size of all radio buttons in the group
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: "sm" | "md" | "lg";
+  /** Shows error styling on the radio group */
+  error?: boolean;
+  /** Orientation of the radio buttons
+- horizontal: Radio buttons are arranged side by side
+- vertical: Radio buttons are stacked vertically */
+  orientation?: "horizontal" | "vertical";
+};
+
+export type PlusModalProps = {
+  /** The size of the modal */
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  /** Whether the modal is open */
+  "is-open"?: boolean;
+  /** Whether the modal should take full width */
+  "full-width"?: boolean;
+  /** Whether the modal should close when clicking the backdrop */
+  "close-on-backdrop"?: boolean;
+  /** Whether the modal should close when pressing the Escape key */
+  "close-on-esc"?: boolean;
+  /** The duration of the animation in milliseconds */
+  "animation-duration"?: number;
+};
+
+export type PlusDrawerProps = {
+  /** The size of the drawer */
+  size?: "sm" | "md" | "lg";
+  /** Whether the drawer is open */
+  "is-open"?: boolean;
+  /** The position of the drawer */
+  orientation?: "left" | "right" | "top" | "bottom";
+  /** The duration of the animation in milliseconds */
+  "animation-duration"?: number;
+};
+
+export type PlusAccordionProps = {
+  /** Whether the accordion is expanded */
+  expand?: boolean;
+  /** Whether the accordion is part of a group */
+  "is-grouped"?: boolean;
+  /** Whether the accordion is the last item in a group */
+  "is-last"?: boolean;
+  /** Whether the accordion is the first item in a group */
+  "is-first"?: boolean;
+  /** The size of the accordion */
+  size?: "sm" | "md" | "lg";
+  /** Whether the accordion is disabled */
+  disabled?: boolean;
+
+  /** Emitted when the accordion is toggled */
+  "onplus-accordion-toggle"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusAccordionGroupProps = {
+  /** Whether multiple accordions can be expanded at the same time */
+  multi?: boolean;
+  /** The visual style of the accordion group */
+  kind?: "bordered" | "divided" | "separated";
+  /** The size of the accordions in the group */
+  size?: "sm" | "md" | "lg";
+  /**  */
+  accordions?: Array<Node>;
+};
+
+export type PlusDividerProps = {
+  /** The orientation of the divider. */
+  orientation?: "horizontal" | "vertical";
+  /** The Kind of the divider. */
+  kind?: "solid" | "dashed" | "dotted";
+  /** The position of the text content (only applicable with hasContent=true) */
+  "content-position"?: "left" | "center" | "right";
+  /** The thickness of the divider */
+  thickness?: "thin" | "medium" | "thick";
+  /** Whether the divider has content or not */
+  hasContent?: boolean;
+};
+
+export type PlusPopoverProps = {
+  /** The size of the popover.
+
+Available options:
+- `sm` (small)
+- `md` (medium - default)
+- `lg` (large) */
+  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` */
+  orientation?: PopoverPosition;
+  /** Determines how the popover is triggered.
+
+Available options:
+- `click` (default) - Popover toggles on click.
+- `hover` - Popover appears on hover. */
+  trigger?: "click" | "hover";
+  /** The main text content of the popover.
+
+If a slot with `name="content"` is provided, this text will be ignored. */
+  text?: string;
+  /** The header title of the popover.
+
+If a slot with `name="title"` is provided, this text will be ignored. */
+  "header-text"?: 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) */
+  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. */
+  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;
+  /**  */
+  slots?: Array<HTMLElement>;
+  /** Emitted when the popover is opened */
+  "onplus-popover-open"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the popover is closed */
+  "onplus-popover-close"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the popover is dismissed via close button */
+  "onplus-popover-dismiss"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusListBoxItemProps = {
+  /** Sets the size of the list box item
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: "sm" | "md" | "lg";
+  /** Disables the list box item interaction
+When disabled, the item cannot be clicked or selected */
+  disabled?: boolean;
+  /** Sets the selected state of the list box item
+When selected, the item will display with a highlighted background */
+  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 | undefined;
+
+  /** Emitted when the list box item is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusDropDownItemProps = {
+  /** Sets the size of the dropdown item
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: "sm" | "md" | "lg";
+  /** 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 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 | undefined;
+
+  /** Emitted when the dropdown item is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusDropdownProps = {
+  /** Sets the size of the dropdown button
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  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 */
+  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 */
+  kind?: "filled" | "outlined" | "dashed" | "text";
+  /** Disables the dropdown interaction */
+  disabled?: boolean;
+  /** Sets the text content of the dropdown button if no default slot is provided */
+  text?: string | undefined;
+
+  /** Emitted when the dropdown is opened */
+  "onplus-dropdown-open"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dropdown is closed */
+  "onplus-dropdown-close"?: (e: CustomEvent<never>) => void;
+  /** Emitted when an item is selected with the selected item in detail */
+  "onplus-dropdown-selected-item"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusTooltipProps = {
+  /** Sets the size of the tooltip.
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  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. */
+  trigger?: TooltipTrigger;
+  /** The tooltip placement relative to the target element.
+- top, bottom, left, right */
+  orientation?: TooltipOrientation;
+  /**  */
+  hideDelay?: number;
+  /**  */
+  slots?: Array<HTMLElement>;
+};
+
+export type PlusInputProps = {
+  /** The type of input */
+  type?: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url";
+  /** The name of the input */
+  name?: string;
+  /** The value of the input */
+  value?: string;
+  /** The placeholder text */
+  placeholder?: string;
+  /** The size of the input */
+  size?: "sm" | "md" | "lg";
+  /** 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 */
+  "password-toggle"?: boolean;
+  /** Whether the password is visible */
+  "password-visible"?: boolean;
+  /** The label for the input */
+  label?: string;
+  /** The validation pattern for the input */
+  pattern?: string;
+  /** The minimum length of the input value */
+  minlength?: number;
+  /** The maximum length of the input value */
+  maxlength?: number;
+  /** The minimum value of the input */
+  min?: number | string;
+  /** The maximum value of the input */
+  max?: number | string;
+  /** The step value for numeric inputs */
+  step?: number | "any";
+  /** Whether autocorrect is enabled */
+  autocorrect?: "off" | "on";
+  /** The autocomplete attribute */
+  autocomplete?: string;
+  /** Whether the input should automatically get focus */
+  autoFocus?: boolean;
+  /** The enterkeyhint attribute */
+  enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
+  /** The inputmode attribute */
+  inputmode?: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
+  /** Whether spellcheck is enabled */
+  spellCheck?: boolean;
+  /** Caption text to display below the input */
+  caption?: string;
+  /** Whether the input is in an error state */
+  error?: boolean;
+  /** The error message to display */
+  "error-message"?: string;
+  /** Whether the input should take up full width */
+  "full-width"?: boolean;
+  /** Whether the input is used as part of a select component */
+  isSelect?: boolean;
+  /** Icon name for the prefix icon */
+  "prefix-icon"?: string;
+  /** Icon name for the suffix icon */
+  "suffix-icon"?: string;
+
+  /** Emitted when the input value changes */
+  "onplus-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the input value changes and the input loses focus */
+  "onplus-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the input gains focus */
+  "onplus-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the input loses focus */
+  "onplus-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the clear button is clicked */
+  "onplus-clear"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the password visibility is toggled */
+  "onplus-password-toggle"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the input value is invalid */
+  "onplus-invalid"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusPopconfirmProps = {
+  /** The size of the popconfirm.
+
+Available options:
+- `sm` (small)
+- `md` (medium - default)
+- `lg` (large) */
+  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` */
+  orientation?: PopconfirmPosition;
+  /** Determines how the popconfirm is triggered.
+
+Available options:
+- `click` (default) - Popconfirm toggles on click.
+- `hover` - Popconfirm appears on hover. */
+  trigger?: "click" | "hover";
+  /** The title of the popconfirm. */
+  title?: string;
+  /** The text for the confirm button. */
+  "confirm-text"?: string;
+  /** The text for the cancel button. */
+  "cancel-text"?: 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) */
+  status?: "success" | "warning" | "danger" | "info" | "primary" | "default";
+  /** Determines whether a status icon should be displayed in the popconfirm.
+
+- `true` (default) - An icon representing the status will be displayed.
+- `false` - No icon will be displayed. */
+  "status-icon"?: boolean;
+  /** Determines whether the arrow should be displayed.
+
+- `true` (default) - Arrow will be displayed.
+- `false` - Arrow will be hidden. */
+  "show-arrow"?: boolean;
+  /**  */
+  slots?: Array<HTMLElement>;
+  /** Emitted when the popconfirm is opened */
+  "onplus-popconfirm-open"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the popconfirm is closed */
+  "onplus-popconfirm-close"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the confirm button is clicked */
+  "onplus-popconfirm-confirm"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the cancel button is clicked */
+  "onplus-popconfirm-cancel"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusTextProps = {
+  /** 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?: "display" | "heading1" | "heading2" | "title1" | "title2" | "body" | "body-accent" | "helper" | "caption";
+};
+
+export type PlusBreadcrumbItemProps = {
+  /** The URL to navigate to when the item is clicked. If omitted, the item is rendered as text. */
+  href?: string | undefined;
+  /** Name of the optional icon to display before the label. Used only if the `prefix` slot is empty. */
+  "prefix-icon"?: string | undefined;
+  /** Name of the optional icon to display after the label. Used only if the `suffix` slot is empty. */
+  "suffix-icon"?: string | undefined;
+};
+
+export type PlusBreadcrumbProps = {
+  /** 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";
+};
+
+export type PlusCheckboxProps = {
+  /** The checkbox's name, submitted as a name/value pair with form data. */
+  name?: string | undefined;
+  /** 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;
+  /** If true, the checkbox is displayed in an error state. */
+  error?: boolean;
+  /** The text label displayed next to the checkbox. If not provided, use the default slot. */
+  text?: string | undefined;
+  /**  */
+  input?: HTMLInputElement;
+  /** Emitted when the checkbox's checked state changes. */
+  "onplus-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox gains focus. */
+  "onplus-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox loses focus. */
+  "onplus-blur"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusCheckboxGroupProps = {
+  /** 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;
+
+  /** Emitted when the value of the group changes (any checkbox is checked/unchecked). */
+  "onplus-change"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusTextareaProps = {
+  /** 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 | undefined;
+  /** The minimum length of the value. */
+  minlength?: number | undefined;
+  /** The maximum length of the value. */
+  maxlength?: number | undefined;
+  /** Whether the textarea should automatically get focus. */
+  autoFocus?: boolean | undefined;
+  /** Caption text to display below the textarea. */
+  caption?: string | undefined;
+  /** Whether the textarea is in an error state. */
+  error?: boolean;
+  /** The error message to display (overrides default validation messages). */
+  "error-message"?: string;
+  /** Whether the textarea should take up full width. */
+  "full-width"?: 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";
+  /**  */
+  textarea?: HTMLTextAreaElement;
+  /** Emitted when the textarea value changes */
+  "onplus-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the textarea value changes and loses focus */
+  "onplus-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the textarea gains focus */
+  "onplus-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the textarea loses focus */
+  "onplus-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the textarea value is invalid */
+  "onplus-invalid"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusRatingProps = {
+  /**  */
+  value?: number;
+  /**  */
+  max?: number;
+  /**  */
+  precision?: number;
+  /**  */
+  readonly?: boolean;
+  /**  */
+  disabled?: boolean;
+  /**  */
+  size?: "sm" | "md" | "lg";
+  /**  */
+  name?: string | undefined;
+  /** The name of the icon to use for empty rating items. */
+  "empty-icon-name"?: string;
+  /** The name of the icon to use for filled rating items. */
+  "filled-icon-name"?: string;
+  /** The label for the rating component. */
+  label?: string | undefined;
+  /** The caption text displayed below the rating. */
+  caption?: string | undefined;
+  /**  */
+  required?: boolean;
+
+  /** Emitted when the rating value changes via user interaction. */
+  "onplus-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the user hovers over a star, includes the potential value. */
+  "onplus-hover"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusToastProps = {
+  /** 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. */
+  "status-icon"?: boolean;
+  /**  */
+  header?: string | undefined;
+  /** 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 | undefined;
+  /**  */
+  message?: string | undefined;
+
+  /** Emitted when the toast is closed by the user via the close button. */
+  "onplus-close"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusToastContainerProps = {
+  /** The position the container is responsible for.
+Only toasts targeted for this position via ToastService will be displayed. */
+  position?: PositionType;
+};
+
+export type PlusServiceProps = {};
+
+export type PlusSelectItemProps = {
+  /** Sets the size of the select item. */
+  size?: "sm" | "md" | "lg";
+  /** 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 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 | undefined;
+
+  /** Emitted when the select item is clicked, handled by the parent PlusSelect component */
+  onclick?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusSelectProps = {
+  /** Sets the size of the select button. */
+  size?: "sm" | "md" | "lg";
+  /** Placeholder text for the select trigger input. */
+  placeholder?: string;
+  /** Label text for the select. */
+  label?: string;
+  /** 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;
+  /** Caption text displayed below the select. */
+  caption?: string | undefined;
+  /** Enables a clear button to reset the selection. */
+  clearable?: boolean;
+
+  /** Emitted when the select is opened */
+  "onplus-select-open"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the select is closed */
+  "onplus-select-close"?: (e: CustomEvent<never>) => void;
+  /** Emitted when an item is selected, with the selected item in detail */
+  "onplus-select-selected-item"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusToggleProps = {
+  /**  */
+  name?: string;
+  /**  */
+  value?: string;
+  /**  */
+  checked?: boolean;
+  /**  */
+  size?: "sm" | "md" | "lg";
+  /**  */
+  label?: string | undefined;
+  /**  */
+  caption?: string | undefined;
+  /**  */
+  text?: string | undefined;
+  /**  */
+  "text-position"?: "left" | "right";
+  /**  */
+  "toggle-icon"?: string | undefined;
+  /**  */
+  "toggle-active-icon"?: string | undefined;
+  /**  */
+  "toggle-inactive-icon"?: string | undefined;
+  /**  */
+  "icon-size"?: number | undefined;
+  /**  */
+  error?: boolean;
+  /**  */
+  "error-message"?: string;
+  /**  */
+  disabled?: boolean;
+  /**  */
+  readonly?: boolean;
+  /**  */
+  required?: boolean;
+  /**  */
+  "full-width"?: boolean;
+  /**  */
+  animation?: "default" | "bounce" | "smooth";
+  /**  */
+  "custom-aria-label"?: string | undefined;
+  /**  */
+  input?: HTMLInputElement;
+  /** Emitted when the toggle state changes */
+  "onplus-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the toggle state changes (for input event compatibility) */
+  "onplus-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the toggle gains focus */
+  "onplus-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the toggle loses focus */
+  "onplus-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the toggle validation fails */
+  "onplus-invalid"?: (e: CustomEvent<never>) => void;
+};
+
+export type PlusTabProps = {
+  /** Sets the value of the tab, used for identification and selection */
+  value?: string;
+  /** Indicates if the tab is currently selected */
+  active?: boolean;
+  /** Sets the size of the tab
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: "sm" | "md" | "lg";
+  /** Disables the tab interaction */
+  disabled?: boolean;
+  /** Sets the orientation of the tabs
+- horizontal: Tabs arranged horizontally
+- vertical: Tabs arranged vertically */
+  orientation?: "horizontal" | "vertical";
+  /** Icon to display before the tab content */
+  "prefix-icon"?: string | undefined;
+  /** Icon to display after the tab content */
+  "suffix-icon"?: string | undefined;
+  /** 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;
+};
+
+export type PlusTabPanelProps = {
+  /** Sets the value of the tab panel, used for matching with a tab */
+  value?: string;
+  /** Indicates if the panel is currently visible */
+  active?: boolean;
+  /** Custom CSS class to apply to the panel */
+  panelClass?: string;
+};
+
+export type PlusTabGroupProps = {
+  /** Sets the size of the tabs
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: "sm" | "md" | "lg";
+  /** Sets the orientation of the tabs
+- horizontal: Tabs arranged horizontally
+- vertical: Tabs arranged vertically */
+  orientation?: "horizontal" | "vertical";
+  /** Disables all tabs */
+  disabled?: boolean;
+  /** Enables the dismiss button on all tabs */
+  dismissible?: boolean;
+  /** Currently active tab value */
+  value?: string;
+  /** Enables animated sliding indicator for active tab */
+  animated?: boolean;
+
+  /** Emitted when a tab is selected with the tab's value */
+  "onplus-tabs-change"?: (e: CustomEvent<never>) => void;
+};
+
+export type CustomElements = {
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **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
+   */
+  "plus-avatar": Partial<PlusAvatarProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "plus-button": Partial<PlusButtonProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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)_
+   */
+  "plus-button-group": Partial<PlusButtonGroupProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "plus-icon": Partial<PlusIconProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "plus-badge": Partial<PlusBadgeProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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
+   */
+  "plus-tag": Partial<PlusTagProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "plus-svg-icon": Partial<PlusSvgIconProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **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
+   */
+  "plus-chip": Partial<PlusChipProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **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
+   */
+  "plus-link": Partial<PlusLinkProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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
+   */
+  "plus-alert": Partial<PlusAlertProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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
+   */
+  "plus-radio": Partial<PlusRadioProps & BaseProps & BaseEvents>;
+
+  /**
+   * An item component for the segmented picker.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The content of the item.
+   *
+   * ### **CSS Parts:**
+   *  - **label** - The label element.
+   * - **input** - The input element.
+   */
+  "plus-segmented-picker-item": Partial<PlusSegmentedPickerItemProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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.
+   */
+  "plus-segmented-picker": Partial<PlusSegmentedPickerProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "plus-radio-group": Partial<PlusRadioGroupProps & BaseProps & BaseEvents>;
+
+  /**
+   * Modal dialog component that appears on top of the page content.
+   * ---
+   *
+   *
+   * ### **Methods:**
+   *  - **hide(): _void_** - Hides the modal with animation
+   * - **show(): _void_** - Shows the modal with animation
+   *
+   * ### **Slots:**
+   *  - **header** - The header content of the modal
+   * - **body** - The main content of the modal
+   * - **footer** - The footer content of the modal
+   * - **close** - Custom close button (defaults to an X icon)
+   *
+   * ### **CSS Parts:**
+   *  - **container** - The main container element
+   * - **overlay** - The overlay element
+   * - **modal** - The modal element
+   * - **header** - The header element
+   * - **body** - The body element
+   * - **footer** - The footer element
+   * - **close-button** - The close button element
+   */
+  "plus-modal": Partial<PlusModalProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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
+   */
+  "plus-drawer": Partial<PlusDrawerProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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
+   */
+  "plus-accordion": Partial<PlusAccordionProps & BaseProps & BaseEvents>;
+
+  /**
+   * A container for grouping accordion items together.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **default** - Accordion items to be grouped
+   *
+   * ### **CSS Parts:**
+   *  - **container** - The container element
+   */
+  "plus-accordion-group": Partial<PlusAccordionGroupProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **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
+   */
+  "plus-divider": Partial<PlusDividerProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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
+   */
+  "plus-popover": Partial<PlusPopoverProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **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
+   */
+  "plus-list-box-item": Partial<PlusListBoxItemProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **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
+   */
+  "plus-dropdown-item": Partial<PlusDropDownItemProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **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
+   */
+  "plus-dropdown": Partial<PlusDropdownProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "plus-tooltip": Partial<PlusTooltipProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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
+   */
+  "plus-input": Partial<PlusInputProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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
+   */
+  "plus-popconfirm": Partial<PlusPopconfirmProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **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).
+   */
+  "plus-text": Partial<PlusTextProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **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.
+   */
+  "plus-breadcrumb-item": Partial<PlusBreadcrumbItemProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Default slot for `plus-breadcrumb-item` elements.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The main container element (`nav`).
+   */
+  "plus-breadcrumb": Partial<PlusBreadcrumbProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **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.
+   */
+  "plus-checkbox": Partial<PlusCheckboxProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **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.
+   */
+  "plus-checkbox-group": Partial<PlusCheckboxGroupProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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
+   */
+  "plus-textarea": Partial<PlusTextareaProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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.
+   */
+  "plus-rating": Partial<PlusRatingProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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.
+   */
+  "plus-toast": Partial<PlusToastProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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.
+   */
+  "plus-toast-container": Partial<PlusToastContainerProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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.
+   * ---
+   *
+   */
+  "plus-service": Partial<PlusServiceProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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
+   */
+  "plus-select-item": Partial<PlusSelectItemProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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
+   */
+  "plus-select": Partial<PlusSelectProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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
+   */
+  "plus-toggle": Partial<PlusToggleProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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
+   */
+  "plus-tab": Partial<PlusTabProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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
+   */
+  "plus-tab-panel": Partial<PlusTabPanelProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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)
+   */
+  "plus-tab-group": Partial<PlusTabGroupProps & BaseProps & BaseEvents>;
+};