@plusui/library 0.1.3 → 0.1.4

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@plusui/library",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -33,8 +33,8 @@
             },
             {
               "name": "icon",
-              "description": "Icon class to use when no image is available",
-              "value": { "type": "string", "default": "'fa-solid fa-user'" }
+              "description": "Icon name to use when no image is available",
+              "value": { "type": "string", "default": "'user'" }
             },
             {
               "name": "invert",
@@ -90,7 +90,7 @@
               },
               {
                 "name": "icon",
-                "description": "Icon class to use when no image is available",
+                "description": "Icon name to use when no image is available",
                 "type": "string"
               },
               {
@@ -278,26 +278,6 @@
             "events": []
           }
         },
-        {
-          "name": "plus-icon",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            { "name": "iconName", "value": { "type": "IconName | undefined" } },
-            {
-              "name": "prefix",
-              "value": { "type": "IconPrefix", "default": "'fas'" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "iconName", "type": "IconName | undefined" },
-              { "name": "prefix", "type": "IconPrefix" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "plus-badge",
           "description": "\n---\n",
@@ -439,16 +419,57 @@
           }
         },
         {
-          "name": "plus-svg-icon",
-          "description": "\n---\n",
+          "name": "plus-icon",
+          "description": "\n---\n\n\n### **CSS Properties:**\n - **--icon-size** - Custom icon size (overrides size variants) _(default: undefined)_\n- **--icon-color** - Custom icon color (overrides currentColor) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper\n- **icon** - The SVG icon element",
           "doc-url": "",
           "attributes": [
-            { "name": "iconName", "value": { "type": "IconName | undefined" } }
+            {
+              "name": "icon-name",
+              "description": "Name of the icon to display",
+              "value": { "type": "IconName", "default": "''" }
+            },
+            {
+              "name": "icon-style",
+              "description": "Style variant of the icon: solid, regular, or light",
+              "value": { "type": "IconStyle", "default": "'solid'" }
+            },
+            {
+              "name": "size",
+              "description": "Size variant for the icon",
+              "value": {
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'",
+                "default": "'md'"
+              }
+            },
+            {
+              "name": "label",
+              "description": "Label for accessibility - will be used as aria-label",
+              "value": { "type": "string | undefined" }
+            }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "iconName", "type": "IconName | undefined" }
+              {
+                "name": "iconName",
+                "description": "Name of the icon to display",
+                "type": "IconName"
+              },
+              {
+                "name": "iconStyle",
+                "description": "Style variant of the icon: solid, regular, or light",
+                "type": "IconStyle"
+              },
+              {
+                "name": "size",
+                "description": "Size variant for the icon",
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'"
+              },
+              {
+                "name": "label",
+                "description": "Label for accessibility - will be used as aria-label",
+                "type": "string | undefined"
+              }
             ],
             "events": []
           }
@@ -853,37 +874,37 @@
             },
             {
               "name": "checked",
-              "description": "Indicates whether the radio button is checked",
+              "description": "Whether the radio is checked.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "error",
-              "description": "Indicates if the radio button is in an error state",
+              "description": "Whether the radio is in an error state.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "disabled",
-              "description": "Disables the radio button interaction",
+              "description": "Whether the radio is disabled.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "readonly",
-              "description": "Makes the radio button readonly (non-interactive but not disabled)",
+              "description": "Whether the radio is readonly.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "name",
-              "description": "The name of the radio button, used for form submission and radio grouping",
+              "description": "The radio's name attribute.",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "required",
-              "description": "Indicates if the radio input is required",
+              "description": "Whether the radio is required.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "value",
-              "description": "The value associated with the radio button",
+              "description": "The radio's value attribute.",
               "value": { "type": "string", "default": "''" }
             }
           ],
@@ -911,37 +932,37 @@
               },
               {
                 "name": "checked",
-                "description": "Indicates whether the radio button is checked",
+                "description": "Whether the radio is checked.",
                 "type": "boolean"
               },
               {
                 "name": "error",
-                "description": "Indicates if the radio button is in an error state",
+                "description": "Whether the radio is in an error state.",
                 "type": "boolean"
               },
               {
                 "name": "disabled",
-                "description": "Disables the radio button interaction",
+                "description": "Whether the radio is disabled.",
                 "type": "boolean"
               },
               {
                 "name": "readonly",
-                "description": "Makes the radio button readonly (non-interactive but not disabled)",
+                "description": "Whether the radio is readonly.",
                 "type": "boolean"
               },
               {
                 "name": "name",
-                "description": "The name of the radio button, used for form submission and radio grouping",
+                "description": "The radio's name attribute.",
                 "type": "string"
               },
               {
                 "name": "required",
-                "description": "Indicates if the radio input is required",
+                "description": "Whether the radio is required.",
                 "type": "boolean"
               },
               {
                 "name": "value",
-                "description": "The value associated with the radio button",
+                "description": "The radio's value attribute.",
                 "type": "string"
               },
               {
@@ -960,12 +981,12 @@
         },
         {
           "name": "plus-segmented-picker-item",
-          "description": "An item component for the segmented picker.\n---\n\n\n### **Slots:**\n - _default_ - The content of the item.\n\n### **CSS Parts:**\n - **label** - The label element.\n- **input** - The input element.",
+          "description": "An item component for the segmented picker.\n---\n\n\n### **Slots:**\n - _default_ - The content of the item.\n\n### **CSS Properties:**\n - **--active-color** - Color of the active indicator _(default: undefined)_\n\n### **CSS Parts:**\n - **label** - The label element.\n- **input** - The input element.",
           "doc-url": "",
           "attributes": [
             {
               "name": "checked",
-              "description": "Whether the item is checked.",
+              "description": "The value associated with the item.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -978,7 +999,7 @@
             },
             {
               "name": "disabled",
-              "description": "Whether the item is disabled.",
+              "description": "Disables the item, making it non-interactive.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -1008,7 +1029,7 @@
             "properties": [
               {
                 "name": "checked",
-                "description": "Whether the item is checked.",
+                "description": "The value associated with the item.",
                 "type": "boolean"
               },
               {
@@ -1018,7 +1039,7 @@
               },
               {
                 "name": "disabled",
-                "description": "Whether the item is disabled.",
+                "description": "Disables the item, making it non-interactive.",
                 "type": "boolean"
               },
               {
@@ -1118,10 +1139,12 @@
             { "name": "value", "value": { "type": "string", "default": "''" } },
             {
               "name": "disabled",
+              "description": "Disables all radio buttons in the group.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "required",
+              "description": "Makes the radio group required for form submission.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -1131,7 +1154,7 @@
             },
             {
               "name": "error",
-              "description": "Shows error styling on the radio group",
+              "description": "Displays the radio buttons in an error state.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -1148,8 +1171,16 @@
             "properties": [
               { "name": "name", "type": "string" },
               { "name": "value", "type": "string" },
-              { "name": "disabled", "type": "boolean" },
-              { "name": "required", "type": "boolean" },
+              {
+                "name": "disabled",
+                "description": "Disables all radio buttons in the group.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Makes the radio group required for form submission.",
+                "type": "boolean"
+              },
               {
                 "name": "size",
                 "description": "The size of all radio buttons in the group\n- sm: Small size\n- md: Medium size\n- lg: Large size",
@@ -1157,7 +1188,7 @@
               },
               {
                 "name": "error",
-                "description": "Shows error styling on the radio group",
+                "description": "Displays the radio buttons in an error state.",
                 "type": "boolean"
               },
               {
@@ -1604,12 +1635,12 @@
               "value": { "type": "boolean", "default": "true" }
             },
             {
-              "name": "statusIcon",
+              "name": "status-icon",
               "description": "Determines whether a status icon should be displayed in the popover.\n\n- `true` (default) - An icon representing the status will be displayed.\n- `false` - No icon will be displayed.",
               "value": { "type": "boolean", "default": "true" }
             },
             {
-              "name": "showArrow",
+              "name": "show-arrow",
               "description": "Determines whether the arrow should be displayed.\n\n- `true` (default) - Arrow will be displayed.\n- `false` - Arrow will be hidden.",
               "value": { "type": "boolean", "default": "true" }
             }
@@ -1718,12 +1749,12 @@
             },
             {
               "name": "disabled",
-              "description": "Disables the list box item interaction\nWhen disabled, the item cannot be clicked or selected",
+              "description": "Disables the item, making it non-interactive.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "selected",
-              "description": "Sets the selected state of the list box item\nWhen selected, the item will display with a highlighted background",
+              "description": "Indicates whether the item is currently selected.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -1753,12 +1784,12 @@
               },
               {
                 "name": "disabled",
-                "description": "Disables the list box item interaction\nWhen disabled, the item cannot be clicked or selected",
+                "description": "Disables the item, making it non-interactive.",
                 "type": "boolean"
               },
               {
                 "name": "selected",
-                "description": "Sets the selected state of the list box item\nWhen selected, the item will display with a highlighted background",
+                "description": "Indicates whether the item is currently selected.",
                 "type": "boolean"
               },
               {
@@ -2017,34 +2048,6 @@
           "description": "Form input component that provides various input types, validation, and styling features.\n---\n\n\n### **Events:**\n - **plus-input** - Emitted when the input value changes\n- **plus-change** - Emitted when the input value changes and the input loses focus\n- **plus-focus** - Emitted when the input gains focus\n- **plus-blur** - Emitted when the input loses focus\n- **plus-clear** - Emitted when the clear button is clicked\n- **plus-password-toggle** - Emitted when the password visibility is toggled\n- **plus-invalid** - Emitted when the input value is invalid\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks the validity of the input against constraints.\n- **reportValidity(): _boolean_** - Reports the validity of the input. If the input is invalid,\nit dispatches an 'invalid' event and focuses the input.\n- **setCustomValidity(message: _string_): _void_** - Sets a custom validation message for the input.\n\n### **Slots:**\n - **prefix** - Content to be placed before the input\n- **suffix** - Content to be placed after the input\n\n### **CSS Parts:**\n - **input** - The native input element\n- **wrapper** - The input wrapper element\n- **prefix** - The prefix container\n- **suffix** - The suffix container\n- **clear-button** - The clear button\n- **password-toggle** - The password visibility toggle button",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "type",
-              "description": "The type of input",
-              "value": {
-                "type": "'date'|'datetime-local'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url'",
-                "default": "'text'"
-              }
-            },
-            {
-              "name": "name",
-              "description": "The name of the input",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "value",
-              "description": "The value of the input",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "placeholder",
-              "description": "The placeholder text",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "size",
-              "description": "The size of the input",
-              "value": { "type": "'sm'|'md'|'lg'", "default": "'md'" }
-            },
             {
               "name": "clearable",
               "description": "Whether the input should have a clear button",
@@ -2075,6 +2078,39 @@
               "description": "Whether the password is visible",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "error",
+              "description": "Whether the input is in an error state",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "type",
+              "description": "The type of input",
+              "value": {
+                "type": "'date'|'datetime-local'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url'",
+                "default": "'text'"
+              }
+            },
+            {
+              "name": "name",
+              "description": "The name of the input",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The value of the input",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placeholder",
+              "description": "The placeholder text",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "The size of the input",
+              "value": { "type": "'sm'|'md'|'lg'", "default": "'md'" }
+            },
             {
               "name": "label",
               "description": "The label for the input",
@@ -2123,7 +2159,7 @@
             {
               "name": "autoFocus",
               "description": "Whether the input should automatically get focus",
-              "value": { "type": "boolean" }
+              "value": { "type": "boolean | undefined" }
             },
             {
               "name": "enterkeyhint",
@@ -2142,18 +2178,13 @@
             {
               "name": "spellCheck",
               "description": "Whether spellcheck is enabled",
-              "value": { "type": "boolean" }
+              "value": { "type": "boolean | undefined" }
             },
             {
               "name": "caption",
               "description": "Caption text to display below the input",
               "value": { "type": "string" }
             },
-            {
-              "name": "error",
-              "description": "Whether the input is in an error state",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "error-message",
               "description": "The error message to display",
@@ -2164,11 +2195,6 @@
               "description": "Whether the input should take up full width",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "isSelect",
-              "description": "Whether the input is used as part of a select component",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "prefix-icon",
               "description": "Icon name for the prefix icon",
@@ -2325,7 +2351,7 @@
               {
                 "name": "autoFocus",
                 "description": "Whether the input should automatically get focus",
-                "type": "boolean"
+                "type": "boolean | undefined"
               },
               {
                 "name": "enterkeyhint",
@@ -2340,7 +2366,7 @@
               {
                 "name": "spellCheck",
                 "description": "Whether spellcheck is enabled",
-                "type": "boolean"
+                "type": "boolean | undefined"
               },
               {
                 "name": "caption",
@@ -2362,11 +2388,6 @@
                 "description": "Whether the input should take up full width",
                 "type": "boolean"
               },
-              {
-                "name": "isSelect",
-                "description": "Whether the input is used as part of a select component",
-                "type": "boolean"
-              },
               {
                 "name": "prefixIcon",
                 "description": "Icon name for the prefix icon",
@@ -2458,12 +2479,12 @@
             },
             {
               "name": "status-icon",
-              "description": "Determines whether a status icon should be displayed in the popconfirm.\n\n- `true` (default) - An icon representing the status will be displayed.\n- `false` - No icon will be displayed.",
+              "description": "Determines whether a status icon should be displayed in the popconfirm.",
               "value": { "type": "boolean", "default": "true" }
             },
             {
               "name": "show-arrow",
-              "description": "Determines whether the arrow should be displayed.\n\n- `true` (default) - Arrow will be displayed.\n- `false` - Arrow will be hidden.",
+              "description": "Determines whether the arrow should be displayed.",
               "value": { "type": "boolean", "default": "true" }
             }
           ],
@@ -2542,12 +2563,12 @@
               },
               {
                 "name": "statusIcon",
-                "description": "Determines whether a status icon should be displayed in the popconfirm.\n\n- `true` (default) - An icon representing the status will be displayed.\n- `false` - No icon will be displayed.",
+                "description": "Determines whether a status icon should be displayed in the popconfirm.",
                 "type": "boolean"
               },
               {
                 "name": "showArrow",
-                "description": "Determines whether the arrow should be displayed.\n\n- `true` (default) - Arrow will be displayed.\n- `false` - Arrow will be hidden.",
+                "description": "Determines whether the arrow should be displayed.",
                 "type": "boolean"
               }
             ],
@@ -3507,6 +3528,11 @@
               "name": "clearable",
               "description": "Enables a clear button to reset the selection.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "full-width",
+              "description": "Makes the select full width.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -3583,6 +3609,11 @@
                 "name": "clearable",
                 "description": "Enables a clear button to reset the selection.",
                 "type": "boolean"
+              },
+              {
+                "name": "fullWidth",
+                "description": "Makes the select full width.",
+                "type": "boolean"
               }
             ],
             "events": [
@@ -3638,7 +3669,6 @@
               "name": "toggle-inactive-icon",
               "value": { "type": "string | undefined" }
             },
-            { "name": "icon-size", "value": { "type": "number | undefined" } },
             {
               "name": "error",
               "value": { "type": "boolean", "default": "false" }
@@ -3717,7 +3747,6 @@
               { "name": "toggleIcon", "type": "string | undefined" },
               { "name": "toggleActiveIcon", "type": "string | undefined" },
               { "name": "toggleInActiveIcon", "type": "string | undefined" },
-              { "name": "iconSize", "type": "number | undefined" },
               { "name": "error", "type": "boolean" },
               { "name": "errorMessage", "type": "string" },
               { "name": "disabled", "type": "boolean" },
@@ -3789,12 +3818,12 @@
             },
             {
               "name": "prefix-icon",
-              "description": "Icon to display before the tab content",
+              "description": "Icon name to display before the tab content",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "suffix-icon",
-              "description": "Icon to display after the tab content",
+              "description": "Icon name to display after the tab content",
               "value": { "type": "string | undefined" }
             },
             {
@@ -3854,12 +3883,12 @@
               },
               {
                 "name": "prefixIcon",
-                "description": "Icon to display before the tab content",
+                "description": "Icon name to display before the tab content",
                 "type": "string | undefined"
               },
               {
                 "name": "suffixIcon",
-                "description": "Icon to display after the tab content",
+                "description": "Icon name to display after the tab content",
                 "type": "string | undefined"
               },
               {
@@ -3893,12 +3922,12 @@
             },
             {
               "name": "active",
-              "description": "Indicates if the panel is currently visible",
+              "description": "Indicates whether the panel is currently active/visible.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "panelClass",
-              "description": "Custom CSS class to apply to the panel",
+              "description": "An optional class to apply to the panel container.",
               "value": { "type": "string", "default": "''" }
             }
           ],
@@ -3918,12 +3947,12 @@
               },
               {
                 "name": "active",
-                "description": "Indicates if the panel is currently visible",
+                "description": "Indicates whether the panel is currently active/visible.",
                 "type": "boolean"
               },
               {
                 "name": "panelClass",
-                "description": "Custom CSS class to apply to the panel",
+                "description": "An optional class to apply to the panel container.",
                 "type": "string"
               }
             ],
@@ -3955,7 +3984,7 @@
             },
             {
               "name": "dismissible",
-              "description": "Enables the dismiss button on all tabs",
+              "description": "Allows individual tabs to be dismissed (closed).",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -3998,7 +4027,7 @@
               },
               {
                 "name": "dismissible",
-                "description": "Enables the dismiss button on all tabs",
+                "description": "Allows individual tabs to be dismissed (closed).",
                 "type": "boolean"
               },
               {
@@ -4044,6 +4073,14 @@
           "name": "--tag-text-color",
           "description": "Text color for default state (inherits from --plus-color-text-default)"
         },
+        {
+          "name": "--icon-size",
+          "description": "Custom icon size (overrides size variants)"
+        },
+        {
+          "name": "--icon-color",
+          "description": "Custom icon color (overrides currentColor)"
+        },
         {
           "name": "--text-color",
           "description": "Controls the text color of the chip"
@@ -4068,6 +4105,10 @@
           "name": "--bg-focused",
           "description": "Controls the background color when focused"
         },
+        {
+          "name": "--active-color",
+          "description": "Color of the active indicator"
+        },
         {
           "name": "--divider-color",
           "description": "Controls the color of the divider"
@@ -4265,6 +4306,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" },