@plusui/library 0.1.3 → 0.1.5

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

@@ -49,7 +49,7 @@ type PlusAvatarProps = {
   /** 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 name to use when no image is available */
   icon?: string;
   /** Toggles inverted color scheme */
   invert?: boolean;
@@ -122,13 +122,6 @@ When false, each button can have its own properties. */
   loading?: boolean;
 };
 
-type PlusIconProps = {
-  /**  */
-  iconName?: IconName | undefined;
-  /**  */
-  prefix?: IconPrefix;
-};
-
 type PlusBadgeProps = {
   /** Sets the status/color variant of the badge
 - default: Neutral color scheme
@@ -178,9 +171,15 @@ type PlusTagProps = {
   "bind:ariaLabel"?: string;
 };
 
-type PlusSvgIconProps = {
-  /**  */
-  iconName?: IconName | undefined;
+type PlusIconProps = {
+  /** Name of the icon to display */
+  "icon-name"?: IconName;
+  /** Style variant of the icon: solid, regular, or light */
+  "icon-style"?: IconStyle;
+  /** Size variant for the icon */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+  /** Label for accessibility - will be used as aria-label */
+  label?: string | undefined;
 };
 
 type PlusChipProps = {
@@ -296,19 +295,19 @@ type PlusRadioProps = {
   size?: "sm" | "md" | "lg";
   /** Defines the text label for the radio button */
   text?: string | undefined;
-  /** Indicates whether the radio button is checked */
+  /** Whether the radio is checked. */
   checked?: boolean;
-  /** Indicates if the radio button is in an error state */
+  /** Whether the radio is in an error state. */
   error?: boolean;
-  /** Disables the radio button interaction */
+  /** Whether the radio is disabled. */
   disabled?: boolean;
-  /** Makes the radio button readonly (non-interactive but not disabled) */
+  /** Whether the radio is readonly. */
   readonly?: boolean;
-  /** The name of the radio button, used for form submission and radio grouping */
+  /** The radio's name attribute. */
   name?: string;
-  /** Indicates if the radio input is required */
+  /** Whether the radio is required. */
   required?: boolean;
-  /** The value associated with the radio button */
+  /** The radio's value attribute. */
   value?: string;
   /**  */
   "bind:input"?: HTMLInputElement;
@@ -319,11 +318,11 @@ type PlusRadioProps = {
 };
 
 type PlusSegmentedPickerItemProps = {
-  /** Whether the item is checked. */
+  /** The value associated with the item. */
   checked?: boolean;
   /** The status of the item. */
   status?: "default" | "primary";
-  /** Whether the item is disabled. */
+  /** Disables the item, making it non-interactive. */
   disabled?: boolean;
   /** The shape of the item. */
   shape?: "square" | "circle";
@@ -355,16 +354,16 @@ type PlusRadioGroupProps = {
   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 */
   size?: "sm" | "md" | "lg";
-  /** Shows error styling on the radio group */
+  /** Displays the radio buttons in an error state. */
   error?: boolean;
   /** Orientation of the radio buttons
 - horizontal: Radio buttons are arranged side by side
@@ -497,12 +496,12 @@ Available options:
 
 - `true` (default) - An icon representing the status will be displayed.
 - `false` - No icon will be displayed. */
-  statusIcon?: boolean;
+  "status-icon"?: boolean;
   /** Determines whether the arrow should be displayed.
 
 - `true` (default) - Arrow will be displayed.
 - `false` - Arrow will be hidden. */
-  showArrow?: boolean;
+  "show-arrow"?: boolean;
   /**  */
   "bind:slots"?: Array<HTMLElement>;
   /** Emitted when the popover is opened */
@@ -519,11 +518,9 @@ type PlusListBoxItemProps = {
 - 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 */
+  /** Disables the item, making it non-interactive. */
   disabled?: boolean;
-  /** Sets the selected state of the list box item
-When selected, the item will display with a highlighted background */
+  /** 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 */
@@ -609,16 +606,6 @@ type PlusTooltipProps = {
 };
 
 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 */
@@ -631,6 +618,18 @@ type PlusInputProps = {
   "password-toggle"?: boolean;
   /** Whether the password is visible */
   "password-visible"?: boolean;
+  /** Whether the input is in an error state */
+  error?: boolean;
+  /** 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";
   /** The label for the input */
   label?: string;
   /** The validation pattern for the input */
@@ -650,23 +649,19 @@ type PlusInputProps = {
   /** The autocomplete attribute */
   autocomplete?: string;
   /** Whether the input should automatically get focus */
-  autoFocus?: boolean;
+  autoFocus?: boolean | undefined;
   /** 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;
+  spellCheck?: boolean | undefined;
   /** 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 */
@@ -734,15 +729,9 @@ Available options:
 - `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. */
+  /** Determines whether a status icon should be displayed in the popconfirm. */
   "status-icon"?: boolean;
-  /** Determines whether the arrow should be displayed.
-
-- `true` (default) - Arrow will be displayed.
-- `false` - Arrow will be hidden. */
+  /** Determines whether the arrow should be displayed. */
   "show-arrow"?: boolean;
   /**  */
   "bind:slots"?: Array<HTMLElement>;
@@ -979,6 +968,8 @@ type PlusSelectProps = {
   caption?: string | undefined;
   /** Enables a clear button to reset the selection. */
   clearable?: boolean;
+  /** Makes the select full width. */
+  "full-width"?: boolean;
 
   /** Emitted when the select is opened */
   "on:plus-select-open"?: (e: CustomEvent<never>) => void;
@@ -1012,8 +1003,6 @@ type PlusToggleProps = {
   /**  */
   "toggle-inactive-icon"?: string | undefined;
   /**  */
-  "icon-size"?: number | undefined;
-  /**  */
   error?: boolean;
   /**  */
   "error-message"?: string;
@@ -1059,9 +1048,9 @@ type PlusTabProps = {
 - horizontal: Tabs arranged horizontally
 - vertical: Tabs arranged vertically */
   orientation?: "horizontal" | "vertical";
-  /** Icon to display before the tab content */
+  /** Icon name to display before the tab content */
   "prefix-icon"?: string | undefined;
-  /** Icon to display after the tab content */
+  /** Icon name to display after the tab content */
   "suffix-icon"?: string | undefined;
   /** Enables the dismiss button to remove the tab */
   dismissible?: boolean;
@@ -1075,9 +1064,9 @@ This is controlled by the parent tab-group */
 type PlusTabPanelProps = {
   /** Sets the value of the tab panel, used for matching with a tab */
   value?: string;
-  /** Indicates if the panel is currently visible */
+  /** Indicates whether the panel is currently active/visible. */
   active?: boolean;
-  /** Custom CSS class to apply to the panel */
+  /** An optional class to apply to the panel container. */
   panelClass?: string;
 };
 
@@ -1093,7 +1082,7 @@ type PlusTabGroupProps = {
   orientation?: "horizontal" | "vertical";
   /** Disables all tabs */
   disabled?: boolean;
-  /** Enables the dismiss button on all tabs */
+  /** Allows individual tabs to be dismissed (closed). */
   dismissible?: boolean;
   /** Currently active tab value */
   value?: string;
@@ -1143,13 +1132,6 @@ export type CustomElements = {
    */
   "plus-button-group": Partial<PlusButtonGroupProps & BaseProps & BaseEvents>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "plus-icon": Partial<PlusIconProps & BaseProps & BaseEvents>;
-
   /**
    *
    * ---
@@ -1175,8 +1157,16 @@ export type CustomElements = {
    *
    * ---
    *
+   *
+   * ### **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
    */
-  "plus-svg-icon": Partial<PlusSvgIconProps & BaseProps & BaseEvents>;
+  "plus-icon": Partial<PlusIconProps & BaseProps & BaseEvents>;
 
   /**
    *
@@ -1266,6 +1256,9 @@ export type CustomElements = {
    * ### **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.

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

@@ -12,7 +12,7 @@ type PlusAvatarProps = {
   /** 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 name to use when no image is available */
   icon?: string;
   /** Toggles inverted color scheme */
   invert?: boolean;
@@ -85,13 +85,6 @@ When false, each button can have its own properties. */
   loading?: boolean;
 };
 
-type PlusIconProps = {
-  /**  */
-  iconName?: IconName | undefined;
-  /**  */
-  prefix?: IconPrefix;
-};
-
 type PlusBadgeProps = {
   /** Sets the status/color variant of the badge
 - default: Neutral color scheme
@@ -141,9 +134,15 @@ type PlusTagProps = {
   ariaLabel?: string;
 };
 
-type PlusSvgIconProps = {
-  /**  */
-  iconName?: IconName | undefined;
+type PlusIconProps = {
+  /** Name of the icon to display */
+  "icon-name"?: IconName;
+  /** Style variant of the icon: solid, regular, or light */
+  "icon-style"?: IconStyle;
+  /** Size variant for the icon */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+  /** Label for accessibility - will be used as aria-label */
+  label?: string | undefined;
 };
 
 type PlusChipProps = {
@@ -259,19 +258,19 @@ type PlusRadioProps = {
   size?: "sm" | "md" | "lg";
   /** Defines the text label for the radio button */
   text?: string | undefined;
-  /** Indicates whether the radio button is checked */
+  /** Whether the radio is checked. */
   checked?: boolean;
-  /** Indicates if the radio button is in an error state */
+  /** Whether the radio is in an error state. */
   error?: boolean;
-  /** Disables the radio button interaction */
+  /** Whether the radio is disabled. */
   disabled?: boolean;
-  /** Makes the radio button readonly (non-interactive but not disabled) */
+  /** Whether the radio is readonly. */
   readonly?: boolean;
-  /** The name of the radio button, used for form submission and radio grouping */
+  /** The radio's name attribute. */
   name?: string;
-  /** Indicates if the radio input is required */
+  /** Whether the radio is required. */
   required?: boolean;
-  /** The value associated with the radio button */
+  /** The radio's value attribute. */
   value?: string;
   /**  */
   input?: HTMLInputElement;
@@ -282,11 +281,11 @@ type PlusRadioProps = {
 };
 
 type PlusSegmentedPickerItemProps = {
-  /** Whether the item is checked. */
+  /** The value associated with the item. */
   checked?: boolean;
   /** The status of the item. */
   status?: "default" | "primary";
-  /** Whether the item is disabled. */
+  /** Disables the item, making it non-interactive. */
   disabled?: boolean;
   /** The shape of the item. */
   shape?: "square" | "circle";
@@ -318,16 +317,16 @@ type PlusRadioGroupProps = {
   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 */
   size?: "sm" | "md" | "lg";
-  /** Shows error styling on the radio group */
+  /** Displays the radio buttons in an error state. */
   error?: boolean;
   /** Orientation of the radio buttons
 - horizontal: Radio buttons are arranged side by side
@@ -460,12 +459,12 @@ Available options:
 
 - `true` (default) - An icon representing the status will be displayed.
 - `false` - No icon will be displayed. */
-  statusIcon?: boolean;
+  "status-icon"?: boolean;
   /** Determines whether the arrow should be displayed.
 
 - `true` (default) - Arrow will be displayed.
 - `false` - Arrow will be hidden. */
-  showArrow?: boolean;
+  "show-arrow"?: boolean;
   /**  */
   slots?: Array<HTMLElement>;
   /** Emitted when the popover is opened */
@@ -482,11 +481,9 @@ type PlusListBoxItemProps = {
 - 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 */
+  /** Disables the item, making it non-interactive. */
   disabled?: boolean;
-  /** Sets the selected state of the list box item
-When selected, the item will display with a highlighted background */
+  /** 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 */
@@ -572,16 +569,6 @@ type PlusTooltipProps = {
 };
 
 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 */
@@ -594,6 +581,18 @@ type PlusInputProps = {
   "password-toggle"?: boolean;
   /** Whether the password is visible */
   "password-visible"?: boolean;
+  /** Whether the input is in an error state */
+  error?: boolean;
+  /** 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";
   /** The label for the input */
   label?: string;
   /** The validation pattern for the input */
@@ -613,23 +612,19 @@ type PlusInputProps = {
   /** The autocomplete attribute */
   autocomplete?: string;
   /** Whether the input should automatically get focus */
-  autoFocus?: boolean;
+  autoFocus?: boolean | undefined;
   /** 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;
+  spellCheck?: boolean | undefined;
   /** 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 */
@@ -697,15 +692,9 @@ Available options:
 - `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. */
+  /** Determines whether a status icon should be displayed in the popconfirm. */
   "status-icon"?: boolean;
-  /** Determines whether the arrow should be displayed.
-
-- `true` (default) - Arrow will be displayed.
-- `false` - Arrow will be hidden. */
+  /** Determines whether the arrow should be displayed. */
   "show-arrow"?: boolean;
   /**  */
   slots?: Array<HTMLElement>;
@@ -942,6 +931,8 @@ type PlusSelectProps = {
   caption?: string | undefined;
   /** Enables a clear button to reset the selection. */
   clearable?: boolean;
+  /** Makes the select full width. */
+  "full-width"?: boolean;
 
   /** Emitted when the select is opened */
   "onplus-select-open"?: (e: CustomEvent<never>) => void;
@@ -975,8 +966,6 @@ type PlusToggleProps = {
   /**  */
   "toggle-inactive-icon"?: string | undefined;
   /**  */
-  "icon-size"?: number | undefined;
-  /**  */
   error?: boolean;
   /**  */
   "error-message"?: string;
@@ -1022,9 +1011,9 @@ type PlusTabProps = {
 - horizontal: Tabs arranged horizontally
 - vertical: Tabs arranged vertically */
   orientation?: "horizontal" | "vertical";
-  /** Icon to display before the tab content */
+  /** Icon name to display before the tab content */
   "prefix-icon"?: string | undefined;
-  /** Icon to display after the tab content */
+  /** Icon name to display after the tab content */
   "suffix-icon"?: string | undefined;
   /** Enables the dismiss button to remove the tab */
   dismissible?: boolean;
@@ -1038,9 +1027,9 @@ This is controlled by the parent tab-group */
 type PlusTabPanelProps = {
   /** Sets the value of the tab panel, used for matching with a tab */
   value?: string;
-  /** Indicates if the panel is currently visible */
+  /** Indicates whether the panel is currently active/visible. */
   active?: boolean;
-  /** Custom CSS class to apply to the panel */
+  /** An optional class to apply to the panel container. */
   panelClass?: string;
 };
 
@@ -1056,7 +1045,7 @@ type PlusTabGroupProps = {
   orientation?: "horizontal" | "vertical";
   /** Disables all tabs */
   disabled?: boolean;
-  /** Enables the dismiss button on all tabs */
+  /** Allows individual tabs to be dismissed (closed). */
   dismissible?: boolean;
   /** Currently active tab value */
   value?: string;
@@ -1106,13 +1095,6 @@ export type CustomElements = {
    */
   "plus-button-group": DefineComponent<PlusButtonGroupProps>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "plus-icon": DefineComponent<PlusIconProps>;
-
   /**
    *
    * ---
@@ -1138,8 +1120,16 @@ export type CustomElements = {
    *
    * ---
    *
+   *
+   * ### **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
    */
-  "plus-svg-icon": DefineComponent<PlusSvgIconProps>;
+  "plus-icon": DefineComponent<PlusIconProps>;
 
   /**
    *
@@ -1229,6 +1219,9 @@ export type CustomElements = {
    * ### **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.

package/vscode.css-custom-data.json

@@ -27,6 +27,16 @@
       "description": "Text color for default state (inherits from --plus-color-text-default)",
       "values": []
     },
+    {
+      "name": "--icon-size",
+      "description": "Custom icon size (overrides size variants)",
+      "values": []
+    },
+    {
+      "name": "--icon-color",
+      "description": "Custom icon color (overrides currentColor)",
+      "values": []
+    },
     {
       "name": "--text-color",
       "description": "Controls the text color of the chip",
@@ -57,6 +67,11 @@
       "description": "Controls the background color when focused",
       "values": []
     },
+    {
+      "name": "--active-color",
+      "description": "Color of the active indicator",
+      "values": []
+    },
     {
       "name": "--divider-color",
       "description": "Controls the color of the divider",
@@ -320,6 +335,8 @@
       "description": "The container element for the tag"
     },
     { "name": "::part(base)", "description": "The component's base wrapper" },
+    { "name": "::part(icon)", "description": "The SVG icon element" },
+    { "name": "::part(base)", "description": "The component's base wrapper" },
     { "name": "::part(icon)", "description": "The dismiss icon wrapper" },
     { "name": "::part(base)", "description": "The component's base wrapper" },
     { "name": "::part(base)", "description": "The main container element" },