pure-uikit 1.2.2 → 1.2.3

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "pure-uikit",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -189,50 +189,77 @@
           }
         },
         {
-          "name": "p-badge",
-          "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "name": "p-animated-image",
+          "description": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n---\n\n\n### **Events:**\n - **p-load** - Emitted when the image loads successfully.\n- **p-error** - Emitted when the image fails to load.\n\n### **Slots:**\n - **play-icon** - Optional play icon to use instead of the default. Works best with `<p-icon>`.\n- **pause-icon** - Optional pause icon to use instead of the default. Works best with `<p-icon>`.\n\n### **CSS Properties:**\n - **--control-box-size** - The size of the icon box. _(default: undefined)_\n- **--icon-size** - The size of the play/pause icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **control-box** - The container that surrounds the pause/play icons and provides their background.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "variant",
-              "description": "The badge's theme variant.",
-              "value": {
-                "type": "\"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\"",
-                "default": "\"primary\""
-              }
+              "name": "src",
+              "description": "The path to the image to load.",
+              "value": { "type": "string" }
             },
             {
-              "name": "pill",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "alt",
+              "description": "A description of the image used by assistive devices.",
+              "value": { "type": "string" }
             },
             {
-              "name": "pulse",
-              "description": "Makes the badge pulsate to draw attention.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "play",
+              "description": "Plays the animation. When this attribute is remove, the animation will pause.",
+              "value": { "type": "boolean" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "play-icon",
+              "description": "Optional play icon to use instead of the default. Works best with `<p-icon>`."
+            },
+            {
+              "name": "pause-icon",
+              "description": "Optional pause icon to use instead of the default. Works best with `<p-icon>`."
+            }
+          ],
+          "events": [
+            {
+              "name": "p-load",
+              "description": "Emitted when the image loads successfully."
+            },
+            {
+              "name": "p-error",
+              "description": "Emitted when the image fails to load."
             }
           ],
-          "slots": [{ "name": "", "description": "The badge's content." }],
-          "events": [],
           "js": {
             "properties": [
+              { "name": "animatedImage", "type": "HTMLImageElement" },
+              { "name": "frozenFrame", "type": "string" },
+              { "name": "isLoaded", "type": "boolean" },
               {
-                "name": "variant",
-                "description": "The badge's theme variant.",
-                "type": "\"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\""
+                "name": "src",
+                "description": "The path to the image to load.",
+                "type": "string"
               },
               {
-                "name": "pill",
-                "description": "Draws a pill-style badge with rounded edges.",
-                "type": "boolean"
+                "name": "alt",
+                "description": "A description of the image used by assistive devices.",
+                "type": "string"
               },
               {
-                "name": "pulse",
-                "description": "Makes the badge pulsate to draw attention.",
+                "name": "play",
+                "description": "Plays the animation. When this attribute is remove, the animation will pause.",
                 "type": "boolean"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "p-load",
+                "description": "Emitted when the image loads successfully."
+              },
+              {
+                "name": "p-error",
+                "description": "Emitted when the image fails to load."
+              }
+            ]
           }
         },
         {
@@ -401,77 +428,50 @@
           }
         },
         {
-          "name": "p-animated-image",
-          "description": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n---\n\n\n### **Events:**\n - **p-load** - Emitted when the image loads successfully.\n- **p-error** - Emitted when the image fails to load.\n\n### **Slots:**\n - **play-icon** - Optional play icon to use instead of the default. Works best with `<p-icon>`.\n- **pause-icon** - Optional pause icon to use instead of the default. Works best with `<p-icon>`.\n\n### **CSS Properties:**\n - **--control-box-size** - The size of the icon box. _(default: undefined)_\n- **--icon-size** - The size of the play/pause icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **control-box** - The container that surrounds the pause/play icons and provides their background.",
+          "name": "p-badge",
+          "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "src",
-              "description": "The path to the image to load.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "alt",
-              "description": "A description of the image used by assistive devices.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "play",
-              "description": "Plays the animation. When this attribute is remove, the animation will pause.",
-              "value": { "type": "boolean" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "play-icon",
-              "description": "Optional play icon to use instead of the default. Works best with `<p-icon>`."
+              "name": "variant",
+              "description": "The badge's theme variant.",
+              "value": {
+                "type": "\"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\"",
+                "default": "\"primary\""
+              }
             },
             {
-              "name": "pause-icon",
-              "description": "Optional pause icon to use instead of the default. Works best with `<p-icon>`."
-            }
-          ],
-          "events": [
-            {
-              "name": "p-load",
-              "description": "Emitted when the image loads successfully."
+              "name": "pill",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "p-error",
-              "description": "Emitted when the image fails to load."
+              "name": "pulse",
+              "description": "Makes the badge pulsate to draw attention.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
+          "slots": [{ "name": "", "description": "The badge's content." }],
+          "events": [],
           "js": {
             "properties": [
-              { "name": "animatedImage", "type": "HTMLImageElement" },
-              { "name": "frozenFrame", "type": "string" },
-              { "name": "isLoaded", "type": "boolean" },
               {
-                "name": "src",
-                "description": "The path to the image to load.",
-                "type": "string"
+                "name": "variant",
+                "description": "The badge's theme variant.",
+                "type": "\"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\""
               },
               {
-                "name": "alt",
-                "description": "A description of the image used by assistive devices.",
-                "type": "string"
+                "name": "pill",
+                "description": "Draws a pill-style badge with rounded edges.",
+                "type": "boolean"
               },
               {
-                "name": "play",
-                "description": "Plays the animation. When this attribute is remove, the animation will pause.",
+                "name": "pulse",
+                "description": "Makes the badge pulsate to draw attention.",
                 "type": "boolean"
               }
             ],
-            "events": [
-              {
-                "name": "p-load",
-                "description": "Emitted when the image loads successfully."
-              },
-              {
-                "name": "p-error",
-                "description": "Emitted when the image fails to load."
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -6086,6 +6086,71 @@
             ]
           }
         },
+        {
+          "name": "p-tab",
+          "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Events:**\n - **p-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Slots:**\n - _default_ - The tab's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **close-button** - The close button, an `<p-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "panel",
+              "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "active",
+              "description": "Draws the tab in an active state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "closable",
+              "description": "Makes the tab closable and shows a close button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the tab and prevents selection.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The tab's label." }],
+          "events": [
+            {
+              "name": "p-close",
+              "description": "Emitted when the tab is closable and the close button is activated."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "tab", "type": "HTMLElement" },
+              {
+                "name": "panel",
+                "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
+                "type": "string"
+              },
+              {
+                "name": "active",
+                "description": "Draws the tab in an active state.",
+                "type": "boolean"
+              },
+              {
+                "name": "closable",
+                "description": "Makes the tab closable and shows a close button.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the tab and prevents selection.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "p-close",
+                "description": "Emitted when the tab is closable and the close button is activated."
+              }
+            ]
+          }
+        },
         {
           "name": "p-switch",
           "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **p-blur** - Emitted when the control loses focus.\n- **p-change** - Emitted when the control's checked state changes.\n- **p-input** - Emitted when the control receives input.\n- **p-focus** - Emitted when the control gains focus.\n- **p-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The switch's label.\n- **help-text** - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--width** - The width of the switch. _(default: undefined)_\n- **--height** - The height of the switch. _(default: undefined)_\n- **--thumb-size** - The size of the thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The control that houses the switch's thumb.\n- **thumb** - The switch's thumb.\n- **label** - The switch's label.\n- **form-control-help-text** - The help text's wrapper.",
@@ -6250,71 +6315,6 @@
             ]
           }
         },
-        {
-          "name": "p-tab",
-          "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Events:**\n - **p-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Slots:**\n - _default_ - The tab's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **close-button** - The close button, an `<p-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "panel",
-              "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "active",
-              "description": "Draws the tab in an active state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "closable",
-              "description": "Makes the tab closable and shows a close button.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the tab and prevents selection.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The tab's label." }],
-          "events": [
-            {
-              "name": "p-close",
-              "description": "Emitted when the tab is closable and the close button is activated."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "tab", "type": "HTMLElement" },
-              {
-                "name": "panel",
-                "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
-                "type": "string"
-              },
-              {
-                "name": "active",
-                "description": "Draws the tab in an active state.",
-                "type": "boolean"
-              },
-              {
-                "name": "closable",
-                "description": "Makes the tab closable and shows a close button.",
-                "type": "boolean"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the tab and prevents selection.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "p-close",
-                "description": "Emitted when the tab is closable and the close button is activated."
-              }
-            ]
-          }
-        },
         {
           "name": "p-tab-group",
           "description": "Tab groups organize content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **p-tab-show** - Emitted when a tab is shown.\n- **p-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be `<p-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<p-tab>` elements.\n\n### **CSS Properties:**\n - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_\n- **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n- **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **tabs** - The container that wraps the tabs.\n- **active-tab-indicator** - The line that highlights the currently selected tab.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<p-icon-button>`.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
@@ -6400,6 +6400,40 @@
             ]
           }
         },
+        {
+          "name": "p-tab-panel",
+          "description": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel's content.\n\n### **CSS Properties:**\n - **--padding** - The tab panel's padding. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The tab panel's name.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "active",
+              "description": "When true, the tab panel will be shown.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The tab panel's content." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "The tab panel's name.",
+                "type": "string"
+              },
+              {
+                "name": "active",
+                "description": "When true, the tab panel will be shown.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "p-table",
           "description": "The Table component is used to display data in a table format.\n---\n\n\n### **Events:**\n - **p-change** - Emitted when the current page value changes.\n- **p-table-row-select** - Emitted when the rows selected changed.\n\n### **Slots:**\n - _default_ - The default slot.\n- **paginate** - An optional slot for paginate element.\n\n### **CSS Properties:**\n - **--table-header-cell-padding** - Set padding for header cell. _(default: undefined)_\n- **--table-body-cell-padding** - Set padding for body cell. _(default: undefined)_\n- **--table-footer-padding** - Set padding for footer cell. _(default: undefined)_\n- **--table-border-horizontal-width** - Set border width horizontal. _(default: undefined)_\n- **--table-border-horizontal-style** - Set border style horizontal. _(default: undefined)_\n- **--table-border-horizontal-color** - Set border color horizontal. _(default: undefined)_\n- **--table-border-vertical-width** - Set border width vertical. _(default: undefined)_\n- **--table-border-vertical-style** - Set border style vertical. _(default: undefined)_\n- **--table-border-vertical-color** - Set border color vertical. _(default: undefined)_\n- **--table-border-width** - Set table border width. _(default: undefined)_\n- **--table-border-color** - Set table border color. _(default: undefined)_\n- **--table-border-style** - Set table border style. _(default: undefined)_\n- **--table-border-radius** - Set table border radius. _(default: undefined)_\n- **--table-row-hover-background-color** - Set table row hover background color. _(default: undefined)_\n- **--table-cell-background-color** - Set table cell background color. _(default: undefined)_\n- **--table-cell-hover-background-color** - Set table cell hover background color. _(default: undefined)_\n- **--table-cell-min-height** - Set table cell min height. _(default: undefined)_\n- **--table-cell-max-height** - Set table cell max height. _(default: undefined)_\n- **--table-cell-min-width** - Set table cell min width. _(default: undefined)_\n- **--table-cell-max-width** - Set table cell max width. _(default: undefined)_\n\n### **CSS Parts:**\n - **table-wrapper** - The component's table wrapper.\n- **table-header** - The component's table header wrapper.\n- **table-body** - The component's table body wrapper.\n- **table-loading** - The component's table loading wrapper.\n- **table-empty** - The component's table empty wrapper.\n- **table-footer** - The component's table footer wrapper.",
@@ -6523,40 +6557,6 @@
             ]
           }
         },
-        {
-          "name": "p-tab-panel",
-          "description": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel's content.\n\n### **CSS Properties:**\n - **--padding** - The tab panel's padding. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "name",
-              "description": "The tab panel's name.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "active",
-              "description": "When true, the tab panel will be shown.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The tab panel's content." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "name",
-                "description": "The tab panel's name.",
-                "type": "string"
-              },
-              {
-                "name": "active",
-                "description": "When true, the tab panel will be shown.",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "p-tag",
           "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **p-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<p-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "pure-uikit",
     "description": "A forward-thinking library of web components.",
-    "version": "1.2.2",
+    "version": "1.2.3",
     "homepage": "https://pureui.xyz",
     "author": "Mr.P",
     "license": "MIT",