pure-uikit 1.2.13 → 1.2.15

package/cdn/custom-elements.json

@@ -262,6 +262,192 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/animated-image/animated-image.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PAnimatedImage",
+          "cssProperties": [
+            {
+              "description": "The size of the icon box.",
+              "name": "--control-box-size"
+            },
+            {
+              "description": "The size of the play/pause icons.",
+              "name": "--icon-size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The container that surrounds the pause/play icons and provides their background.",
+              "name": "control-box"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Optional play icon to use instead of the default. Works best with `<p-icon>`.",
+              "name": "play-icon"
+            },
+            {
+              "description": "Optional pause icon to use instead of the default. Works best with `<p-icon>`.",
+              "name": "pause-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ \"p-icon\": PIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "animatedImage",
+              "type": {
+                "text": "HTMLImageElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "frozenFrame",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isLoaded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "description": "The path to the image to load.",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "alt",
+              "type": {
+                "text": "string"
+              },
+              "description": "A description of the image used by assistive devices.",
+              "attribute": "alt"
+            },
+            {
+              "kind": "field",
+              "name": "play",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Plays the animation. When this attribute is remove, the animation will pause.",
+              "attribute": "play",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleLoad",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleError",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handlePlayChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleSrcChange"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the image loads successfully.",
+              "name": "p-load",
+              "reactName": "onPLoad",
+              "eventName": "PLoadEvent"
+            },
+            {
+              "description": "Emitted when the image fails to load.",
+              "name": "p-error",
+              "reactName": "onPError",
+              "eventName": "PErrorEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "description": "The path to the image to load.",
+              "fieldName": "src"
+            },
+            {
+              "name": "alt",
+              "type": {
+                "text": "string"
+              },
+              "description": "A description of the image used by assistive devices.",
+              "fieldName": "alt"
+            },
+            {
+              "name": "play",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Plays the animation. When this attribute is remove, the animation will pause.",
+              "fieldName": "play"
+            }
+          ],
+          "superclass": {
+            "name": "PureElement",
+            "module": "/src/internal/pure-ui-element.js"
+          },
+          "summary": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.",
+          "tagNameWithoutPrefix": "animated-image",
+          "tagName": "p-animated-image",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n * @documentation https://pureui.xyz/components/animated-image\n * @status stable\n * @since 1.0\n *\n * @dependency p-icon\n *\n * @event p-load - Emitted when the image loads successfully.\n * @event p-error - Emitted when the image fails to load.\n *\n * @slot play-icon - Optional play icon to use instead of the default. Works best with `<p-icon>`.\n * @slot pause-icon - Optional pause icon to use instead of the default. Works best with `<p-icon>`.\n *\n * @part control-box - The container that surrounds the pause/play icons and provides their background.\n *\n * @cssproperty --control-box-size - The size of the icon box.\n * @cssproperty --icon-size - The size of the play/pause icons.\n */",
+          "documentation": "https://pureui.xyz/components/animated-image",
+          "status": "stable",
+          "since": "1.0",
+          "dependencies": [
+            "p-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "PAnimatedImage",
+            "module": "components/animated-image/animated-image.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/avatar/avatar.js",
@@ -465,346 +651,98 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/animation/animation.js",
+      "path": "components/badge/badge.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PAnimation",
+          "name": "PBadge",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
           "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.",
+              "description": "The badge's content.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "animation",
+              "name": "variant",
               "type": {
-                "text": "Animation | undefined"
+                "text": "\"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\""
               },
-              "privacy": "private"
+              "default": "\"primary\"",
+              "description": "The badge's theme variant.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hasStarted",
+              "name": "pill",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "attribute": "pill",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "defaultPot",
+              "name": "pulse",
               "type": {
-                "text": "Promise<HTMLSlotElement>"
-              }
-            },
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "attribute": "pulse",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "name",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "\"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\""
               },
-              "default": "\"none\"",
-              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
-              "attribute": "name"
+              "default": "\"primary\"",
+              "description": "The badge's theme variant.",
+              "fieldName": "variant"
             },
             {
-              "kind": "field",
-              "name": "play",
+              "name": "pill",
               "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
+              "description": "Draws a pill-style badge with rounded edges.",
+              "fieldName": "pill"
             },
             {
-              "kind": "field",
-              "name": "delay",
+              "name": "pulse",
               "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"
-            },
-            {
-              "kind": "field",
-              "name": "currentTime",
-              "type": {
-                "text": "CSSNumberish"
-              },
-              "description": "Gets and sets the current animation time."
-            },
-            {
-              "kind": "field",
-              "name": "handleAnimationFinish",
-              "privacy": "private"
-            },
-            {
-              "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"
+                "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"
+              "description": "Makes the badge pulsate to draw attention.",
+              "fieldName": "pulse"
             }
           ],
           "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",
+          "summary": "Badges are used to draw attention and display statuses or counts.",
+          "tagNameWithoutPrefix": "badge",
+          "tagName": "p-badge",
           "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",
+          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://pureui.xyz/components/badge\n * @status stable\n * @since 1.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://pureui.xyz/components/badge",
           "status": "stable",
           "since": "1.0"
         }
@@ -814,44 +752,34 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "PAnimation",
-            "module": "components/animation/animation.js"
+            "name": "PBadge",
+            "module": "components/badge/badge.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/animated-image/animated-image.js",
+      "path": "components/breadcrumb/breadcrumb.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PAnimatedImage",
-          "cssProperties": [
-            {
-              "description": "The size of the icon box.",
-              "name": "--control-box-size"
-            },
-            {
-              "description": "The size of the play/pause icons.",
-              "name": "--icon-size"
-            }
-          ],
+          "name": "PBreadcrumb",
           "cssParts": [
             {
-              "description": "The container that surrounds the pause/play icons and provides their background.",
-              "name": "control-box"
+              "description": "The component's base wrapper.",
+              "name": "base"
             }
           ],
           "slots": [
             {
-              "description": "Optional play icon to use instead of the default. Works best with `<p-icon>`.",
-              "name": "play-icon"
+              "description": "One or more breadcrumb items to display.",
+              "name": ""
             },
             {
-              "description": "Optional pause icon to use instead of the default. Works best with `<p-icon>`.",
-              "name": "pause-icon"
+              "description": "The separator to use between breadcrumb items. Works best with `<p-icon>`.",
+              "name": "separator"
             }
           ],
           "members": [
@@ -866,128 +794,72 @@
             },
             {
               "kind": "field",
-              "name": "animatedImage",
-              "type": {
-                "text": "HTMLImageElement"
-              }
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "frozenFrame",
-              "type": {
-                "text": "string"
-              }
+              "name": "separatorDir",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "isLoaded",
+              "name": "defaultSlot",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "src",
+              "name": "separatorSlot",
               "type": {
-                "text": "string"
-              },
-              "description": "The path to the image to load.",
-              "attribute": "src"
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "alt",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "description": "A description of the image used by assistive devices.",
-              "attribute": "alt"
-            },
-            {
-              "kind": "field",
-              "name": "play",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Plays the animation. When this attribute is remove, the animation will pause.",
-              "attribute": "play",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleClick",
-              "privacy": "private"
+              "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": "handleLoad",
+              "name": "getSeparator",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleError",
+              "name": "handleSlotChange",
               "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handlePlayChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleSrcChange"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the image loads successfully.",
-              "name": "p-load",
-              "reactName": "onPLoad",
-              "eventName": "PLoadEvent"
-            },
-            {
-              "description": "Emitted when the image fails to load.",
-              "name": "p-error",
-              "reactName": "onPError",
-              "eventName": "PErrorEvent"
             }
           ],
           "attributes": [
             {
-              "name": "src",
-              "type": {
-                "text": "string"
-              },
-              "description": "The path to the image to load.",
-              "fieldName": "src"
-            },
-            {
-              "name": "alt",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "description": "A description of the image used by assistive devices.",
-              "fieldName": "alt"
-            },
-            {
-              "name": "play",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Plays the animation. When this attribute is remove, the animation will pause.",
-              "fieldName": "play"
+              "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": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.",
-          "tagNameWithoutPrefix": "animated-image",
-          "tagName": "p-animated-image",
+          "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 A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n * @documentation https://pureui.xyz/components/animated-image\n * @status stable\n * @since 1.0\n *\n * @dependency p-icon\n *\n * @event p-load - Emitted when the image loads successfully.\n * @event p-error - Emitted when the image fails to load.\n *\n * @slot play-icon - Optional play icon to use instead of the default. Works best with `<p-icon>`.\n * @slot pause-icon - Optional pause icon to use instead of the default. Works best with `<p-icon>`.\n *\n * @part control-box - The container that surrounds the pause/play icons and provides their background.\n *\n * @cssproperty --control-box-size - The size of the icon box.\n * @cssproperty --icon-size - The size of the play/pause icons.\n */",
-          "documentation": "https://pureui.xyz/components/animated-image",
+          "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": [
@@ -1000,106 +872,134 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "PAnimatedImage",
-            "module": "components/animated-image/animated-image.js"
+            "name": "PBreadcrumb",
+            "module": "components/breadcrumb/breadcrumb.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/badge/badge.js",
+      "path": "components/breadcrumb-item/breadcrumb-item.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PBadge",
+          "name": "PBreadcrumbItem",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
+            },
+            {
+              "description": "The breadcrumb item's label.",
+              "name": "label"
+            },
+            {
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
+            },
+            {
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
+            },
+            {
+              "description": "The container that wraps the separator.",
+              "name": "separator"
             }
           ],
           "slots": [
             {
-              "description": "The badge's content.",
+              "description": "The breadcrumb item's label.",
               "name": ""
+            },
+            {
+              "description": "An optional prefix, usually an icon or icon button.",
+              "name": "prefix"
+            },
+            {
+              "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": "variant",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, \"prefix\", \"suffix\")"
+            },
+            {
+              "kind": "field",
+              "name": "href",
               "type": {
-                "text": "\"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\""
+                "text": "string | undefined"
               },
-              "default": "\"primary\"",
-              "description": "The badge's theme variant.",
-              "attribute": "variant",
-              "reflects": true
+              "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": "pill",
+              "name": "target",
               "type": {
-                "text": "boolean"
+                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined"
               },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "attribute": "pill",
-              "reflects": true
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "attribute": "target"
             },
             {
               "kind": "field",
-              "name": "pulse",
+              "name": "rel",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Makes the badge pulsate to draw attention.",
-              "attribute": "pulse",
-              "reflects": true
+              "default": "\"noreferrer noopener\"",
+              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+              "attribute": "rel"
             }
           ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "href",
               "type": {
-                "text": "\"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\""
+                "text": "string | undefined"
               },
-              "default": "\"primary\"",
-              "description": "The badge's theme variant.",
-              "fieldName": "variant"
+              "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"
             },
             {
-              "name": "pill",
+              "name": "target",
               "type": {
-                "text": "boolean"
+                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined"
               },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "fieldName": "pill"
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "fieldName": "target"
             },
             {
-              "name": "pulse",
+              "name": "rel",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Makes the badge pulsate to draw attention.",
-              "fieldName": "pulse"
+              "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": "Badges are used to draw attention and display statuses or counts.",
-          "tagNameWithoutPrefix": "badge",
-          "tagName": "p-badge",
+          "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 Badges are used to draw attention and display statuses or counts.\n * @documentation https://pureui.xyz/components/badge\n * @status stable\n * @since 1.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://pureui.xyz/components/badge",
+          "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"
         }
@@ -1109,34 +1009,58 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "PBadge",
-            "module": "components/badge/badge.js"
+            "name": "PBreadcrumbItem",
+            "module": "components/breadcrumb-item/breadcrumb-item.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/breadcrumb/breadcrumb.js",
+      "path": "components/button/button.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PBreadcrumb",
+          "name": "PButton",
           "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": "One or more breadcrumb items to display.",
+              "description": "The button's label.",
               "name": ""
             },
             {
-              "description": "The separator to use between breadcrumb items. Works best with `<p-icon>`.",
-              "name": "separator"
+              "description": "A presentational prefix icon or similar element.",
+              "name": "prefix"
+            },
+            {
+              "description": "A presentational suffix icon or similar element.",
+              "name": "suffix"
             }
           ],
           "members": [
@@ -1147,7 +1071,21 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ \"p-icon\": PIcon }"
+              "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\")"
             },
             {
               "kind": "field",
@@ -1158,155 +1096,172 @@
             },
             {
               "kind": "field",
-              "name": "separatorDir",
-              "privacy": "private"
+              "name": "button",
+              "type": {
+                "text": "HTMLButtonElement | HTMLLinkElement"
+              }
             },
             {
               "kind": "field",
-              "name": "defaultSlot",
+              "name": "hasFocus",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "separatorSlot",
+              "name": "invalid",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "boolean"
+              },
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "title",
               "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"
+              "attribute": "title"
             },
             {
-              "kind": "method",
-              "name": "getSeparator",
-              "privacy": "private"
+              "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": "handleSlotChange",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "\"small\" | \"medium\" | \"large\""
               },
-              "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": [
+              "default": "\"medium\"",
+              "description": "The button's size.",
+              "attribute": "size",
+              "reflects": true
+            },
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "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.",
+              "attribute": "caret",
+              "reflects": true
             },
             {
-              "description": "The breadcrumb item's label.",
-              "name": "label"
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the button.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the button in a loading state.",
+              "attribute": "loading",
+              "reflects": true
             },
             {
-              "description": "The container that wraps the suffix.",
-              "name": "suffix"
+              "kind": "field",
+              "name": "outline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws an outlined button.",
+              "attribute": "outline",
+              "reflects": true
             },
             {
-              "description": "The container that wraps the separator.",
-              "name": "separator"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The breadcrumb item's label.",
-              "name": ""
+              "kind": "field",
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a pill-style button with rounded edges.",
+              "attribute": "pill",
+              "reflects": true
             },
             {
-              "description": "An optional prefix, usually an icon or icon button.",
-              "name": "prefix"
+              "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": "An optional suffix, usually an icon or icon button.",
-              "name": "suffix"
+              "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": "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": "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"
+            },
             {
               "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, \"prefix\", \"suffix\")"
+              "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"
             },
             {
               "kind": "field",
               "name": "href",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "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.",
+              "default": "\"\"",
+              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
               "attribute": "href"
             },
             {
               "kind": "field",
               "name": "target",
               "type": {
-                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined"
+                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
               },
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "description": "Tells the browser where to open the link. Only used when `href` is present.",
               "attribute": "target"
             },
             {
@@ -1316,861 +1271,766 @@
                 "text": "string"
               },
               "default": "\"noreferrer noopener\"",
-              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+              "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.",
               "attribute": "rel"
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "href",
+              "kind": "field",
+              "name": "download",
               "type": {
                 "text": "string | undefined"
               },
-              "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": "Tells the browser to download the linked file as this filename. Only used when `href` is present.",
+              "attribute": "download"
             },
             {
-              "name": "target",
+              "kind": "field",
+              "name": "form",
               "type": {
-                "text": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined"
+                "text": "string"
               },
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
-              "fieldName": "target"
+              "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"
             },
             {
-              "name": "rel",
+              "kind": "field",
+              "name": "formAction",
               "type": {
                 "text": "string"
               },
-              "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": "Used to override the form owner's `action` attribute.",
+              "attribute": "formaction"
+            },
             {
-              "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"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleInvalid",
+              "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."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the button."
             },
             {
-              "description": "A presentational prefix icon or similar element.",
-              "name": "prefix"
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the button."
             },
             {
-              "description": "A presentational suffix icon or similar element.",
-              "name": "suffix"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{\n    \"p-icon\": PIcon,\n    \"p-spinner\": PSpinner,\n  }"
+              "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": "formControlController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new FormControlController(this, {\n    assumeInteractionOn: [\"click\"],\n  })"
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
             },
             {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, \"[default]\", \"prefix\", \"suffix\")"
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
             },
             {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            }
+          ],
+          "events": [
             {
-              "kind": "field",
-              "name": "button",
-              "type": {
-                "text": "HTMLButtonElement | HTMLLinkElement"
-              }
+              "description": "Emitted when the button loses focus.",
+              "name": "p-blur",
+              "reactName": "onPBlur",
+              "eventName": "PBlurEvent"
             },
             {
-              "kind": "field",
-              "name": "hasFocus",
-              "type": {
-                "text": "boolean"
-              },
-              "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": "\"\"",
-              "attribute": "title"
+              "fieldName": "title"
             },
             {
-              "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
+              "fieldName": "variant"
             },
             {
-              "kind": "field",
               "name": "size",
               "type": {
                 "text": "\"small\" | \"medium\" | \"large\""
               },
               "default": "\"medium\"",
               "description": "The button's size.",
-              "attribute": "size",
-              "reflects": true
+              "fieldName": "size"
             },
             {
-              "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.",
-              "attribute": "caret",
-              "reflects": true
+              "fieldName": "caret"
             },
             {
-              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Disables the button.",
-              "attribute": "disabled",
-              "reflects": true
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
               "name": "loading",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Draws the button in a loading state.",
-              "attribute": "loading",
-              "reflects": true
+              "fieldName": "loading"
             },
             {
-              "kind": "field",
               "name": "outline",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Draws an outlined button.",
-              "attribute": "outline",
-              "reflects": true
+              "fieldName": "outline"
             },
             {
-              "kind": "field",
               "name": "pill",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Draws a pill-style button with rounded edges.",
-              "attribute": "pill",
-              "reflects": true
+              "fieldName": "pill"
             },
             {
-              "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
+              "fieldName": "circle"
             },
             {
-              "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"
+              "fieldName": "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.",
-              "attribute": "name"
+              "fieldName": "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.",
-              "attribute": "value"
+              "fieldName": "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>`.",
-              "attribute": "href"
+              "fieldName": "href"
+            },
+            {
+              "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"
             },
             {
-              "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.",
-              "attribute": "target"
-            },
+              "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": "rel",
+              "name": "animation",
               "type": {
-                "text": "string"
+                "text": "Animation | undefined"
               },
-              "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.",
-              "attribute": "rel"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "download",
+              "name": "hasStarted",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is present.",
-              "attribute": "download"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "defaultPot",
               "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.",
-              "attribute": "form"
+                "text": "Promise<HTMLSlotElement>"
+              }
             },
             {
               "kind": "field",
-              "name": "formAction",
+              "name": "name",
               "type": {
                 "text": "string"
               },
-              "description": "Used to override the form owner's `action` attribute.",
-              "attribute": "formaction"
+              "default": "\"none\"",
+              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "formEnctype",
+              "name": "play",
               "type": {
-                "text": "\"application/x-www-form-urlencoded\" | \"multipart/form-data\" | \"text/plain\""
+                "text": "boolean"
               },
-              "description": "Used to override the form owner's `enctype` attribute.",
-              "attribute": "formenctype"
+              "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": "formMethod",
+              "name": "delay",
               "type": {
-                "text": "\"post\" | \"get\""
+                "text": "number"
               },
-              "description": "Used to override the form owner's `method` attribute.",
-              "attribute": "formmethod"
+              "default": "0",
+              "description": "The number of milliseconds to delay the start of the animation.",
+              "attribute": "delay"
             },
             {
               "kind": "field",
-              "name": "formNoValidate",
+              "name": "direction",
               "type": {
-                "text": "boolean"
+                "text": "PlaybackDirection"
               },
-              "description": "Used to override the form owner's `novalidate` attribute.",
-              "attribute": "formnovalidate"
+              "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": "formTarget",
+              "name": "duration",
               "type": {
-                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\" | string"
+                "text": "number"
               },
-              "description": "Used to override the form owner's `target` attribute.",
-              "attribute": "formtarget"
-            },
-            {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "default": "1000",
+              "description": "The number of milliseconds each iteration of the animation takes to complete.",
+              "attribute": "duration"
             },
             {
               "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleInvalid",
-              "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."
-            },
-            {
-              "kind": "method",
-              "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 button loses focus.",
-              "name": "p-blur",
-              "reactName": "onPBlur",
-              "eventName": "PBlurEvent"
-            },
-            {
-              "description": "Emitted when the button gains focus.",
-              "name": "p-focus",
-              "reactName": "onPFocus",
-              "eventName": "PFocusEvent"
-            },
-            {
-              "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": "title",
+              "name": "easing",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "fieldName": "title"
+              "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"
             },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "endDelay",
               "type": {
-                "text": "\"default\" | \"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\" | \"text\""
+                "text": "number"
               },
-              "default": "\"default\"",
-              "description": "The button's theme variant.",
-              "fieldName": "variant"
+              "default": "0",
+              "description": "The number of milliseconds to delay after the active period of an animation sequence.",
+              "attribute": "end-delay"
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "fill",
               "type": {
-                "text": "\"small\" | \"medium\" | \"large\""
+                "text": "FillMode"
               },
-              "default": "\"medium\"",
-              "description": "The button's size.",
-              "fieldName": "size"
+              "default": "\"auto\"",
+              "description": "Sets how the animation applies styles to its target before and after its execution.",
+              "attribute": "fill"
             },
             {
-              "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"
+              "kind": "field",
+              "name": "iterations",
+              "default": "Infinity",
+              "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.",
+              "attribute": "iterations"
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "iterationStart",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Disables the button.",
-              "fieldName": "disabled"
+              "default": "0",
+              "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).",
+              "attribute": "iteration-start"
             },
             {
-              "name": "loading",
+              "kind": "field",
+              "name": "keyframes",
               "type": {
-                "text": "boolean"
+                "text": "Keyframe[] | undefined"
               },
-              "default": "false",
-              "description": "Draws the button in a loading state.",
-              "fieldName": "loading"
+              "description": "The keyframes to use for the animation. If this is set, `name` will be ignored."
             },
             {
-              "name": "outline",
+              "kind": "field",
+              "name": "playbackRate",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Draws an outlined button.",
-              "fieldName": "outline"
+              "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": "pill",
+              "kind": "field",
+              "name": "currentTime",
               "type": {
-                "text": "boolean"
+                "text": "CSSNumberish"
               },
-              "default": "false",
-              "description": "Draws a pill-style button with rounded edges.",
-              "fieldName": "pill"
+              "description": "Gets and sets the current animation time."
             },
             {
-              "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"
+              "kind": "field",
+              "name": "handleAnimationFinish",
+              "privacy": "private"
             },
             {
-              "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"
+              "kind": "field",
+              "name": "handleAnimationCancel",
+              "privacy": "private"
             },
             {
-              "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"
+              "kind": "method",
+              "name": "handlePotChange",
+              "privacy": "private"
             },
             {
-              "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"
+              "kind": "method",
+              "name": "createAnimation",
+              "privacy": "private"
             },
             {
-              "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"
+              "kind": "method",
+              "name": "destroyAnimation",
+              "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"
+              "kind": "method",
+              "name": "handleAnimationChange"
             },
             {
-              "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"
+              "kind": "method",
+              "name": "handlePlayChange"
             },
             {
-              "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"
+              "kind": "method",
+              "name": "handlePlaybackRateChange"
             },
             {
-              "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"
+              "kind": "method",
+              "name": "cancel",
+              "description": "Clears all keyframe effects caused by this animation and aborts its playback."
             },
             {
-              "name": "formaction",
-              "type": {
-                "text": "string"
-              },
-              "description": "Used to override the form owner's `action` attribute.",
-              "fieldName": "formAction"
+              "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"
             },
             {
-              "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"
+              "description": "Emitted when the animation finishes.",
+              "name": "p-finish",
+              "reactName": "onPFinish",
+              "eventName": "PFinishEvent"
             },
             {
-              "name": "formmethod",
+              "description": "Emitted when the animation starts or restarts.",
+              "name": "p-start",
+              "reactName": "onPStart",
+              "eventName": "PStartEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
               "type": {
-                "text": "\"post\" | \"get\""
+                "text": "string"
               },
-              "description": "Used to override the form owner's `method` attribute.",
-              "fieldName": "formMethod"
+              "default": "\"none\"",
+              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+              "fieldName": "name"
             },
             {
-              "name": "formnovalidate",
+              "name": "play",
               "type": {
                 "text": "boolean"
               },
-              "description": "Used to override the form owner's `novalidate` attribute.",
-              "fieldName": "formNoValidate"
+              "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": "formtarget",
+              "name": "delay",
               "type": {
-                "text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\" | string"
+                "text": "number"
               },
-              "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": [
+              "default": "0",
+              "description": "The number of milliseconds to delay the start of the animation.",
+              "fieldName": "delay"
+            },
             {
-              "kind": "field",
-              "name": "defaultSlot",
+              "name": "direction",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "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"
             },
             {
-              "kind": "field",
-              "name": "disableRole",
+              "name": "duration",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false"
+              "default": "1000",
+              "description": "The number of milliseconds each iteration of the animation takes to complete.",
+              "fieldName": "duration"
             },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "easing",
               "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"
+              "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"
             },
             {
-              "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "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"
             },
             {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "name": "fill",
+              "type": {
+                "text": "FillMode"
+              },
+              "default": "\"auto\"",
+              "description": "Sets how the animation applies styles to its target before and after its execution.",
+              "fieldName": "fill"
             },
             {
-              "kind": "method",
-              "name": "handleMouseOver",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "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"
             },
             {
-              "kind": "method",
-              "name": "handleMouseOut",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "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"
             },
             {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
+              "name": "playback-rate",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "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.",
-              "fieldName": "label"
+              "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": "Button groups can be used to group related buttons into sections.",
-          "tagNameWithoutPrefix": "button-group",
-          "tagName": "p-button-group",
+          "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 Button groups can be used to group related buttons into sections.\n * @documentation https://pureui.xyz/components/button-group\n * @status stable\n * @since 1.0\n *\n * @slot - One or more `<p-button>` elements to display in the button group.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://pureui.xyz/components/button-group",
+          "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"
         }
@@ -2180,8 +2040,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "PButtonGroup",
-            "module": "components/button-group/button-group.js"
+            "name": "PAnimation",
+            "module": "components/animation/animation.js"
           }
         }
       ]
@@ -3459,30 +3319,170 @@
               "fieldName": "showAdjacentDates"
             },
             {
-              "name": "value",
+              "name": "value",
+              "type": {
+                "text": "string | Date | (string | Date)[]"
+              },
+              "fieldName": "value"
+            }
+          ],
+          "superclass": {
+            "name": "PureElement",
+            "module": "/src/internal/pure-ui-element.js"
+          },
+          "summary": "Calendar shows a monthly view of the Gregorian calendar, optionally allowing users to interact with dates.",
+          "tagNameWithoutPrefix": "calendar",
+          "tagName": "p-calendar",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Calendar shows a monthly view of the Gregorian calendar, optionally allowing users to interact with dates.\n * @documentation https://pureui.xyz/components/calendar\n *\n * @since 1.1.5\n * @status stable\n *\n * @dependency p-icon\n * @dependency p-popup\n * @dependency p-tag\n *\n * @event p-change - Emitted when the control's value changes.\n * @event p-clear - Emitted when the control's value is cleared.\n * @event p-input - Emitted when the control receives input.\n * @event p-focus - Emitted when the control gains focus.\n * @event p-blur - Emitted when the control loses focus.\n * @event p-show - Emitted when the select's menu opens.\n * @event p-after-show - Emitted after the select's menu opens and all animations are complete.\n * @event p-hide - Emitted when the select's menu closes.\n * @event p-after-hide - Emitted after the select's menu closes and all animations are complete.\n * @event p-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n *\n * @slot footer - Optional content to place in the calendar's footer.\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the calendar.\n * @slot suffix - Used to append a presentational icon or similar element to the calendar.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @csspart calendar - The component's container.\n * @csspart day - Targets day cells.\n * @csspart day-label - Targets the day labels (the name of the days in the grid).\n * @csspart day-weekend - Targets days that fall on weekends.\n * @csspart day-weekday - Targets weekdays.\n * @csspart day-current-focus - Targets days that are focused (used for keyboard navigation).\n * @csspart day-current-month - Targets days in the current month.\n * @csspart day-previous-month - Targets days in the previous month.\n * @csspart day-next-month - Targets days in the next month.\n * @csspart day-today - Targets today.\n * @csspart day-selected - Targets selected days.\n * @csspart day-selection-start - Targets days that begin a selection.\n * @csspart day-selected-in-range - Targets days that are in the middle of a selection when use type=\"range\".\n * @csspart day-selection-end - Targets days that end a selection.\n * @csspart tag - Targets days that selected when use type=\"multiple\".\n *\n *\n * @cssproperty --border-color - The calendar's border color.\n * @cssproperty --border-width - The calendar's border width.\n * @cssproperty --border-radius - The border radius of the calendar.\n */",
+          "documentation": "https://pureui.xyz/components/calendar",
+          "since": "1.1.5",
+          "status": "stable",
+          "dependencies": [
+            "p-icon",
+            "p-popup",
+            "p-tag"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "PCalendar",
+            "module": "components/calendar/calendar.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",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseOver",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseOut",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
               "type": {
-                "text": "string | Date | (string | Date)[]"
+                "text": "string"
               },
-              "fieldName": "value"
+              "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.",
+              "fieldName": "label"
             }
           ],
           "superclass": {
             "name": "PureElement",
             "module": "/src/internal/pure-ui-element.js"
           },
-          "summary": "Calendar shows a monthly view of the Gregorian calendar, optionally allowing users to interact with dates.",
-          "tagNameWithoutPrefix": "calendar",
-          "tagName": "p-calendar",
+          "summary": "Button groups can be used to group related buttons into sections.",
+          "tagNameWithoutPrefix": "button-group",
+          "tagName": "p-button-group",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Calendar shows a monthly view of the Gregorian calendar, optionally allowing users to interact with dates.\n * @documentation https://pureui.xyz/components/calendar\n *\n * @since 1.1.5\n * @status stable\n *\n * @dependency p-icon\n * @dependency p-popup\n * @dependency p-tag\n *\n * @event p-change - Emitted when the control's value changes.\n * @event p-clear - Emitted when the control's value is cleared.\n * @event p-input - Emitted when the control receives input.\n * @event p-focus - Emitted when the control gains focus.\n * @event p-blur - Emitted when the control loses focus.\n * @event p-show - Emitted when the select's menu opens.\n * @event p-after-show - Emitted after the select's menu opens and all animations are complete.\n * @event p-hide - Emitted when the select's menu closes.\n * @event p-after-hide - Emitted after the select's menu closes and all animations are complete.\n * @event p-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n *\n * @slot footer - Optional content to place in the calendar's footer.\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the calendar.\n * @slot suffix - Used to append a presentational icon or similar element to the calendar.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @csspart calendar - The component's container.\n * @csspart day - Targets day cells.\n * @csspart day-label - Targets the day labels (the name of the days in the grid).\n * @csspart day-weekend - Targets days that fall on weekends.\n * @csspart day-weekday - Targets weekdays.\n * @csspart day-current-focus - Targets days that are focused (used for keyboard navigation).\n * @csspart day-current-month - Targets days in the current month.\n * @csspart day-previous-month - Targets days in the previous month.\n * @csspart day-next-month - Targets days in the next month.\n * @csspart day-today - Targets today.\n * @csspart day-selected - Targets selected days.\n * @csspart day-selection-start - Targets days that begin a selection.\n * @csspart day-selected-in-range - Targets days that are in the middle of a selection when use type=\"range\".\n * @csspart day-selection-end - Targets days that end a selection.\n * @csspart tag - Targets days that selected when use type=\"multiple\".\n *\n *\n * @cssproperty --border-color - The calendar's border color.\n * @cssproperty --border-width - The calendar's border width.\n * @cssproperty --border-radius - The border radius of the calendar.\n */",
-          "documentation": "https://pureui.xyz/components/calendar",
-          "since": "1.1.5",
+          "jsDoc": "/**\n * @summary Button groups can be used to group related buttons into sections.\n * @documentation https://pureui.xyz/components/button-group\n * @status stable\n * @since 1.0\n *\n * @slot - One or more `<p-button>` elements to display in the button group.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://pureui.xyz/components/button-group",
           "status": "stable",
-          "dependencies": [
-            "p-icon",
-            "p-popup",
-            "p-tag"
-          ]
+          "since": "1.0"
         }
       ],
       "exports": [
@@ -3490,8 +3490,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "PCalendar",
-            "module": "components/calendar/calendar.js"
+            "name": "PButtonGroup",
+            "module": "components/button-group/button-group.js"
           }
         }
       ]
@@ -11438,247 +11438,27 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Watches for changes to the character data contained within the node.",
-              "fieldName": "charData"
-            },
-            {
-              "name": "char-data-old-value",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the previous value of the node's text should be recorded.",
-              "fieldName": "charDataOldValue"
-            },
-            {
-              "name": "child-list",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Watches for the addition or removal of new child nodes.",
-              "fieldName": "childList"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the observer.",
-              "fieldName": "disabled"
-            }
-          ],
-          "superclass": {
-            "name": "PureElement",
-            "module": "/src/internal/pure-ui-element.js"
-          },
-          "summary": "The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).",
-          "tagNameWithoutPrefix": "mutation-observer",
-          "tagName": "p-mutation-observer",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).\n * @documentation https://pureui.xyz/components/mutation-observer\n * @status stable\n * @since 1.0\n *\n * @event {{ mutationList: MutationRecord[] }} p-mutation - Emitted when a mutation occurs.\n *\n * @slot - The content to watch for mutations.\n */",
-          "documentation": "https://pureui.xyz/components/mutation-observer",
-          "status": "stable",
-          "since": "1.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "PMutationObserver",
-            "module": "components/mutation-observer/mutation-observer.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/option/option.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "POption",
-          "cssParts": [
-            {
-              "description": "The checked icon, an `<p-icon>` element.",
-              "name": "checked-icon"
-            },
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The option's label.",
-              "name": "label"
-            },
-            {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
-            },
-            {
-              "description": "The container that wraps the suffix.",
-              "name": "suffix"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The option's label.",
-              "name": ""
-            },
-            {
-              "description": "Used to prepend an icon or similar element to the menu item.",
-              "name": "prefix"
-            },
-            {
-              "description": "Used to append an icon or similar element to the menu item.",
-              "name": "suffix"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ \"p-icon\": PIcon }"
-            },
-            {
-              "kind": "field",
-              "name": "cachedTextLabel",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "current",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "hasHover",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "hidden",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When true, the option is hidden from view.\n\nThis is typically used when dynamically rendering a list of options. When an option becomes hidden, it will not be\nrendered in the DOM. When the option becomes visible again, it will be re-rendered in the DOM.",
-              "attribute": "hidden",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
-              "attribute": "value",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the option in a disabled state, preventing selection.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleDefaultSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseEnter",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseLeave",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleDisabledChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleSelectedChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleValueChange"
-            },
-            {
-              "kind": "method",
-              "name": "getTextLabel",
-              "description": "Returns a plain text label based on the option's content."
-            }
-          ],
-          "attributes": [
+              "default": "false",
+              "description": "Watches for changes to the character data contained within the node.",
+              "fieldName": "charData"
+            },
             {
-              "name": "hidden",
+              "name": "char-data-old-value",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, the option is hidden from view.\n\nThis is typically used when dynamically rendering a list of options. When an option becomes hidden, it will not be\nrendered in the DOM. When the option becomes visible again, it will be re-rendered in the DOM.",
-              "fieldName": "hidden"
+              "description": "Indicates whether or not the previous value of the node's text should be recorded.",
+              "fieldName": "charDataOldValue"
             },
             {
-              "name": "value",
+              "name": "child-list",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
-              "fieldName": "value"
+              "default": "false",
+              "description": "Watches for the addition or removal of new child nodes.",
+              "fieldName": "childList"
             },
             {
               "name": "disabled",
@@ -11686,7 +11466,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the option in a disabled state, preventing selection.",
+              "description": "Disables the observer.",
               "fieldName": "disabled"
             }
           ],
@@ -11694,17 +11474,14 @@
             "name": "PureElement",
             "module": "/src/internal/pure-ui-element.js"
           },
-          "summary": "Options define the selectable items within various form controls such as [select](/components/select).",
-          "tagNameWithoutPrefix": "option",
-          "tagName": "p-option",
+          "summary": "The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).",
+          "tagNameWithoutPrefix": "mutation-observer",
+          "tagName": "p-mutation-observer",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @documentation https://pureui.xyz/components/option\n * @status stable\n * @since 1.0\n *\n * @dependency p-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<p-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */",
-          "documentation": "https://pureui.xyz/components/option",
+          "jsDoc": "/**\n * @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).\n * @documentation https://pureui.xyz/components/mutation-observer\n * @status stable\n * @since 1.0\n *\n * @event {{ mutationList: MutationRecord[] }} p-mutation - Emitted when a mutation occurs.\n *\n * @slot - The content to watch for mutations.\n */",
+          "documentation": "https://pureui.xyz/components/mutation-observer",
           "status": "stable",
-          "since": "1.0",
-          "dependencies": [
-            "p-icon"
-          ]
+          "since": "1.0"
         }
       ],
       "exports": [
@@ -11712,21 +11489,33 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "POption",
-            "module": "components/option/option.js"
+            "name": "PMutationObserver",
+            "module": "components/mutation-observer/mutation-observer.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/paginate/paginate.js",
+      "path": "components/option/option.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PPaginate",
+          "name": "POption",
           "cssParts": [
+            {
+              "description": "The checked icon, an `<p-icon>` element.",
+              "name": "checked-icon"
+            },
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The option's label.",
+              "name": "label"
+            },
             {
               "description": "The container that wraps the prefix.",
               "name": "prefix"
@@ -11738,11 +11527,15 @@
           ],
           "slots": [
             {
-              "description": "A presentational prefix icon or similar element.",
+              "description": "The option's label.",
+              "name": ""
+            },
+            {
+              "description": "Used to prepend an icon or similar element to the menu item.",
               "name": "prefix"
             },
             {
-              "description": "A presentational suffix icon or similar element.",
+              "description": "Used to append an icon or similar element to the menu item.",
               "name": "suffix"
             }
           ],
@@ -11754,7 +11547,15 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{\n    \"p-icon\": PIcon,\n  }"
+              "default": "{ \"p-icon\": PIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "cachedTextLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -11765,232 +11566,144 @@
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "defaultSlot",
               "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "attribute": "title"
+                "text": "HTMLSlotElement"
+              }
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "current",
               "type": {
-                "text": "\"default\" | \"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\" | \"text\""
+                "text": "boolean"
               },
-              "default": "\"default\"",
-              "description": "The button's theme variant.",
-              "attribute": "variant",
-              "reflects": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "selected",
               "type": {
-                "text": "\"small\" | \"medium\" | \"large\""
+                "text": "boolean"
               },
-              "default": "\"medium\"",
-              "description": "The button's size.",
-              "attribute": "size",
-              "reflects": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "hasHover",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Disables the button.",
-              "attribute": "disabled",
-              "reflects": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "pill",
+              "name": "hidden",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws a pill-style button with rounded edges.",
-              "attribute": "pill",
+              "description": "When true, the option is hidden from view.\n\nThis is typically used when dynamically rendering a list of options. When an option becomes hidden, it will not be\nrendered in the DOM. When the option becomes visible again, it will be re-rendered in the DOM.",
+              "attribute": "hidden",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "total",
+              "name": "value",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "119",
-              "description": "The total items to paginate.",
-              "attribute": "total",
+              "default": "\"\"",
+              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
+              "attribute": "value",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "page",
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "1",
-              "description": "The current page.",
-              "attribute": "page",
+              "default": "false",
+              "description": "Draws the option in a disabled state, preventing selection.",
+              "attribute": "disabled",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "limit",
-              "type": {
-                "text": "number"
-              },
-              "default": "12",
-              "description": "The limit items in a page.",
-              "attribute": "limit",
-              "reflects": true
+              "kind": "method",
+              "name": "handleDefaultSlotChange",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "maxVisiblePages",
-              "type": {
-                "text": "number"
-              },
-              "default": "3",
-              "description": "The limit visible pages to show.",
-              "attribute": "max-visible-pages",
-              "reflects": true
+              "kind": "method",
+              "name": "handleMouseEnter",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "getPages",
+              "name": "handleMouseLeave",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "changePage",
-              "parameters": [
-                {
-                  "name": "newPage",
-                  "type": {
-                    "text": "number | string"
-                  }
-                }
-              ]
+              "name": "handleDisabledChange"
             },
             {
               "kind": "method",
-              "name": "prevPage"
+              "name": "handleSelectedChange"
             },
             {
               "kind": "method",
-              "name": "nextPage"
-            }
-          ],
-          "events": [
+              "name": "handleValueChange"
+            },
             {
-              "description": "Emitted when the page changed.",
-              "name": "p-change",
-              "reactName": "onPChange",
-              "eventName": "PChangeEvent"
+              "kind": "method",
+              "name": "getTextLabel",
+              "description": "Returns a plain text label based on the option's content."
             }
           ],
           "attributes": [
             {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "fieldName": "title"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\" | \"text\""
-              },
-              "default": "\"default\"",
-              "description": "The button's theme variant.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "\"small\" | \"medium\" | \"large\""
-              },
-              "default": "\"medium\"",
-              "description": "The button's size.",
-              "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the button.",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "pill",
+              "name": "hidden",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws a pill-style button with rounded edges.",
-              "fieldName": "pill"
-            },
-            {
-              "name": "total",
-              "type": {
-                "text": "number"
-              },
-              "default": "119",
-              "description": "The total items to paginate.",
-              "fieldName": "total"
-            },
-            {
-              "name": "page",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "description": "The current page.",
-              "fieldName": "page"
+              "description": "When true, the option is hidden from view.\n\nThis is typically used when dynamically rendering a list of options. When an option becomes hidden, it will not be\nrendered in the DOM. When the option becomes visible again, it will be re-rendered in the DOM.",
+              "fieldName": "hidden"
             },
             {
-              "name": "limit",
+              "name": "value",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "12",
-              "description": "The limit items in a page.",
-              "fieldName": "limit"
+              "default": "\"\"",
+              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
+              "fieldName": "value"
             },
             {
-              "name": "max-visible-pages",
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "3",
-              "description": "The limit visible pages to show.",
-              "fieldName": "maxVisiblePages"
+              "default": "false",
+              "description": "Draws the option in a disabled state, preventing selection.",
+              "fieldName": "disabled"
             }
           ],
           "superclass": {
             "name": "PureElement",
             "module": "/src/internal/pure-ui-element.js"
           },
-          "summary": "Paginate represent actions that are available to the user.",
-          "tagNameWithoutPrefix": "paginate",
-          "tagName": "p-paginate",
+          "summary": "Options define the selectable items within various form controls such as [select](/components/select).",
+          "tagNameWithoutPrefix": "option",
+          "tagName": "p-option",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Paginate 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-button\n *\n * @event p-change - Emitted when the page changed.\n *\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */",
-          "documentation": "https://pureui.xyz/components/button",
+          "jsDoc": "/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @documentation https://pureui.xyz/components/option\n * @status stable\n * @since 1.0\n *\n * @dependency p-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<p-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */",
+          "documentation": "https://pureui.xyz/components/option",
           "status": "stable",
           "since": "1.0",
           "dependencies": [
-            "p-icon",
-            "p-button"
+            "p-icon"
           ]
         }
       ],
@@ -11999,8 +11712,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "PPaginate",
-            "module": "components/paginate/paginate.js"
+            "name": "POption",
+            "module": "components/option/option.js"
           }
         }
       ]
@@ -12367,191 +12080,478 @@
             {
               "name": "placement",
               "type": {
-                "text": "| \"top\"\n    | \"top-start\"\n    | \"top-end\"\n    | \"bottom\"\n    | \"bottom-start\"\n    | \"bottom-end\"\n    | \"right\"\n    | \"right-start\"\n    | \"right-end\"\n    | \"left\"\n    | \"left-start\"\n    | \"left-end\""
+                "text": "| \"top\"\n    | \"top-start\"\n    | \"top-end\"\n    | \"bottom\"\n    | \"bottom-start\"\n    | \"bottom-end\"\n    | \"right\"\n    | \"right-start\"\n    | \"right-end\"\n    | \"left\"\n    | \"left-start\"\n    | \"left-end\""
+              },
+              "default": "\"top\"",
+              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "strategy",
+              "type": {
+                "text": "\"absolute\" | \"fixed\""
+              },
+              "default": "\"absolute\"",
+              "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
+              "fieldName": "strategy"
+            },
+            {
+              "name": "distance",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel away from its anchor.",
+              "fieldName": "distance"
+            },
+            {
+              "name": "skidding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel along its anchor.",
+              "fieldName": "skidding"
+            },
+            {
+              "name": "arrow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
+              "fieldName": "arrow"
+            },
+            {
+              "name": "arrow-placement",
+              "type": {
+                "text": "\"start\" | \"end\" | \"center\" | \"anchor\""
+              },
+              "default": "\"anchor\"",
+              "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
+              "fieldName": "arrowPlacement"
+            },
+            {
+              "name": "arrow-padding",
+              "type": {
+                "text": "number"
+              },
+              "default": "10",
+              "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
+              "fieldName": "arrowPadding"
+            },
+            {
+              "name": "flip",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
+              "fieldName": "flip"
+            },
+            {
+              "name": "flip-fallback-placements",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
+              "fieldName": "flipFallbackPlacements"
+            },
+            {
+              "name": "flip-fallback-strategy",
+              "type": {
+                "text": "\"best-fit\" | \"initial\""
+              },
+              "default": "\"best-fit\"",
+              "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
+              "fieldName": "flipFallbackStrategy"
+            },
+            {
+              "name": "flipBoundary",
+              "type": {
+                "text": "Element | Element[]"
+              },
+              "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "fieldName": "flipBoundary"
+            },
+            {
+              "name": "flip-padding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
+              "fieldName": "flipPadding"
+            },
+            {
+              "name": "shift",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Moves the popup along the axis to keep it in view when clipped.",
+              "fieldName": "shift"
+            },
+            {
+              "name": "shiftBoundary",
+              "type": {
+                "text": "Element | Element[]"
+              },
+              "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "fieldName": "shiftBoundary"
+            },
+            {
+              "name": "shift-padding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
+              "fieldName": "shiftPadding"
+            },
+            {
+              "name": "auto-size",
+              "type": {
+                "text": "\"horizontal\" | \"vertical\" | \"both\""
+              },
+              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
+              "fieldName": "autoSize"
+            },
+            {
+              "name": "sync",
+              "type": {
+                "text": "\"width\" | \"height\" | \"both\""
+              },
+              "description": "Syncs the popup's width or height to that of the anchor element.",
+              "fieldName": "sync"
+            },
+            {
+              "name": "autoSizeBoundary",
+              "type": {
+                "text": "Element | Element[]"
+              },
+              "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "fieldName": "autoSizeBoundary"
+            },
+            {
+              "name": "auto-size-padding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
+              "fieldName": "autoSizePadding"
+            },
+            {
+              "name": "hover-bridge",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
+              "fieldName": "hoverBridge"
+            }
+          ],
+          "superclass": {
+            "name": "PureElement",
+            "module": "/src/internal/pure-ui-element.js"
+          },
+          "summary": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.",
+          "tagNameWithoutPrefix": "popup",
+          "tagName": "p-popup",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n * @documentation https://pureui.xyz/components/popup\n * @status stable\n * @since 1.0\n *\n * @event p-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive\n *  operations in your listener or consider debouncing it.\n *\n * @slot - The popup's content.\n * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the\n *  `anchor` attribute or property instead.\n *\n * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are\n *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and\n *  maybe a border or box shadow.\n * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.\n * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.\n *\n * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`\n *  attribute is used.\n * @cssproperty [--arrow-color=var(--p-color-neutral-0)] - The color of the arrow.\n * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n */",
+          "documentation": "https://pureui.xyz/components/popup",
+          "status": "stable",
+          "since": "1.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "PPopup",
+            "module": "components/popup/popup.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/paginate/paginate.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PPaginate",
+          "cssParts": [
+            {
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
+            },
+            {
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
+            }
+          ],
+          "slots": [
+            {
+              "description": "A presentational prefix icon or similar element.",
+              "name": "prefix"
+            },
+            {
+              "description": "A presentational suffix icon or similar element.",
+              "name": "suffix"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
               },
-              "default": "\"top\"",
-              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
-              "fieldName": "placement"
+              "static": true,
+              "default": "{\n    \"p-icon\": PIcon,\n  }"
             },
             {
-              "name": "strategy",
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "title",
               "type": {
-                "text": "\"absolute\" | \"fixed\""
+                "text": "string"
               },
-              "default": "\"absolute\"",
-              "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
-              "fieldName": "strategy"
+              "default": "\"\"",
+              "attribute": "title"
             },
             {
-              "name": "distance",
+              "kind": "field",
+              "name": "variant",
               "type": {
-                "text": "number"
+                "text": "\"default\" | \"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\" | \"text\""
               },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel away from its anchor.",
-              "fieldName": "distance"
+              "default": "\"default\"",
+              "description": "The button's theme variant.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
-              "name": "skidding",
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "number"
+                "text": "\"small\" | \"medium\" | \"large\""
               },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel along its anchor.",
-              "fieldName": "skidding"
+              "default": "\"medium\"",
+              "description": "The button's size.",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "name": "arrow",
+              "kind": "field",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
-              "fieldName": "arrow"
+              "description": "Disables the button.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "name": "arrow-placement",
+              "kind": "field",
+              "name": "pill",
               "type": {
-                "text": "\"start\" | \"end\" | \"center\" | \"anchor\""
+                "text": "boolean"
               },
-              "default": "\"anchor\"",
-              "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
-              "fieldName": "arrowPlacement"
+              "default": "false",
+              "description": "Draws a pill-style button with rounded edges.",
+              "attribute": "pill",
+              "reflects": true
             },
             {
-              "name": "arrow-padding",
+              "kind": "field",
+              "name": "total",
               "type": {
                 "text": "number"
               },
-              "default": "10",
-              "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
-              "fieldName": "arrowPadding"
+              "default": "119",
+              "description": "The total items to paginate.",
+              "attribute": "total",
+              "reflects": true
             },
             {
-              "name": "flip",
+              "kind": "field",
+              "name": "page",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
-              "fieldName": "flip"
+              "default": "1",
+              "description": "The current page.",
+              "attribute": "page",
+              "reflects": true
             },
             {
-              "name": "flip-fallback-placements",
+              "kind": "field",
+              "name": "limit",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "\"\"",
-              "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
-              "fieldName": "flipFallbackPlacements"
+              "default": "12",
+              "description": "The limit items in a page.",
+              "attribute": "limit",
+              "reflects": true
             },
             {
-              "name": "flip-fallback-strategy",
+              "kind": "field",
+              "name": "maxVisiblePages",
               "type": {
-                "text": "\"best-fit\" | \"initial\""
+                "text": "number"
               },
-              "default": "\"best-fit\"",
-              "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
-              "fieldName": "flipFallbackStrategy"
+              "default": "3",
+              "description": "The limit visible pages to show.",
+              "attribute": "max-visible-pages",
+              "reflects": true
             },
             {
-              "name": "flipBoundary",
-              "type": {
-                "text": "Element | Element[]"
-              },
-              "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-              "fieldName": "flipBoundary"
+              "kind": "method",
+              "name": "getPages",
+              "privacy": "private"
             },
             {
-              "name": "flip-padding",
+              "kind": "method",
+              "name": "changePage",
+              "parameters": [
+                {
+                  "name": "newPage",
+                  "type": {
+                    "text": "number | string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "prevPage"
+            },
+            {
+              "kind": "method",
+              "name": "nextPage"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the page changed.",
+              "name": "p-change",
+              "reactName": "onPChange",
+              "eventName": "PChangeEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
-              "fieldName": "flipPadding"
+              "default": "\"\"",
+              "fieldName": "title"
             },
             {
-              "name": "shift",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "\"default\" | \"primary\" | \"success\" | \"neutral\" | \"warning\" | \"danger\" | \"text\""
               },
-              "default": "false",
-              "description": "Moves the popup along the axis to keep it in view when clipped.",
-              "fieldName": "shift"
+              "default": "\"default\"",
+              "description": "The button's theme variant.",
+              "fieldName": "variant"
             },
             {
-              "name": "shiftBoundary",
+              "name": "size",
               "type": {
-                "text": "Element | Element[]"
+                "text": "\"small\" | \"medium\" | \"large\""
               },
-              "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-              "fieldName": "shiftBoundary"
+              "default": "\"medium\"",
+              "description": "The button's size.",
+              "fieldName": "size"
             },
             {
-              "name": "shift-padding",
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
-              "fieldName": "shiftPadding"
+              "default": "false",
+              "description": "Disables the button.",
+              "fieldName": "disabled"
             },
             {
-              "name": "auto-size",
+              "name": "pill",
               "type": {
-                "text": "\"horizontal\" | \"vertical\" | \"both\""
+                "text": "boolean"
               },
-              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
-              "fieldName": "autoSize"
+              "default": "false",
+              "description": "Draws a pill-style button with rounded edges.",
+              "fieldName": "pill"
             },
             {
-              "name": "sync",
+              "name": "total",
               "type": {
-                "text": "\"width\" | \"height\" | \"both\""
+                "text": "number"
               },
-              "description": "Syncs the popup's width or height to that of the anchor element.",
-              "fieldName": "sync"
+              "default": "119",
+              "description": "The total items to paginate.",
+              "fieldName": "total"
             },
             {
-              "name": "autoSizeBoundary",
+              "name": "page",
               "type": {
-                "text": "Element | Element[]"
+                "text": "number"
               },
-              "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-              "fieldName": "autoSizeBoundary"
+              "default": "1",
+              "description": "The current page.",
+              "fieldName": "page"
             },
             {
-              "name": "auto-size-padding",
+              "name": "limit",
               "type": {
                 "text": "number"
               },
-              "default": "0",
-              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
-              "fieldName": "autoSizePadding"
+              "default": "12",
+              "description": "The limit items in a page.",
+              "fieldName": "limit"
             },
             {
-              "name": "hover-bridge",
+              "name": "max-visible-pages",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
-              "fieldName": "hoverBridge"
+              "default": "3",
+              "description": "The limit visible pages to show.",
+              "fieldName": "maxVisiblePages"
             }
           ],
           "superclass": {
             "name": "PureElement",
             "module": "/src/internal/pure-ui-element.js"
           },
-          "summary": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.",
-          "tagNameWithoutPrefix": "popup",
-          "tagName": "p-popup",
+          "summary": "Paginate represent actions that are available to the user.",
+          "tagNameWithoutPrefix": "paginate",
+          "tagName": "p-paginate",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n * @documentation https://pureui.xyz/components/popup\n * @status stable\n * @since 1.0\n *\n * @event p-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive\n *  operations in your listener or consider debouncing it.\n *\n * @slot - The popup's content.\n * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the\n *  `anchor` attribute or property instead.\n *\n * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are\n *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and\n *  maybe a border or box shadow.\n * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.\n * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.\n *\n * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`\n *  attribute is used.\n * @cssproperty [--arrow-color=var(--p-color-neutral-0)] - The color of the arrow.\n * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n */",
-          "documentation": "https://pureui.xyz/components/popup",
+          "jsDoc": "/**\n * @summary Paginate 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-button\n *\n * @event p-change - Emitted when the page changed.\n *\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */",
+          "documentation": "https://pureui.xyz/components/button",
           "status": "stable",
-          "since": "1.0"
+          "since": "1.0",
+          "dependencies": [
+            "p-icon",
+            "p-button"
+          ]
         }
       ],
       "exports": [
@@ -12559,8 +12559,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "PPopup",
-            "module": "components/popup/popup.js"
+            "name": "PPaginate",
+            "module": "components/paginate/paginate.js"
           }
         }
       ]
@@ -20463,7 +20463,7 @@
   "package": {
     "name": "pure-uikit",
     "description": "A forward-thinking library of web components.",
-    "version": "1.2.13",
+    "version": "1.2.15",
     "author": "Mr.P",
     "homepage": "https://pureui.xyz",
     "license": "MIT"