pure-uikit 1.3.13 → 1.3.14

package/dist/custom-elements.json

@@ -760,246 +760,346 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/breadcrumb/breadcrumb.js",
+      "path": "components/animation/animation.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PBreadcrumb",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
+          "name": "PAnimation",
           "slots": [
             {
-              "description": "One or more breadcrumb items to display.",
+              "description": "The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<p-animation>` elements.",
               "name": ""
-            },
-            {
-              "description": "The separator to use between breadcrumb items. Works best with `<p-icon>`.",
-              "name": "separator"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "dependencies",
+              "name": "animation",
               "type": {
-                "text": "object"
+                "text": "Animation | undefined"
               },
-              "static": true,
-              "default": "{ \"p-icon\": PIcon }"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "separatorDir",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "defaultSlot",
+              "name": "hasStarted",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "separatorSlot",
+              "name": "defaultPot",
               "type": {
-                "text": "HTMLSlotElement"
+                "text": "Promise<HTMLSlotElement>"
               }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "name",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-              "attribute": "label"
-            },
-            {
-              "kind": "method",
-              "name": "getSeparator",
-              "privacy": "private"
+              "default": "\"none\"",
+              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+              "attribute": "name"
             },
             {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
+              "kind": "field",
+              "name": "play",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "PureElement",
-            "module": "/src/internal/pure-ui-element.js"
-          },
-          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
-          "tagNameWithoutPrefix": "breadcrumb",
-          "tagName": "p-breadcrumb",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n * @documentation https://pureui.xyz/components/breadcrumb\n * @status stable\n * @since 1.0\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with `<p-icon>`.\n *\n * @dependency p-icon\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://pureui.xyz/components/breadcrumb",
-          "status": "stable",
-          "since": "1.0",
-          "dependencies": [
-            "p-icon"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "PBreadcrumb",
-            "module": "components/breadcrumb/breadcrumb.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/breadcrumb-item/breadcrumb-item.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "PBreadcrumbItem",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "default": "false",
+              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
+              "attribute": "play",
+              "reflects": true
             },
             {
-              "description": "The breadcrumb item's label.",
-              "name": "label"
+              "kind": "field",
+              "name": "delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number of milliseconds to delay the start of the animation.",
+              "attribute": "delay"
             },
             {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
+              "kind": "field",
+              "name": "direction",
+              "type": {
+                "text": "PlaybackDirection"
+              },
+              "default": "\"normal\"",
+              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)",
+              "attribute": "direction"
             },
             {
-              "description": "The container that wraps the suffix.",
-              "name": "suffix"
+              "kind": "field",
+              "name": "duration",
+              "type": {
+                "text": "number"
+              },
+              "default": "1000",
+              "description": "The number of milliseconds each iteration of the animation takes to complete.",
+              "attribute": "duration"
             },
             {
-              "description": "The container that wraps the separator.",
-              "name": "separator"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The breadcrumb item's label.",
-              "name": ""
+              "kind": "field",
+              "name": "easing",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"linear\"",
+              "description": "The easing function to use for the animation. This can be a Pure UI easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
+              "attribute": "easing"
             },
             {
-              "description": "An optional prefix, usually an icon or icon button.",
-              "name": "prefix"
+              "kind": "field",
+              "name": "endDelay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
+              "attribute": "end-delay"
             },
             {
-              "description": "An optional suffix, usually an icon or icon button.",
-              "name": "suffix"
+              "kind": "field",
+              "name": "fill",
+              "type": {
+                "text": "FillMode"
+              },
+              "default": "\"auto\"",
+              "description": "Sets how the animation applies styles to its target before and after its execution.",
+              "attribute": "fill"
             },
-            {
-              "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<p-breadcrumb>` instead.",
-              "name": "separator"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, \"prefix\", \"suffix\")"
+              "name": "iterations",
+              "default": "Infinity",
+              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
+              "attribute": "iterations"
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "iterationStart",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
-              "attribute": "href"
+              "default": "0",
+              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
+              "attribute": "iteration-start"
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "keyframes",
               "type": {
-                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined"
+                "text": "Keyframe[] | undefined"
               },
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
-              "attribute": "target"
+              "description": "The keyframes to use for the animation. If this is set, `name` will be ignored."
             },
             {
               "kind": "field",
-              "name": "rel",
+              "name": "playbackRate",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "\"noreferrer noopener\"",
-              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
-              "attribute": "rel"
-            }
-          ],
-          "attributes": [
+              "default": "1",
+              "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
+              "attribute": "playback-rate"
+            },
             {
-              "name": "href",
+              "kind": "field",
+              "name": "currentTime",
               "type": {
-                "text": "string | undefined"
+                "text": "CSSNumberish"
               },
-              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
-              "fieldName": "href"
+              "description": "Gets and sets the current animation time."
             },
             {
-              "name": "target",
-              "type": {
-                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined"
-              },
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
-              "fieldName": "target"
+              "kind": "field",
+              "name": "handleAnimationFinish",
+              "privacy": "private"
             },
             {
-              "name": "rel",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"noreferrer noopener\"",
-              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
-              "fieldName": "rel"
-            }
-          ],
-          "superclass": {
+              "kind": "field",
+              "name": "handleAnimationCancel",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handlePotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "createAnimation",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "destroyAnimation",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleAnimationChange"
+            },
+            {
+              "kind": "method",
+              "name": "handlePlayChange"
+            },
+            {
+              "kind": "method",
+              "name": "handlePlaybackRateChange"
+            },
+            {
+              "kind": "method",
+              "name": "cancel",
+              "description": "Clears all keyframe effects caused by this animation and aborts its playback."
+            },
+            {
+              "kind": "method",
+              "name": "finish",
+              "description": "Sets the playback time to the end of the animation corresponding to the current playback direction."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the animation is canceled.",
+              "name": "p-cancel",
+              "reactName": "onPCancel",
+              "eventName": "PCancelEvent"
+            },
+            {
+              "description": "Emitted when the animation finishes.",
+              "name": "p-finish",
+              "reactName": "onPFinish",
+              "eventName": "PFinishEvent"
+            },
+            {
+              "description": "Emitted when the animation starts or restarts.",
+              "name": "p-start",
+              "reactName": "onPStart",
+              "eventName": "PStartEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"none\"",
+              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+              "fieldName": "name"
+            },
+            {
+              "name": "play",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
+              "fieldName": "play"
+            },
+            {
+              "name": "delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number of milliseconds to delay the start of the animation.",
+              "fieldName": "delay"
+            },
+            {
+              "name": "direction",
+              "type": {
+                "text": "PlaybackDirection"
+              },
+              "default": "\"normal\"",
+              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)",
+              "fieldName": "direction"
+            },
+            {
+              "name": "duration",
+              "type": {
+                "text": "number"
+              },
+              "default": "1000",
+              "description": "The number of milliseconds each iteration of the animation takes to complete.",
+              "fieldName": "duration"
+            },
+            {
+              "name": "easing",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"linear\"",
+              "description": "The easing function to use for the animation. This can be a Pure UI easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
+              "fieldName": "easing"
+            },
+            {
+              "name": "end-delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
+              "fieldName": "endDelay"
+            },
+            {
+              "name": "fill",
+              "type": {
+                "text": "FillMode"
+              },
+              "default": "\"auto\"",
+              "description": "Sets how the animation applies styles to its target before and after its execution.",
+              "fieldName": "fill"
+            },
+            {
+              "name": "iterations",
+              "default": "Infinity",
+              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
+              "resolveInitializer": {
+                "module": "src/components/animation/animation.component.ts"
+              },
+              "fieldName": "iterations"
+            },
+            {
+              "name": "iteration-start",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
+              "fieldName": "iterationStart"
+            },
+            {
+              "name": "playback-rate",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
+              "fieldName": "playbackRate"
+            }
+          ],
+          "superclass": {
             "name": "PureElement",
             "module": "/src/internal/pure-ui-element.js"
           },
-          "summary": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.",
-          "tagNameWithoutPrefix": "breadcrumb-item",
-          "tagName": "p-breadcrumb-item",
+          "summary": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).",
+          "tagNameWithoutPrefix": "animation",
+          "tagName": "p-animation",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://pureui.xyz/components/breadcrumb-item\n * @status stable\n * @since 1.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<p-breadcrumb>` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */",
-          "documentation": "https://pureui.xyz/components/breadcrumb-item",
+          "jsDoc": "/**\n * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n * @documentation https://pureui.xyz/components/animation\n * @status stable\n * @since 1.0\n *\n * @event p-cancel - Emitted when the animation is canceled.\n * @event p-finish - Emitted when the animation finishes.\n * @event p-start - Emitted when the animation starts or restarts.\n *\n * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To\n *  animate multiple elements, either wrap them in a single container or use multiple `<p-animation>` elements.\n */",
+          "documentation": "https://pureui.xyz/components/animation",
           "status": "stable",
           "since": "1.0"
         }
@@ -1009,58 +1109,34 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "PBreadcrumbItem",
-            "module": "components/breadcrumb-item/breadcrumb-item.js"
+            "name": "PAnimation",
+            "module": "components/animation/animation.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/button/button.js",
+      "path": "components/breadcrumb/breadcrumb.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PButton",
+          "name": "PBreadcrumb",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
-            },
-            {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
-            },
-            {
-              "description": "The button's label.",
-              "name": "label"
-            },
-            {
-              "description": "The container that wraps the suffix.",
-              "name": "suffix"
-            },
-            {
-              "description": "The button's caret icon, an `<p-icon>` element.",
-              "name": "caret"
-            },
-            {
-              "description": "The spinner that shows when the button is in the loading state.",
-              "name": "spinner"
             }
           ],
           "slots": [
             {
-              "description": "The button's label.",
+              "description": "One or more breadcrumb items to display.",
               "name": ""
             },
             {
-              "description": "A presentational prefix icon or similar element.",
-              "name": "prefix"
-            },
-            {
-              "description": "A presentational suffix icon or similar element.",
-              "name": "suffix"
+              "description": "The separator to use between breadcrumb items. Works best with `<p-icon>`.",
+              "name": "separator"
             }
           ],
           "members": [
@@ -1071,21 +1147,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n    \"p-icon\": PIcon,\n    \"p-spinner\": PSpinner,\n  }"
-            },
-            {
-              "kind": "field",
-              "name": "formControlController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new FormControlController(this, {\n    assumeInteractionOn: [\"click\"],\n  })"
-            },
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, \"[default]\", \"prefix\", \"suffix\")"
+              "default": "{ \"p-icon\": PIcon }"
             },
             {
               "kind": "field",
@@ -1096,172 +1158,155 @@
             },
             {
               "kind": "field",
-              "name": "button",
-              "type": {
-                "text": "HTMLButtonElement | HTMLLinkElement"
-              }
+              "name": "separatorDir",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hasFocus",
+              "name": "defaultSlot",
               "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "invalid",
+              "name": "separatorSlot",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "attribute": "title"
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "attribute": "label"
             },
             {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\" | \"text\""
-              },
-              "default": "\"default\"",
-              "description": "The button's theme variant.",
-              "attribute": "variant",
-              "reflects": true
+              "kind": "method",
+              "name": "getSeparator",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"small\" | \"medium\" | \"large\""
-              },
-              "default": "\"medium\"",
-              "description": "The button's size.",
-              "attribute": "size",
-              "reflects": true
-            },
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "caret",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.",
-              "attribute": "caret",
-              "reflects": true
-            },
+              "default": "\"\"",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "PureElement",
+            "module": "/src/internal/pure-ui-element.js"
+          },
+          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
+          "tagNameWithoutPrefix": "breadcrumb",
+          "tagName": "p-breadcrumb",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n * @documentation https://pureui.xyz/components/breadcrumb\n * @status stable\n * @since 1.0\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with `<p-icon>`.\n *\n * @dependency p-icon\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://pureui.xyz/components/breadcrumb",
+          "status": "stable",
+          "since": "1.0",
+          "dependencies": [
+            "p-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "PBreadcrumb",
+            "module": "components/breadcrumb/breadcrumb.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/breadcrumb-item/breadcrumb-item.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PBreadcrumbItem",
+          "cssParts": [
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the button.",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "kind": "field",
-              "name": "loading",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the button in a loading state.",
-              "attribute": "loading",
-              "reflects": true
+              "description": "The breadcrumb item's label.",
+              "name": "label"
             },
             {
-              "kind": "field",
-              "name": "outline",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws an outlined button.",
-              "attribute": "outline",
-              "reflects": true
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
             },
             {
-              "kind": "field",
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws a pill-style button with rounded edges.",
-              "attribute": "pill",
-              "reflects": true
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
             },
             {
-              "kind": "field",
-              "name": "circle",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws a circular icon button. When this attribute is present, the button expects a single `<p-icon>` in the\ndefault slot.",
-              "attribute": "circle",
-              "reflects": true
+              "description": "The container that wraps the separator.",
+              "name": "separator"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The breadcrumb item's label.",
+              "name": ""
             },
             {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "\"button\" | \"submit\" | \"reset\""
-              },
-              "default": "\"button\"",
-              "description": "The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n`<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.",
-              "attribute": "type"
+              "description": "An optional prefix, usually an icon or icon button.",
+              "name": "prefix"
             },
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.\nThis attribute is ignored when `href` is present.",
-              "attribute": "name"
+              "description": "An optional suffix, usually an icon or icon button.",
+              "name": "suffix"
             },
+            {
+              "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<p-breadcrumb>` instead.",
+              "name": "separator"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the button, submitted as a pair with the button's name as part of the form data, but only when this\nbutton is the submitter. This attribute is ignored when `href` is present.",
-              "attribute": "value"
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, \"prefix\", \"suffix\")"
             },
             {
               "kind": "field",
               "name": "href",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "\"\"",
-              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
               "attribute": "href"
             },
             {
               "kind": "field",
               "name": "target",
               "type": {
-                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
+                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined"
               },
-              "description": "Tells the browser where to open the link. Only used when `href` is present.",
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
               "attribute": "target"
             },
             {
@@ -1271,831 +1316,786 @@
                 "text": "string"
               },
               "default": "\"noreferrer noopener\"",
-              "description": "When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the\ndefault is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a\nspecific tab/window, this will prevent that from working correctly. You can remove or change the default value by\nsetting the attribute to an empty string or a value of your choice, respectively.",
+              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
               "attribute": "rel"
-            },
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "download",
+              "name": "href",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is present.",
-              "attribute": "download"
+              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
+              "fieldName": "href"
             },
             {
-              "kind": "field",
-              "name": "form",
+              "name": "target",
               "type": {
-                "text": "string"
+                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined"
               },
-              "description": "The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\nvalue of this attribute must be an id of a form in the same document or shadow root as the button.",
-              "attribute": "form"
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "fieldName": "target"
             },
             {
-              "kind": "field",
-              "name": "formAction",
+              "name": "rel",
               "type": {
                 "text": "string"
               },
-              "description": "Used to override the form owner's `action` attribute.",
-              "attribute": "formaction"
+              "default": "\"noreferrer noopener\"",
+              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+              "fieldName": "rel"
+            }
+          ],
+          "superclass": {
+            "name": "PureElement",
+            "module": "/src/internal/pure-ui-element.js"
+          },
+          "summary": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.",
+          "tagNameWithoutPrefix": "breadcrumb-item",
+          "tagName": "p-breadcrumb-item",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://pureui.xyz/components/breadcrumb-item\n * @status stable\n * @since 1.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<p-breadcrumb>` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */",
+          "documentation": "https://pureui.xyz/components/breadcrumb-item",
+          "status": "stable",
+          "since": "1.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "PBreadcrumbItem",
+            "module": "components/breadcrumb-item/breadcrumb-item.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/button/button.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PButton",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "kind": "field",
-              "name": "formEnctype",
-              "type": {
-                "text": "\"application/x-www-form-urlencoded\" | \"multipart/form-data\" | \"text/plain\""
-              },
-              "description": "Used to override the form owner's `enctype` attribute.",
-              "attribute": "formenctype"
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
             },
             {
-              "kind": "field",
-              "name": "formMethod",
-              "type": {
-                "text": "\"post\" | \"get\""
-              },
-              "description": "Used to override the form owner's `method` attribute.",
-              "attribute": "formmethod"
+              "description": "The button's label.",
+              "name": "label"
             },
             {
-              "kind": "field",
-              "name": "formNoValidate",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Used to override the form owner's `novalidate` attribute.",
-              "attribute": "formnovalidate"
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
             },
             {
-              "kind": "field",
-              "name": "formTarget",
-              "type": {
-                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\" | string"
-              },
-              "description": "Used to override the form owner's `target` attribute.",
-              "attribute": "formtarget"
+              "description": "The button's caret icon, an `<p-icon>` element.",
+              "name": "caret"
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
-            },
+              "description": "The spinner that shows when the button is in the loading state.",
+              "name": "spinner"
+            }
+          ],
+          "slots": [
             {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
+              "description": "The button's label.",
+              "name": ""
             },
             {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private"
+              "description": "A presentational prefix icon or similar element.",
+              "name": "prefix"
             },
             {
-              "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private"
-            },
+              "description": "A presentational suffix icon or similar element.",
+              "name": "suffix"
+            }
+          ],
+          "members": [
             {
-              "kind": "method",
-              "name": "handleClick",
-              "privacy": "private"
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{\n    \"p-icon\": PIcon,\n    \"p-spinner\": PSpinner,\n  }"
             },
             {
-              "kind": "method",
-              "name": "handleInvalid",
+              "kind": "field",
+              "name": "formControlController",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "isButton",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "isLink",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleDisabledChange"
-            },
-            {
-              "kind": "method",
-              "name": "click",
-              "description": "Simulates a click on the button."
+              "readonly": true,
+              "default": "new FormControlController(this, {\n    assumeInteractionOn: [\"click\"],\n  })"
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the button."
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, \"[default]\", \"prefix\", \"suffix\")"
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the button."
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+              "kind": "field",
+              "name": "button",
+              "type": {
+                "text": "HTMLButtonElement | HTMLLinkElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
               },
-              "description": "Gets the associated form, if one exists."
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
-            },
-            {
-              "kind": "method",
-              "name": "setCustomValidity",
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the button loses focus.",
-              "name": "p-blur",
-              "reactName": "onPBlur",
-              "eventName": "PBlurEvent"
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "description": "Emitted when the button gains focus.",
-              "name": "p-focus",
-              "reactName": "onPFocus",
-              "eventName": "PFocusEvent"
+              "kind": "field",
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
             },
             {
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
-              "name": "p-invalid",
-              "reactName": "onPInvalid",
-              "eventName": "PInvalidEvent"
-            }
-          ],
-          "attributes": [
-            {
+              "kind": "field",
               "name": "title",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "fieldName": "title"
+              "attribute": "title"
             },
             {
+              "kind": "field",
               "name": "variant",
               "type": {
                 "text": "\"default\" | \"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\" | \"text\""
               },
               "default": "\"default\"",
               "description": "The button's theme variant.",
-              "fieldName": "variant"
+              "attribute": "variant",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "size",
               "type": {
                 "text": "\"small\" | \"medium\" | \"large\""
               },
               "default": "\"medium\"",
               "description": "The button's size.",
-              "fieldName": "size"
+              "attribute": "size",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "caret",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.",
-              "fieldName": "caret"
+              "attribute": "caret",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Disables the button.",
-              "fieldName": "disabled"
+              "attribute": "disabled",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "loading",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Draws the button in a loading state.",
-              "fieldName": "loading"
+              "attribute": "loading",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "outline",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Draws an outlined button.",
-              "fieldName": "outline"
+              "attribute": "outline",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "pill",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Draws a pill-style button with rounded edges.",
-              "fieldName": "pill"
+              "attribute": "pill",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "circle",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Draws a circular icon button. When this attribute is present, the button expects a single `<p-icon>` in the\ndefault slot.",
-              "fieldName": "circle"
+              "attribute": "circle",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "type",
               "type": {
                 "text": "\"button\" | \"submit\" | \"reset\""
               },
               "default": "\"button\"",
               "description": "The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n`<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.",
-              "fieldName": "type"
+              "attribute": "type"
             },
             {
+              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.\nThis attribute is ignored when `href` is present.",
-              "fieldName": "name"
+              "attribute": "name"
             },
             {
+              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "The value of the button, submitted as a pair with the button's name as part of the form data, but only when this\nbutton is the submitter. This attribute is ignored when `href` is present.",
-              "fieldName": "value"
+              "attribute": "value"
             },
             {
+              "kind": "field",
               "name": "href",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
-              "fieldName": "href"
+              "attribute": "href"
             },
             {
+              "kind": "field",
               "name": "target",
               "type": {
                 "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
               },
               "description": "Tells the browser where to open the link. Only used when `href` is present.",
-              "fieldName": "target"
+              "attribute": "target"
             },
             {
+              "kind": "field",
               "name": "rel",
               "type": {
                 "text": "string"
               },
               "default": "\"noreferrer noopener\"",
               "description": "When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the\ndefault is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a\nspecific tab/window, this will prevent that from working correctly. You can remove or change the default value by\nsetting the attribute to an empty string or a value of your choice, respectively.",
-              "fieldName": "rel"
+              "attribute": "rel"
             },
             {
+              "kind": "field",
               "name": "download",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Tells the browser to download the linked file as this filename. Only used when `href` is present.",
-              "fieldName": "download"
+              "attribute": "download"
             },
             {
+              "kind": "field",
               "name": "form",
               "type": {
                 "text": "string"
               },
               "description": "The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\nvalue of this attribute must be an id of a form in the same document or shadow root as the button.",
-              "fieldName": "form"
+              "attribute": "form"
             },
             {
-              "name": "formaction",
+              "kind": "field",
+              "name": "formAction",
               "type": {
                 "text": "string"
               },
               "description": "Used to override the form owner's `action` attribute.",
-              "fieldName": "formAction"
+              "attribute": "formaction"
             },
             {
-              "name": "formenctype",
+              "kind": "field",
+              "name": "formEnctype",
               "type": {
                 "text": "\"application/x-www-form-urlencoded\" | \"multipart/form-data\" | \"text/plain\""
               },
               "description": "Used to override the form owner's `enctype` attribute.",
-              "fieldName": "formEnctype"
+              "attribute": "formenctype"
             },
             {
-              "name": "formmethod",
+              "kind": "field",
+              "name": "formMethod",
               "type": {
                 "text": "\"post\" | \"get\""
               },
               "description": "Used to override the form owner's `method` attribute.",
-              "fieldName": "formMethod"
+              "attribute": "formmethod"
             },
             {
-              "name": "formnovalidate",
+              "kind": "field",
+              "name": "formNoValidate",
               "type": {
                 "text": "boolean"
               },
               "description": "Used to override the form owner's `novalidate` attribute.",
-              "fieldName": "formNoValidate"
+              "attribute": "formnovalidate"
             },
             {
-              "name": "formtarget",
+              "kind": "field",
+              "name": "formTarget",
               "type": {
                 "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\" | string"
               },
               "description": "Used to override the form owner's `target` attribute.",
-              "fieldName": "formTarget"
-            }
-          ],
-          "superclass": {
-            "name": "PureElement",
-            "module": "/src/internal/pure-ui-element.js"
-          },
-          "summary": "Buttons represent actions that are available to the user.",
-          "tagNameWithoutPrefix": "button",
-          "tagName": "p-button",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Buttons represent actions that are available to the user.\n * @documentation https://pureui.xyz/components/button\n * @status stable\n * @since 1.0\n *\n * @dependency p-icon\n * @dependency p-spinner\n *\n * @event p-blur - Emitted when the button loses focus.\n * @event p-focus - Emitted when the button gains focus.\n * @event p-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @slot - The button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The button's label.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart caret - The button's caret icon, an `<p-icon>` element.\n * @csspart spinner - The spinner that shows when the button is in the loading state.\n */",
-          "documentation": "https://pureui.xyz/components/button",
-          "status": "stable",
-          "since": "1.0",
-          "dependencies": [
-            "p-icon",
-            "p-spinner"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "PButton",
-            "module": "components/button/button.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/animation/animation.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "PAnimation",
-          "slots": [
-            {
-              "description": "The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<p-animation>` elements.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "animation",
-              "type": {
-                "text": "Animation | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "hasStarted",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "defaultPot",
-              "type": {
-                "text": "Promise<HTMLSlotElement>"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"none\"",
-              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
-              "attribute": "name"
-            },
-            {
-              "kind": "field",
-              "name": "play",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
-              "attribute": "play",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "delay",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number of milliseconds to delay the start of the animation.",
-              "attribute": "delay"
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "PlaybackDirection"
-              },
-              "default": "\"normal\"",
-              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)",
-              "attribute": "direction"
-            },
-            {
-              "kind": "field",
-              "name": "duration",
-              "type": {
-                "text": "number"
-              },
-              "default": "1000",
-              "description": "The number of milliseconds each iteration of the animation takes to complete.",
-              "attribute": "duration"
-            },
-            {
-              "kind": "field",
-              "name": "easing",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"linear\"",
-              "description": "The easing function to use for the animation. This can be a Pure UI easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
-              "attribute": "easing"
-            },
-            {
-              "kind": "field",
-              "name": "endDelay",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
-              "attribute": "end-delay"
-            },
-            {
-              "kind": "field",
-              "name": "fill",
-              "type": {
-                "text": "FillMode"
-              },
-              "default": "\"auto\"",
-              "description": "Sets how the animation applies styles to its target before and after its execution.",
-              "attribute": "fill"
-            },
-            {
-              "kind": "field",
-              "name": "iterations",
-              "default": "Infinity",
-              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
-              "attribute": "iterations"
-            },
-            {
-              "kind": "field",
-              "name": "iterationStart",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
-              "attribute": "iteration-start"
-            },
-            {
-              "kind": "field",
-              "name": "keyframes",
-              "type": {
-                "text": "Keyframe[] | undefined"
-              },
-              "description": "The keyframes to use for the animation. If this is set, `name` will be ignored."
-            },
-            {
-              "kind": "field",
-              "name": "playbackRate",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
-              "attribute": "playback-rate"
+              "attribute": "formtarget"
             },
             {
               "kind": "field",
-              "name": "currentTime",
-              "type": {
-                "text": "CSSNumberish"
-              },
-              "description": "Gets and sets the current animation time."
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "handleAnimationFinish",
-              "privacy": "private"
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "handleAnimationCancel",
+              "kind": "method",
+              "name": "handleBlur",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handlePotChange",
+              "name": "handleFocus",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "createAnimation",
+              "name": "handleClick",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "destroyAnimation",
-              "privacy": "private"
+              "name": "handleInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleAnimationChange"
+              "name": "isButton",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handlePlayChange"
+              "name": "isLink",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handlePlaybackRateChange"
+              "name": "handleDisabledChange"
             },
             {
               "kind": "method",
-              "name": "cancel",
-              "description": "Clears all keyframe effects caused by this animation and aborts its playback."
+              "name": "click",
+              "description": "Simulates a click on the button."
             },
             {
               "kind": "method",
-              "name": "finish",
-              "description": "Sets the playback time to the end of the animation corresponding to the current playback direction."
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the button."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the button."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
             }
           ],
           "events": [
             {
-              "description": "Emitted when the animation is canceled.",
-              "name": "p-cancel",
-              "reactName": "onPCancel",
-              "eventName": "PCancelEvent"
+              "description": "Emitted when the button loses focus.",
+              "name": "p-blur",
+              "reactName": "onPBlur",
+              "eventName": "PBlurEvent"
             },
             {
-              "description": "Emitted when the animation finishes.",
-              "name": "p-finish",
-              "reactName": "onPFinish",
-              "eventName": "PFinishEvent"
+              "description": "Emitted when the button gains focus.",
+              "name": "p-focus",
+              "reactName": "onPFocus",
+              "eventName": "PFocusEvent"
             },
             {
-              "description": "Emitted when the animation starts or restarts.",
-              "name": "p-start",
-              "reactName": "onPStart",
-              "eventName": "PStartEvent"
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "p-invalid",
+              "reactName": "onPInvalid",
+              "eventName": "PInvalidEvent"
             }
           ],
           "attributes": [
             {
-              "name": "name",
+              "name": "title",
               "type": {
                 "text": "string"
               },
-              "default": "\"none\"",
-              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
-              "fieldName": "name"
+              "default": "\"\"",
+              "fieldName": "title"
             },
             {
-              "name": "play",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "\"default\" | \"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\" | \"text\""
               },
-              "default": "false",
-              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
-              "fieldName": "play"
+              "default": "\"default\"",
+              "description": "The button's theme variant.",
+              "fieldName": "variant"
             },
             {
-              "name": "delay",
+              "name": "size",
               "type": {
-                "text": "number"
+                "text": "\"small\" | \"medium\" | \"large\""
               },
-              "default": "0",
-              "description": "The number of milliseconds to delay the start of the animation.",
-              "fieldName": "delay"
+              "default": "\"medium\"",
+              "description": "The button's size.",
+              "fieldName": "size"
             },
             {
-              "name": "direction",
+              "name": "caret",
               "type": {
-                "text": "PlaybackDirection"
+                "text": "boolean"
               },
-              "default": "\"normal\"",
-              "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)",
-              "fieldName": "direction"
+              "default": "false",
+              "description": "Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.",
+              "fieldName": "caret"
             },
             {
-              "name": "duration",
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "1000",
-              "description": "The number of milliseconds each iteration of the animation takes to complete.",
-              "fieldName": "duration"
+              "default": "false",
+              "description": "Disables the button.",
+              "fieldName": "disabled"
             },
             {
-              "name": "easing",
+              "name": "loading",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"linear\"",
-              "description": "The easing function to use for the animation. This can be a Pure UI easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.",
-              "fieldName": "easing"
+              "default": "false",
+              "description": "Draws the button in a loading state.",
+              "fieldName": "loading"
             },
             {
-              "name": "end-delay",
+              "name": "outline",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
-              "fieldName": "endDelay"
+              "default": "false",
+              "description": "Draws an outlined button.",
+              "fieldName": "outline"
             },
             {
-              "name": "fill",
+              "name": "pill",
               "type": {
-                "text": "FillMode"
+                "text": "boolean"
               },
-              "default": "\"auto\"",
-              "description": "Sets how the animation applies styles to its target before and after its execution.",
-              "fieldName": "fill"
+              "default": "false",
+              "description": "Draws a pill-style button with rounded edges.",
+              "fieldName": "pill"
             },
             {
-              "name": "iterations",
-              "default": "Infinity",
-              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
-              "resolveInitializer": {
-                "module": "src/components/animation/animation.component.ts"
+              "name": "circle",
+              "type": {
+                "text": "boolean"
               },
-              "fieldName": "iterations"
+              "default": "false",
+              "description": "Draws a circular icon button. When this attribute is present, the button expects a single `<p-icon>` in the\ndefault slot.",
+              "fieldName": "circle"
             },
             {
-              "name": "iteration-start",
+              "name": "type",
               "type": {
-                "text": "number"
+                "text": "\"button\" | \"submit\" | \"reset\""
               },
-              "default": "0",
-              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
-              "fieldName": "iterationStart"
+              "default": "\"button\"",
+              "description": "The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n`<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.",
+              "fieldName": "type"
             },
             {
-              "name": "playback-rate",
+              "name": "name",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "1",
-              "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.",
-              "fieldName": "playbackRate"
-            }
-          ],
-          "superclass": {
-            "name": "PureElement",
-            "module": "/src/internal/pure-ui-element.js"
-          },
-          "summary": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).",
-          "tagNameWithoutPrefix": "animation",
-          "tagName": "p-animation",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n * @documentation https://pureui.xyz/components/animation\n * @status stable\n * @since 1.0\n *\n * @event p-cancel - Emitted when the animation is canceled.\n * @event p-finish - Emitted when the animation finishes.\n * @event p-start - Emitted when the animation starts or restarts.\n *\n * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To\n *  animate multiple elements, either wrap them in a single container or use multiple `<p-animation>` elements.\n */",
-          "documentation": "https://pureui.xyz/components/animation",
-          "status": "stable",
-          "since": "1.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "PAnimation",
-            "module": "components/animation/animation.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/button-group/button-group.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "PButtonGroup",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "One or more `<p-button>` elements to display in the button group.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "default": "\"\"",
+              "description": "The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.\nThis attribute is ignored when `href` is present.",
+              "fieldName": "name"
             },
             {
-              "kind": "field",
-              "name": "disableRole",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false"
+              "default": "\"\"",
+              "description": "The value of the button, submitted as a pair with the button's name as part of the form data, but only when this\nbutton is the submitter. This attribute is ignored when `href` is present.",
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "href",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-              "attribute": "label"
+              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+              "fieldName": "href"
             },
             {
-              "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private",
+              "name": "target",
+              "type": {
+                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
+              },
+              "description": "Tells the browser where to open the link. Only used when `href` is present.",
+              "fieldName": "target"
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"noreferrer noopener\"",
+              "description": "When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the\ndefault is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a\nspecific tab/window, this will prevent that from working correctly. You can remove or change the default value by\nsetting the attribute to an empty string or a value of your choice, respectively.",
+              "fieldName": "rel"
+            },
+            {
+              "name": "download",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is present.",
+              "fieldName": "download"
+            },
+            {
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "description": "The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\nvalue of this attribute must be an id of a form in the same document or shadow root as the button.",
+              "fieldName": "form"
+            },
+            {
+              "name": "formaction",
+              "type": {
+                "text": "string"
+              },
+              "description": "Used to override the form owner's `action` attribute.",
+              "fieldName": "formAction"
+            },
+            {
+              "name": "formenctype",
+              "type": {
+                "text": "\"application/x-www-form-urlencoded\" | \"multipart/form-data\" | \"text/plain\""
+              },
+              "description": "Used to override the form owner's `enctype` attribute.",
+              "fieldName": "formEnctype"
+            },
+            {
+              "name": "formmethod",
+              "type": {
+                "text": "\"post\" | \"get\""
+              },
+              "description": "Used to override the form owner's `method` attribute.",
+              "fieldName": "formMethod"
+            },
+            {
+              "name": "formnovalidate",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Used to override the form owner's `novalidate` attribute.",
+              "fieldName": "formNoValidate"
+            },
+            {
+              "name": "formtarget",
+              "type": {
+                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\" | string"
+              },
+              "description": "Used to override the form owner's `target` attribute.",
+              "fieldName": "formTarget"
+            }
+          ],
+          "superclass": {
+            "name": "PureElement",
+            "module": "/src/internal/pure-ui-element.js"
+          },
+          "summary": "Buttons represent actions that are available to the user.",
+          "tagNameWithoutPrefix": "button",
+          "tagName": "p-button",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Buttons represent actions that are available to the user.\n * @documentation https://pureui.xyz/components/button\n * @status stable\n * @since 1.0\n *\n * @dependency p-icon\n * @dependency p-spinner\n *\n * @event p-blur - Emitted when the button loses focus.\n * @event p-focus - Emitted when the button gains focus.\n * @event p-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @slot - The button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The button's label.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart caret - The button's caret icon, an `<p-icon>` element.\n * @csspart spinner - The spinner that shows when the button is in the loading state.\n */",
+          "documentation": "https://pureui.xyz/components/button",
+          "status": "stable",
+          "since": "1.0",
+          "dependencies": [
+            "p-icon",
+            "p-spinner"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "PButton",
+            "module": "components/button/button.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/button-group/button-group.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PButtonGroup",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "One or more `<p-button>` elements to display in the button group.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disableRole",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "attribute": "label"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private",
               "parameters": [
                 {
                   "name": "event",
@@ -4662,1283 +4662,1290 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/color-picker/color-picker.js",
+      "path": "components/copy-button/copy-button.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PColorPicker",
+          "name": "PCopyButton",
           "cssProperties": [
             {
-              "description": "The width of the color grid.",
-              "name": "--grid-width"
-            },
-            {
-              "description": "The height of the color grid.",
-              "name": "--grid-height"
-            },
-            {
-              "description": "The size of the color grid's handle.",
-              "name": "--grid-handle-size"
-            },
-            {
-              "description": "The height of the hue and alpha sliders.",
-              "name": "--slider-height"
-            },
-            {
-              "description": "The diameter of the slider's handle.",
-              "name": "--slider-handle-size"
+              "description": "The color to use for success feedback.",
+              "name": "--success-color"
             },
             {
-              "description": "The size of each predefined color swatch.",
-              "name": "--swatch-size"
+              "description": "The color to use for error feedback.",
+              "name": "--error-color"
             }
           ],
           "cssParts": [
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "description": "The internal `<button>` element.",
+              "name": "button"
             },
             {
-              "description": "The color picker's dropdown trigger.",
-              "name": "trigger"
+              "description": "The container that holds the copy icon.",
+              "name": "copy-icon"
             },
             {
-              "description": "The container that holds the swatches.",
-              "name": "swatches"
+              "description": "The container that holds the success icon.",
+              "name": "success-icon"
             },
             {
-              "description": "Each individual swatch.",
-              "name": "swatch"
+              "description": "The container that holds the error icon.",
+              "name": "error-icon"
             },
             {
-              "description": "The color grid.",
-              "name": "grid"
+              "description": "The tooltip's exported `base` part.",
+              "name": "tooltip__base"
             },
             {
-              "description": "The color grid's handle.",
-              "name": "grid-handle"
+              "description": "The tooltip's exported `popup` part.",
+              "name": "tooltip__base__popup"
             },
             {
-              "description": "Hue and opacity sliders.",
-              "name": "slider"
+              "description": "The tooltip's exported `arrow` part.",
+              "name": "tooltip__base__arrow"
             },
             {
-              "description": "Hue and opacity slider handles.",
-              "name": "slider-handle"
-            },
+              "description": "The tooltip's exported `body` part.",
+              "name": "tooltip__body"
+            }
+          ],
+          "slots": [
             {
-              "description": "The hue slider.",
-              "name": "hue-slider"
+              "description": "The icon to show in the default copy state. Works best with `<p-icon>`.",
+              "name": "copy-icon"
             },
             {
-              "description": "The hue slider's handle.",
-              "name": "hue-slider-handle"
+              "description": "The icon to show when the content is copied. Works best with `<p-icon>`.",
+              "name": "success-icon"
             },
             {
-              "description": "The opacity slider.",
-              "name": "opacity-slider"
-            },
+              "description": "The icon to show when a copy error occurs. Works best with `<p-icon>`.",
+              "name": "error-icon"
+            }
+          ],
+          "members": [
             {
-              "description": "The opacity slider's handle.",
-              "name": "opacity-slider-handle"
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{\n    \"p-icon\": PIcon,\n    \"p-tooltip\": PTooltip,\n  }"
             },
             {
-              "description": "The preview color.",
-              "name": "preview"
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
-              "description": "The text input.",
-              "name": "input"
-            },
-            {
-              "description": "The eye dropper button.",
-              "name": "eye-dropper-button"
-            },
-            {
-              "description": "The eye dropper button's exported `button` part.",
-              "name": "eye-dropper-button__base"
-            },
-            {
-              "description": "The eye dropper button's exported `prefix` part.",
-              "name": "eye-dropper-button__prefix"
-            },
-            {
-              "description": "The eye dropper button's exported `label` part.",
-              "name": "eye-dropper-button__label"
-            },
-            {
-              "description": "The eye dropper button's exported `suffix` part.",
-              "name": "eye-dropper-button__suffix"
-            },
-            {
-              "description": "The eye dropper button's exported `caret` part.",
-              "name": "eye-dropper-button__caret"
-            },
-            {
-              "description": "The format button.",
-              "name": "format-button"
-            },
-            {
-              "description": "The format button's exported `button` part.",
-              "name": "format-button__base"
-            },
-            {
-              "description": "The format button's exported `prefix` part.",
-              "name": "format-button__prefix"
-            },
-            {
-              "description": "The format button's exported `label` part.",
-              "name": "format-button__label"
-            },
-            {
-              "description": "The format button's exported `suffix` part.",
-              "name": "format-button__suffix"
-            },
-            {
-              "description": "The format button's exported `caret` part.",
-              "name": "format-button__caret"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The color picker's form label. Alternatively, you can use the `label` attribute.",
-              "name": "label"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{\n    \"p-button-group\": PButtonGroup,\n    \"p-button\": PButton,\n    \"p-dropdown\": PDropdown,\n    \"p-icon\": PIcon,\n    \"p-input\": PInput,\n    \"p-visually-hidden\": PVisuallyHidden,\n  }"
+              "kind": "field",
+              "name": "copyIcon",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "formControlController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new FormControlController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "isSafeValue",
+              "name": "successIcon",
               "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "base",
+              "name": "errorIcon",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLSlotElement"
               }
             },
             {
               "kind": "field",
-              "name": "input",
+              "name": "tooltip",
               "type": {
-                "text": "PInput"
+                "text": "PTooltip"
               }
             },
             {
               "kind": "field",
-              "name": "dropdown",
+              "name": "isCopying",
               "type": {
-                "text": "PDropdown"
-              }
+                "text": "boolean"
+              },
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "previewButton",
+              "name": "status",
               "type": {
-                "text": "HTMLButtonElement"
-              }
+                "text": "\"rest\" | \"success\" | \"error\""
+              },
+              "default": "\"rest\""
             },
             {
               "kind": "field",
-              "name": "trigger",
+              "name": "value",
               "type": {
-                "text": "HTMLButtonElement"
-              }
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The text value to copy.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "hasFocus",
+              "name": "from",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "\"\"",
+              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
+              "attribute": "from"
             },
             {
               "kind": "field",
-              "name": "isDraggingGridHandle",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Disables the copy button.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isEmpty",
+              "name": "copyLabel",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "\"\"",
+              "description": "A custom label to show in the tooltip.",
+              "attribute": "copy-label"
             },
             {
               "kind": "field",
-              "name": "inputValue",
+              "name": "successLabel",
               "type": {
                 "text": "string"
               },
-              "privacy": "private",
-              "default": "\"\""
+              "default": "\"\"",
+              "description": "A custom label to show in the tooltip after copying.",
+              "attribute": "success-label"
             },
             {
               "kind": "field",
-              "name": "hue",
+              "name": "errorLabel",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "0"
+              "default": "\"\"",
+              "description": "A custom label to show in the tooltip when a copy error occurs.",
+              "attribute": "error-label"
             },
             {
               "kind": "field",
-              "name": "saturation",
+              "name": "feedbackDuration",
               "type": {
                 "text": "number"
               },
-              "privacy": "private",
-              "default": "100"
+              "default": "1000",
+              "description": "The length of time to show feedback before restoring the default trigger.",
+              "attribute": "feedback-duration"
             },
             {
               "kind": "field",
-              "name": "brightness",
+              "name": "tooltipPlacement",
               "type": {
-                "text": "number"
+                "text": "\"top\" | \"right\" | \"bottom\" | \"left\""
               },
-              "privacy": "private",
-              "default": "100"
+              "default": "\"top\"",
+              "description": "The preferred placement of the tooltip.",
+              "attribute": "tooltip-placement"
             },
             {
               "kind": "field",
-              "name": "alpha",
+              "name": "hoist",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
+              "default": "false",
+              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
+              "attribute": "hoist"
+            },
+            {
+              "kind": "method",
+              "name": "handleCopy",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "showStatus",
               "privacy": "private",
-              "default": "100"
+              "parameters": [
+                {
+                  "name": "status",
+                  "type": {
+                    "text": "\"success\" | \"error\""
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the data has been copied.",
+              "name": "p-copy",
+              "reactName": "onPCopy",
+              "eventName": "PCopyEvent"
             },
             {
-              "kind": "field",
+              "description": "Emitted when the data could not be copied.",
+              "name": "p-error",
+              "reactName": "onPError",
+              "eventName": "PErrorEvent"
+            }
+          ],
+          "attributes": [
+            {
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
-              "attribute": "value"
+              "description": "The text value to copy.",
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "defaultValue",
+              "name": "from",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
+              "fieldName": "from"
             },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
-              "attribute": "label"
+              "default": "false",
+              "description": "Disables the copy button.",
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
-              "name": "format",
+              "name": "copy-label",
               "type": {
-                "text": "\"hex\" | \"rgb\" | \"hsl\" | \"hsv\""
+                "text": "string"
               },
-              "default": "\"hex\"",
-              "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
-              "attribute": "format"
+              "default": "\"\"",
+              "description": "A custom label to show in the tooltip.",
+              "fieldName": "copyLabel"
             },
             {
-              "kind": "field",
-              "name": "inline",
+              "name": "success-label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Renders the color picker inline rather than in a dropdown.",
-              "attribute": "inline",
-              "reflects": true
+              "default": "\"\"",
+              "description": "A custom label to show in the tooltip after copying.",
+              "fieldName": "successLabel"
             },
             {
-              "kind": "field",
-              "name": "size",
+              "name": "error-label",
               "type": {
-                "text": "\"small\" | \"medium\" | \"large\""
+                "text": "string"
               },
-              "default": "\"medium\"",
-              "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
-              "attribute": "size",
-              "reflects": true
+              "default": "\"\"",
+              "description": "A custom label to show in the tooltip when a copy error occurs.",
+              "fieldName": "errorLabel"
             },
             {
-              "kind": "field",
-              "name": "noFormatToggle",
+              "name": "feedback-duration",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Removes the button that lets users toggle between format.",
-              "attribute": "no-format-toggle"
+              "default": "1000",
+              "description": "The length of time to show feedback before restoring the default trigger.",
+              "fieldName": "feedbackDuration"
             },
             {
-              "kind": "field",
-              "name": "name",
+              "name": "tooltip-placement",
               "type": {
-                "text": "string"
+                "text": "\"top\" | \"right\" | \"bottom\" | \"left\""
               },
-              "default": "\"\"",
-              "description": "The name of the form control, submitted as a name/value pair with form data.",
-              "attribute": "name"
+              "default": "\"top\"",
+              "description": "The preferred placement of the tooltip.",
+              "fieldName": "tooltipPlacement"
             },
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the color picker.",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
+              "fieldName": "hoist"
+            }
+          ],
+          "superclass": {
+            "name": "PureElement",
+            "module": "/src/internal/pure-ui-element.js"
+          },
+          "summary": "Copies text data to the clipboard when the user clicks the trigger.",
+          "tagNameWithoutPrefix": "copy-button",
+          "tagName": "p-copy-button",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Copies text data to the clipboard when the user clicks the trigger.\n * @documentation https://pureui.xyz/components/copy\n * @status experimental\n * @since 2.7\n *\n * @dependency p-icon\n * @dependency p-tooltip\n *\n * @event p-copy - Emitted when the data has been copied.\n * @event p-error - Emitted when the data could not be copied.\n *\n * @slot copy-icon - The icon to show in the default copy state. Works best with `<p-icon>`.\n * @slot success-icon - The icon to show when the content is copied. Works best with `<p-icon>`.\n * @slot error-icon - The icon to show when a copy error occurs. Works best with `<p-icon>`.\n *\n * @csspart button - The internal `<button>` element.\n * @csspart copy-icon - The container that holds the copy icon.\n * @csspart success-icon - The container that holds the success icon.\n * @csspart error-icon - The container that holds the error icon.\n * @csspart tooltip__base - The tooltip's exported `base` part.\n * @csspart tooltip__base__popup - The tooltip's exported `popup` part.\n * @csspart tooltip__base__arrow - The tooltip's exported `arrow` part.\n * @csspart tooltip__body - The tooltip's exported `body` part.\n *\n * @cssproperty --success-color - The color to use for success feedback.\n * @cssproperty --error-color - The color to use for error feedback.\n *\n * @animation copy.in - The animation to use when feedback icons animate in.\n * @animation copy.out - The animation to use when feedback icons animate out.\n */",
+          "documentation": "https://pureui.xyz/components/copy",
+          "status": "experimental",
+          "since": "2.7",
+          "dependencies": [
+            "p-icon",
+            "p-tooltip"
+          ],
+          "animations": [
+            {
+              "name": "copy.in",
+              "description": "The animation to use when feedback icons animate in."
             },
             {
-              "kind": "field",
-              "name": "hoist",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "attribute": "hoist"
+              "name": "copy.out",
+              "description": "The animation to use when feedback icons animate out."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "PCopyButton",
+            "module": "components/copy-button/copy-button.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/color-picker/color-picker.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PColorPicker",
+          "cssProperties": [
+            {
+              "description": "The width of the color grid.",
+              "name": "--grid-width"
             },
             {
-              "kind": "field",
-              "name": "opacity",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
-              "attribute": "opacity"
+              "description": "The height of the color grid.",
+              "name": "--grid-height"
             },
             {
-              "kind": "field",
-              "name": "uppercase",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
-              "attribute": "uppercase"
+              "description": "The size of the color grid's handle.",
+              "name": "--grid-handle-size"
             },
             {
-              "kind": "field",
-              "name": "swatches",
-              "type": {
-                "text": "string | string[]"
-              },
-              "default": "\"\"",
-              "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
-              "attribute": "swatches"
+              "description": "The height of the hue and alpha sliders.",
+              "name": "--slider-height"
             },
             {
-              "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "attribute": "form",
-              "reflects": true
+              "description": "The diameter of the slider's handle.",
+              "name": "--slider-handle-size"
             },
             {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the color picker a required field.",
-              "attribute": "required",
-              "reflects": true
+              "description": "The size of each predefined color swatch.",
+              "name": "--swatch-size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "description": "The color picker's dropdown trigger.",
+              "name": "trigger"
             },
             {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
+              "description": "The container that holds the swatches.",
+              "name": "swatches"
             },
             {
-              "kind": "method",
-              "name": "handleCopy",
-              "privacy": "private"
+              "description": "Each individual swatch.",
+              "name": "swatch"
             },
             {
-              "kind": "field",
-              "name": "handleFocusIn",
-              "privacy": "private"
+              "description": "The color grid.",
+              "name": "grid"
             },
             {
-              "kind": "field",
-              "name": "handleFocusOut",
-              "privacy": "private"
+              "description": "The color grid's handle.",
+              "name": "grid-handle"
             },
             {
-              "kind": "method",
-              "name": "handleFormatToggle",
-              "privacy": "private"
+              "description": "Hue and opacity sliders.",
+              "name": "slider"
             },
             {
-              "kind": "method",
-              "name": "handleAlphaDrag",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "PointerEvent"
-                  }
-                }
-              ]
+              "description": "Hue and opacity slider handles.",
+              "name": "slider-handle"
             },
             {
-              "kind": "method",
-              "name": "handleHueDrag",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "PointerEvent"
-                  }
-                }
-              ]
+              "description": "The hue slider.",
+              "name": "hue-slider"
             },
             {
-              "kind": "method",
-              "name": "handleGridDrag",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "PointerEvent"
-                  }
-                }
-              ]
+              "description": "The hue slider's handle.",
+              "name": "hue-slider-handle"
             },
             {
-              "kind": "method",
-              "name": "handleAlphaKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "The opacity slider.",
+              "name": "opacity-slider"
             },
             {
-              "kind": "method",
-              "name": "handleHueKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "The opacity slider's handle.",
+              "name": "opacity-slider-handle"
             },
             {
-              "kind": "method",
-              "name": "handleGridKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "The preview color.",
+              "name": "preview"
             },
             {
-              "kind": "method",
-              "name": "handleInputChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "PChangeEvent"
-                  }
-                }
-              ]
+              "description": "The text input.",
+              "name": "input"
             },
             {
-              "kind": "method",
-              "name": "handleInputInput",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "PInputEvent"
-                  }
-                }
-              ]
+              "description": "The eye dropper button.",
+              "name": "eye-dropper-button"
             },
             {
-              "kind": "method",
-              "name": "handleInputKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "The eye dropper button's exported `button` part.",
+              "name": "eye-dropper-button__base"
             },
             {
-              "kind": "method",
-              "name": "handleInputInvalid",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "description": "The eye dropper button's exported `prefix` part.",
+              "name": "eye-dropper-button__prefix"
             },
             {
-              "kind": "method",
-              "name": "handleTouchMove",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "TouchEvent"
-                  }
-                }
-              ]
+              "description": "The eye dropper button's exported `label` part.",
+              "name": "eye-dropper-button__label"
             },
             {
-              "kind": "method",
-              "name": "parseColor",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "colorString",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "The eye dropper button's exported `suffix` part.",
+              "name": "eye-dropper-button__suffix"
             },
             {
-              "kind": "method",
-              "name": "setColor",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "colorString",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "The eye dropper button's exported `caret` part.",
+              "name": "eye-dropper-button__caret"
             },
             {
-              "kind": "method",
-              "name": "setLetterCase",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "string",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "The format button.",
+              "name": "format-button"
             },
             {
-              "kind": "method",
-              "name": "syncValues",
-              "privacy": "private"
+              "description": "The format button's exported `button` part.",
+              "name": "format-button__base"
             },
             {
-              "kind": "method",
-              "name": "handleAfterHide",
-              "privacy": "private"
+              "description": "The format button's exported `prefix` part.",
+              "name": "format-button__prefix"
             },
             {
-              "kind": "method",
-              "name": "handleEyeDropper",
-              "privacy": "private"
+              "description": "The format button's exported `label` part.",
+              "name": "format-button__label"
             },
             {
-              "kind": "method",
-              "name": "selectSwatch",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "color",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "The format button's exported `suffix` part.",
+              "name": "format-button__suffix"
             },
             {
-              "kind": "method",
-              "name": "getHexString",
+              "description": "The format button's exported `caret` part.",
+              "name": "format-button__caret"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The color picker's form label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{\n    \"p-button-group\": PButtonGroup,\n    \"p-button\": PButton,\n    \"p-dropdown\": PDropdown,\n    \"p-icon\": PIcon,\n    \"p-input\": PInput,\n    \"p-visually-hidden\": PVisuallyHidden,\n  }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "hue",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "saturation",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "brightness",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "alpha",
-                  "default": "100"
-                }
-              ],
-              "description": "Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100."
+              "readonly": true,
+              "default": "new FormControlController(this)"
             },
             {
-              "kind": "method",
-              "name": "stopNestedEventPropagation",
+              "kind": "field",
+              "name": "isSafeValue",
+              "type": {
+                "text": "boolean"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ]
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "handleFormatChange"
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
-              "kind": "method",
-              "name": "handleOpacityChange"
+              "kind": "field",
+              "name": "base",
+              "type": {
+                "text": "HTMLElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleValueChange",
-              "parameters": [
-                {
-                  "name": "oldValue",
-                  "type": {
-                    "text": "string | undefined"
-                  }
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "PInput"
+              }
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the color picker."
+              "kind": "field",
+              "name": "dropdown",
+              "type": {
+                "text": "PDropdown"
+              }
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the color picker."
+              "kind": "field",
+              "name": "previewButton",
+              "type": {
+                "text": "HTMLButtonElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "getFormattedValue",
-              "parameters": [
-                {
-                  "name": "format",
-                  "default": "\"hex\"",
-                  "type": {
-                    "text": "\"hex\" | \"hexa\" | \"rgb\" | \"rgba\" | \"hsl\" | \"hsla\" | \"hsv\" | \"hsva\""
-                  }
-                }
-              ],
-              "description": "Returns the current value as a string in the specified format."
+              "kind": "field",
+              "name": "trigger",
+              "type": {
+                "text": "HTMLButtonElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
+              "kind": "field",
+              "name": "isDraggingGridHandle",
+              "type": {
+                "text": "boolean"
               },
-              "description": "Gets the associated form, if one exists."
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+              "kind": "field",
+              "name": "isEmpty",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "setCustomValidity",
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the color picker loses focus.",
-              "name": "p-blur",
-              "reactName": "onPBlur",
-              "eventName": "PBlurEvent"
+              "kind": "field",
+              "name": "inputValue",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"\""
             },
             {
-              "description": "Emitted when the color picker's value changes.",
-              "name": "p-change",
-              "reactName": "onPChange",
-              "eventName": "PChangeEvent"
+              "kind": "field",
+              "name": "hue",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
             },
             {
-              "description": "Emitted when the color picker receives focus.",
-              "name": "p-focus",
-              "reactName": "onPFocus",
-              "eventName": "PFocusEvent"
+              "kind": "field",
+              "name": "saturation",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "100"
             },
             {
-              "description": "Emitted when the color picker receives input.",
-              "name": "p-input",
-              "reactName": "onPInput",
-              "eventName": "PInputEvent"
+              "kind": "field",
+              "name": "brightness",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "100"
             },
             {
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
-              "name": "p-invalid",
-              "reactName": "onPInvalid",
-              "eventName": "PInvalidEvent"
-            }
-          ],
-          "attributes": [
+              "kind": "field",
+              "name": "alpha",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "100"
+            },
             {
+              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
-              "fieldName": "value"
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
+              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
-              "fieldName": "label"
+              "attribute": "label"
             },
             {
+              "kind": "field",
               "name": "format",
               "type": {
                 "text": "\"hex\" | \"rgb\" | \"hsl\" | \"hsv\""
               },
               "default": "\"hex\"",
               "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
-              "fieldName": "format"
+              "attribute": "format"
             },
             {
+              "kind": "field",
               "name": "inline",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Renders the color picker inline rather than in a dropdown.",
-              "fieldName": "inline"
+              "attribute": "inline",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "size",
               "type": {
                 "text": "\"small\" | \"medium\" | \"large\""
               },
               "default": "\"medium\"",
               "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
-              "fieldName": "size"
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "name": "no-format-toggle",
+              "kind": "field",
+              "name": "noFormatToggle",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Removes the button that lets users toggle between format.",
-              "fieldName": "noFormatToggle"
+              "attribute": "no-format-toggle"
             },
             {
+              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "The name of the form control, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "attribute": "name"
             },
             {
+              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Disables the color picker.",
-              "fieldName": "disabled"
+              "attribute": "disabled",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "fieldName": "hoist"
+              "attribute": "hoist"
             },
             {
+              "kind": "field",
               "name": "opacity",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
-              "fieldName": "opacity"
+              "attribute": "opacity"
             },
             {
+              "kind": "field",
               "name": "uppercase",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
-              "fieldName": "uppercase"
+              "attribute": "uppercase"
             },
             {
+              "kind": "field",
               "name": "swatches",
               "type": {
                 "text": "string | string[]"
               },
               "default": "\"\"",
               "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
-              "fieldName": "swatches"
+              "attribute": "swatches"
             },
             {
+              "kind": "field",
               "name": "form",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "fieldName": "form"
+              "attribute": "form",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Makes the color picker a required field.",
-              "fieldName": "required"
-            }
-          ],
-          "superclass": {
-            "name": "PureElement",
-            "module": "/src/internal/pure-ui-element.js"
-          },
-          "summary": "Color pickers allow the user to select a color.",
-          "tagNameWithoutPrefix": "color-picker",
-          "tagName": "p-color-picker",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Color pickers allow the user to select a color.\n * @documentation https://pureui.xyz/components/color-picker\n * @status stable\n * @since 1.0\n *\n * @dependency p-button\n * @dependency p-button-group\n * @dependency p-dropdown\n * @dependency p-input\n * @dependency p-visually-hidden\n *\n * @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.\n *\n * @event p-blur - Emitted when the color picker loses focus.\n * @event p-change - Emitted when the color picker's value changes.\n * @event p-focus - Emitted when the color picker receives focus.\n * @event p-input - Emitted when the color picker receives input.\n * @event p-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart trigger - The color picker's dropdown trigger.\n * @csspart swatches - The container that holds the swatches.\n * @csspart swatch - Each individual swatch.\n * @csspart grid - The color grid.\n * @csspart grid-handle - The color grid's handle.\n * @csspart slider - Hue and opacity sliders.\n * @csspart slider-handle - Hue and opacity slider handles.\n * @csspart hue-slider - The hue slider.\n * @csspart hue-slider-handle - The hue slider's handle.\n * @csspart opacity-slider - The opacity slider.\n * @csspart opacity-slider-handle - The opacity slider's handle.\n * @csspart preview - The preview color.\n * @csspart input - The text input.\n * @csspart eye-dropper-button - The eye dropper button.\n * @csspart eye-dropper-button__base - The eye dropper button's exported `button` part.\n * @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part.\n * @csspart eye-dropper-button__label - The eye dropper button's exported `label` part.\n * @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part.\n * @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part.\n * @csspart format-button - The format button.\n * @csspart format-button__base - The format button's exported `button` part.\n * @csspart format-button__prefix - The format button's exported `prefix` part.\n * @csspart format-button__label - The format button's exported `label` part.\n * @csspart format-button__suffix - The format button's exported `suffix` part.\n * @csspart format-button__caret - The format button's exported `caret` part.\n *\n * @cssproperty --grid-width - The width of the color grid.\n * @cssproperty --grid-height - The height of the color grid.\n * @cssproperty --grid-handle-size - The size of the color grid's handle.\n * @cssproperty --slider-height - The height of the hue and alpha sliders.\n * @cssproperty --slider-handle-size - The diameter of the slider's handle.\n * @cssproperty --swatch-size - The size of each predefined color swatch.\n */",
-          "documentation": "https://pureui.xyz/components/color-picker",
-          "status": "stable",
-          "since": "1.0",
-          "dependencies": [
-            "p-button",
-            "p-button-group",
-            "p-dropdown",
-            "p-input",
-            "p-visually-hidden"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "PColorPicker",
-            "module": "components/color-picker/color-picker.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/copy-button/copy-button.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "PCopyButton",
-          "cssProperties": [
+              "attribute": "required",
+              "reflects": true
+            },
             {
-              "description": "The color to use for success feedback.",
-              "name": "--success-color"
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
-              "description": "The color to use for error feedback.",
-              "name": "--error-color"
-            }
-          ],
-          "cssParts": [
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
+            },
             {
-              "description": "The internal `<button>` element.",
-              "name": "button"
+              "kind": "method",
+              "name": "handleCopy",
+              "privacy": "private"
             },
             {
-              "description": "The container that holds the copy icon.",
-              "name": "copy-icon"
+              "kind": "field",
+              "name": "handleFocusIn",
+              "privacy": "private"
             },
             {
-              "description": "The container that holds the success icon.",
-              "name": "success-icon"
+              "kind": "field",
+              "name": "handleFocusOut",
+              "privacy": "private"
             },
             {
-              "description": "The container that holds the error icon.",
-              "name": "error-icon"
+              "kind": "method",
+              "name": "handleFormatToggle",
+              "privacy": "private"
             },
             {
-              "description": "The tooltip's exported `base` part.",
-              "name": "tooltip__base"
+              "kind": "method",
+              "name": "handleAlphaDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The tooltip's exported `popup` part.",
-              "name": "tooltip__base__popup"
+              "kind": "method",
+              "name": "handleHueDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The tooltip's exported `arrow` part.",
-              "name": "tooltip__base__arrow"
+              "kind": "method",
+              "name": "handleGridDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The tooltip's exported `body` part.",
-              "name": "tooltip__body"
-            }
-          ],
-          "slots": [
+              "kind": "method",
+              "name": "handleAlphaKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
             {
-              "description": "The icon to show in the default copy state. Works best with `<p-icon>`.",
-              "name": "copy-icon"
+              "kind": "method",
+              "name": "handleHueKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The icon to show when the content is copied. Works best with `<p-icon>`.",
-              "name": "success-icon"
+              "kind": "method",
+              "name": "handleGridKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The icon to show when a copy error occurs. Works best with `<p-icon>`.",
-              "name": "error-icon"
-            }
-          ],
-          "members": [
+              "kind": "method",
+              "name": "handleInputChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PChangeEvent"
+                  }
+                }
+              ]
+            },
             {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{\n    \"p-icon\": PIcon,\n    \"p-tooltip\": PTooltip,\n  }"
+              "kind": "method",
+              "name": "handleInputInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PInputEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "localize",
+              "kind": "method",
+              "name": "handleInputKeyDown",
               "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "copyIcon",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "kind": "method",
+              "name": "handleInputInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "successIcon",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "kind": "method",
+              "name": "handleTouchMove",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "TouchEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "errorIcon",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "kind": "method",
+              "name": "parseColor",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "colorString",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "tooltip",
-              "type": {
-                "text": "PTooltip"
-              }
+              "kind": "method",
+              "name": "setColor",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "colorString",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "isCopying",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "setLetterCase",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "string",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "syncValues",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleAfterHide",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleEyeDropper",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "selectSwatch",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "color",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getHexString",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "hue",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "saturation",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "brightness",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "alpha",
+                  "default": "100"
+                }
+              ],
+              "description": "Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100."
+            },
+            {
+              "kind": "method",
+              "name": "stopNestedEventPropagation",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFormatChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleOpacityChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleValueChange",
+              "parameters": [
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "string | undefined"
+                  }
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the color picker."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the color picker."
+            },
+            {
+              "kind": "method",
+              "name": "getFormattedValue",
+              "parameters": [
+                {
+                  "name": "format",
+                  "default": "\"hex\"",
+                  "type": {
+                    "text": "\"hex\" | \"hexa\" | \"rgb\" | \"rgba\" | \"hsl\" | \"hsla\" | \"hsv\" | \"hsva\""
+                  }
+                }
+              ],
+              "description": "Returns the current value as a string in the specified format."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
               },
-              "default": "false"
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
             },
             {
-              "kind": "field",
-              "name": "status",
-              "type": {
-                "text": "\"rest\" | \"success\" | \"error\""
-              },
-              "default": "\"rest\""
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the color picker loses focus.",
+              "name": "p-blur",
+              "reactName": "onPBlur",
+              "eventName": "PBlurEvent"
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The text value to copy.",
-              "attribute": "value"
+              "description": "Emitted when the color picker's value changes.",
+              "name": "p-change",
+              "reactName": "onPChange",
+              "eventName": "PChangeEvent"
             },
             {
-              "kind": "field",
-              "name": "from",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
-              "attribute": "from"
+              "description": "Emitted when the color picker receives focus.",
+              "name": "p-focus",
+              "reactName": "onPFocus",
+              "eventName": "PFocusEvent"
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the copy button.",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "Emitted when the color picker receives input.",
+              "name": "p-input",
+              "reactName": "onPInput",
+              "eventName": "PInputEvent"
             },
             {
-              "kind": "field",
-              "name": "copyLabel",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "p-invalid",
+              "reactName": "onPInvalid",
+              "eventName": "PInvalidEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "A custom label to show in the tooltip.",
-              "attribute": "copy-label"
+              "description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "successLabel",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "A custom label to show in the tooltip after copying.",
-              "attribute": "success-label"
+              "description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
+              "fieldName": "label"
             },
             {
-              "kind": "field",
-              "name": "errorLabel",
+              "name": "format",
               "type": {
-                "text": "string"
+                "text": "\"hex\" | \"rgb\" | \"hsl\" | \"hsv\""
               },
-              "default": "\"\"",
-              "description": "A custom label to show in the tooltip when a copy error occurs.",
-              "attribute": "error-label"
+              "default": "\"hex\"",
+              "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
+              "fieldName": "format"
             },
             {
-              "kind": "field",
-              "name": "feedbackDuration",
+              "name": "inline",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "1000",
-              "description": "The length of time to show feedback before restoring the default trigger.",
-              "attribute": "feedback-duration"
+              "default": "false",
+              "description": "Renders the color picker inline rather than in a dropdown.",
+              "fieldName": "inline"
             },
             {
-              "kind": "field",
-              "name": "tooltipPlacement",
+              "name": "size",
               "type": {
-                "text": "\"top\" | \"right\" | \"bottom\" | \"left\""
+                "text": "\"small\" | \"medium\" | \"large\""
               },
-              "default": "\"top\"",
-              "description": "The preferred placement of the tooltip.",
-              "attribute": "tooltip-placement"
+              "default": "\"medium\"",
+              "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
+              "fieldName": "size"
             },
             {
-              "kind": "field",
-              "name": "hoist",
+              "name": "no-format-toggle",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
-              "attribute": "hoist"
-            },
-            {
-              "kind": "method",
-              "name": "handleCopy",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "showStatus",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "status",
-                  "type": {
-                    "text": "\"success\" | \"error\""
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the data has been copied.",
-              "name": "p-copy",
-              "reactName": "onPCopy",
-              "eventName": "PCopyEvent"
-            },
-            {
-              "description": "Emitted when the data could not be copied.",
-              "name": "p-error",
-              "reactName": "onPError",
-              "eventName": "PErrorEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The text value to copy.",
-              "fieldName": "value"
+              "description": "Removes the button that lets users toggle between format.",
+              "fieldName": "noFormatToggle"
             },
             {
-              "name": "from",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
-              "fieldName": "from"
+              "description": "The name of the form control, submitted as a name/value pair with form data.",
+              "fieldName": "name"
             },
             {
               "name": "disabled",
@@ -5946,89 +5953,82 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the copy button.",
+              "description": "Disables the color picker.",
               "fieldName": "disabled"
             },
             {
-              "name": "copy-label",
+              "name": "hoist",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "A custom label to show in the tooltip.",
-              "fieldName": "copyLabel"
+              "default": "false",
+              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "fieldName": "hoist"
             },
             {
-              "name": "success-label",
+              "name": "opacity",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "A custom label to show in the tooltip after copying.",
-              "fieldName": "successLabel"
+              "default": "false",
+              "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
+              "fieldName": "opacity"
             },
             {
-              "name": "error-label",
+              "name": "uppercase",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "A custom label to show in the tooltip when a copy error occurs.",
-              "fieldName": "errorLabel"
+              "default": "false",
+              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
+              "fieldName": "uppercase"
             },
             {
-              "name": "feedback-duration",
+              "name": "swatches",
               "type": {
-                "text": "number"
+                "text": "string | string[]"
               },
-              "default": "1000",
-              "description": "The length of time to show feedback before restoring the default trigger.",
-              "fieldName": "feedbackDuration"
+              "default": "\"\"",
+              "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
+              "fieldName": "swatches"
             },
             {
-              "name": "tooltip-placement",
+              "name": "form",
               "type": {
-                "text": "\"top\" | \"right\" | \"bottom\" | \"left\""
+                "text": "string"
               },
-              "default": "\"top\"",
-              "description": "The preferred placement of the tooltip.",
-              "fieldName": "tooltipPlacement"
+              "default": "\"\"",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "fieldName": "form"
             },
             {
-              "name": "hoist",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
-              "fieldName": "hoist"
+              "description": "Makes the color picker a required field.",
+              "fieldName": "required"
             }
           ],
           "superclass": {
             "name": "PureElement",
             "module": "/src/internal/pure-ui-element.js"
           },
-          "summary": "Copies text data to the clipboard when the user clicks the trigger.",
-          "tagNameWithoutPrefix": "copy-button",
-          "tagName": "p-copy-button",
+          "summary": "Color pickers allow the user to select a color.",
+          "tagNameWithoutPrefix": "color-picker",
+          "tagName": "p-color-picker",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Copies text data to the clipboard when the user clicks the trigger.\n * @documentation https://pureui.xyz/components/copy\n * @status experimental\n * @since 2.7\n *\n * @dependency p-icon\n * @dependency p-tooltip\n *\n * @event p-copy - Emitted when the data has been copied.\n * @event p-error - Emitted when the data could not be copied.\n *\n * @slot copy-icon - The icon to show in the default copy state. Works best with `<p-icon>`.\n * @slot success-icon - The icon to show when the content is copied. Works best with `<p-icon>`.\n * @slot error-icon - The icon to show when a copy error occurs. Works best with `<p-icon>`.\n *\n * @csspart button - The internal `<button>` element.\n * @csspart copy-icon - The container that holds the copy icon.\n * @csspart success-icon - The container that holds the success icon.\n * @csspart error-icon - The container that holds the error icon.\n * @csspart tooltip__base - The tooltip's exported `base` part.\n * @csspart tooltip__base__popup - The tooltip's exported `popup` part.\n * @csspart tooltip__base__arrow - The tooltip's exported `arrow` part.\n * @csspart tooltip__body - The tooltip's exported `body` part.\n *\n * @cssproperty --success-color - The color to use for success feedback.\n * @cssproperty --error-color - The color to use for error feedback.\n *\n * @animation copy.in - The animation to use when feedback icons animate in.\n * @animation copy.out - The animation to use when feedback icons animate out.\n */",
-          "documentation": "https://pureui.xyz/components/copy",
-          "status": "experimental",
-          "since": "2.7",
+          "jsDoc": "/**\n * @summary Color pickers allow the user to select a color.\n * @documentation https://pureui.xyz/components/color-picker\n * @status stable\n * @since 1.0\n *\n * @dependency p-button\n * @dependency p-button-group\n * @dependency p-dropdown\n * @dependency p-input\n * @dependency p-visually-hidden\n *\n * @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.\n *\n * @event p-blur - Emitted when the color picker loses focus.\n * @event p-change - Emitted when the color picker's value changes.\n * @event p-focus - Emitted when the color picker receives focus.\n * @event p-input - Emitted when the color picker receives input.\n * @event p-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart trigger - The color picker's dropdown trigger.\n * @csspart swatches - The container that holds the swatches.\n * @csspart swatch - Each individual swatch.\n * @csspart grid - The color grid.\n * @csspart grid-handle - The color grid's handle.\n * @csspart slider - Hue and opacity sliders.\n * @csspart slider-handle - Hue and opacity slider handles.\n * @csspart hue-slider - The hue slider.\n * @csspart hue-slider-handle - The hue slider's handle.\n * @csspart opacity-slider - The opacity slider.\n * @csspart opacity-slider-handle - The opacity slider's handle.\n * @csspart preview - The preview color.\n * @csspart input - The text input.\n * @csspart eye-dropper-button - The eye dropper button.\n * @csspart eye-dropper-button__base - The eye dropper button's exported `button` part.\n * @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part.\n * @csspart eye-dropper-button__label - The eye dropper button's exported `label` part.\n * @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part.\n * @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part.\n * @csspart format-button - The format button.\n * @csspart format-button__base - The format button's exported `button` part.\n * @csspart format-button__prefix - The format button's exported `prefix` part.\n * @csspart format-button__label - The format button's exported `label` part.\n * @csspart format-button__suffix - The format button's exported `suffix` part.\n * @csspart format-button__caret - The format button's exported `caret` part.\n *\n * @cssproperty --grid-width - The width of the color grid.\n * @cssproperty --grid-height - The height of the color grid.\n * @cssproperty --grid-handle-size - The size of the color grid's handle.\n * @cssproperty --slider-height - The height of the hue and alpha sliders.\n * @cssproperty --slider-handle-size - The diameter of the slider's handle.\n * @cssproperty --swatch-size - The size of each predefined color swatch.\n */",
+          "documentation": "https://pureui.xyz/components/color-picker",
+          "status": "stable",
+          "since": "1.0",
           "dependencies": [
-            "p-icon",
-            "p-tooltip"
-          ],
-          "animations": [
-            {
-              "name": "copy.in",
-              "description": "The animation to use when feedback icons animate in."
-            },
-            {
-              "name": "copy.out",
-              "description": "The animation to use when feedback icons animate out."
-            }
+            "p-button",
+            "p-button-group",
+            "p-dropdown",
+            "p-input",
+            "p-visually-hidden"
           ]
         }
       ],
@@ -6037,8 +6037,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "PCopyButton",
-            "module": "components/copy-button/copy-button.js"
+            "name": "PColorPicker",
+            "module": "components/color-picker/color-picker.js"
           }
         }
       ]
@@ -20623,7 +20623,7 @@
   "package": {
     "name": "pure-uikit",
     "description": "A forward-thinking library of web components.",
-    "version": "1.3.13",
+    "version": "1.3.14",
     "author": "Mr.P",
     "homepage": "https://pureui.xyz",
     "license": "MIT"