@alegendstale/holly-components 4.0.5 → 4.0.7

package/custom-elements.json

@@ -15,10 +15,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "PaletteChangeEvent",
+          "name": "*",
           "declaration": {
-            "name": "PaletteChangeEvent",
-            "module": "./events/palette-change.js"
+            "name": "*",
+            "module": "src/events/events.js"
           }
         }
       ]
@@ -174,6 +174,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/events/events.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "dist/events/palette-change.js",
@@ -902,6 +908,21 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/events/events.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PaletteChangeEvent",
+          "declaration": {
+            "name": "PaletteChangeEvent",
+            "module": "./palette-change.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/events/palette-change.ts",
@@ -3547,941 +3568,941 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/draw-svg/draw-svg.styles.ts",
+      "path": "src/components/color-palette/color-palette-utils.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "defaultSettings",
+          "type": {
+            "text": "ColorPaletteSettings"
+          },
+          "default": "{ noticeDuration: 10000, errorPulse: true, aliasMode: AliasMode.Both, corners: true, stabilizeWhileEditing: true, reloadDelay: 5, copyFormat: CopyFormat.Raw, height: 150, width: 700, direction: Direction.Column, gradient: false, preventHover: false, hideText: false, override: false }"
+        },
+        {
+          "kind": "variable",
+          "name": "urlRegex",
+          "default": "/(?:https:\\/\\/www\\.|http:\\/\\/www\\.|https:\\/\\/|http:\\/\\/)?[a-zA-Z0-9]{2,}(?:\\.[a-zA-Z0-9]{2,})(?:\\.[a-zA-Z0-9]{2,})?\\/(?:palette\\/)?([a-zA-Z0-9-]{2,})/"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PaletteError",
+          "members": [
+            {
+              "kind": "field",
+              "name": "status",
+              "type": {
+                "text": "Status"
+              },
+              "default": "status"
+            }
+          ],
+          "superclass": {
+            "name": "Error",
+            "module": "src/components/color-palette/color-palette-utils.ts"
+          }
+        },
+        {
+          "kind": "function",
+          "name": "parseSettings",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "input",
+              "type": {
+                "text": "string"
+              },
+              "description": "settings from codeblock"
+            }
+          ],
+          "description": "Parses input & extracts settings"
+        },
+        {
+          "kind": "function",
+          "name": "parseColors",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "input",
+              "type": {
+                "text": "string[]"
+              },
+              "description": "colors from codeblock"
+            },
+            {
+              "name": "override",
+              "type": {
+                "text": "boolean"
+              }
+            }
+          ],
+          "description": "Parses input & extracts colors based on color space or URL"
+        },
+        {
+          "kind": "function",
+          "name": "calcColorsAndSettings",
+          "parameters": [
+            {
+              "name": "input",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "pluginSettings",
+              "type": {
+                "text": "ColorPaletteSettings"
+              }
+            }
+          ],
+          "description": "Calculates colors and settings based on codeblock contents"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "defaultSettings",
+          "declaration": {
+            "name": "defaultSettings",
+            "module": "src/components/color-palette/color-palette-utils.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "urlRegex",
+          "declaration": {
+            "name": "urlRegex",
+            "module": "src/components/color-palette/color-palette-utils.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PaletteError",
+          "declaration": {
+            "name": "PaletteError",
+            "module": "src/components/color-palette/color-palette-utils.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "parseSettings",
+          "declaration": {
+            "name": "parseSettings",
+            "module": "src/components/color-palette/color-palette-utils.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "parseColors",
+          "declaration": {
+            "name": "parseColors",
+            "module": "src/components/color-palette/color-palette-utils.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "calcColorsAndSettings",
+          "declaration": {
+            "name": "calcColorsAndSettings",
+            "module": "src/components/color-palette/color-palette-utils.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/color-palette/color-palette.styles.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/components/draw-svg/draw-svg.styles.ts"
+            "module": "src/components/color-palette/color-palette.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/draw-svg/draw-svg.ts",
+      "path": "src/components/color-palette/color-palette.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Animates the provided SVG paths as if they were being drawn.",
-          "name": "DrawSvg",
-          "members": [
+          "description": "A component which can display colors in various ways.",
+          "name": "ColorPalette",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "isIntersecting",
               "type": {
-                "text": "boolean"
+                "text": "<length>"
               },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the SVG is intersecting with the client viewport. Useful for determining when to animate."
+              "description": "The height of the palette.",
+              "name": "--palette-height"
             },
             {
-              "kind": "method",
-              "name": "svgClasses",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "{}"
-                }
+              "type": {
+                "text": "<length>"
               },
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "description": "The width of the palette.",
+              "name": "--palette-width"
             },
             {
-              "kind": "field",
-              "name": "autofit",
               "type": {
-                "text": "boolean"
+                "text": "<color>"
               },
-              "default": "false",
-              "description": "The SVG will attempt to fill its container.",
-              "attribute": "autofit",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "description": "The background color of the palette.",
+              "name": "--palette-background-color"
             },
             {
-              "kind": "field",
-              "name": "svgColors",
               "type": {
-                "text": "boolean"
+                "text": "<color>"
               },
-              "default": "false",
-              "description": "Use the colors from the SVG input.",
-              "attribute": "svgColors",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "description": "The color of the palette.",
+              "name": "--palette-color"
             },
             {
-              "kind": "field",
-              "name": "svg",
-              "description": "The SVG to responsively size.\r\nMust use a property expression (.) to set",
               "type": {
-                "text": "SVGElement | TemplateResult<2> | string"
+                "text": "<length>"
               },
-              "attribute": "svg",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "description": "The flex size for palette items.",
+              "name": "--palette-column-flex-basis"
             },
             {
-              "kind": "field",
-              "name": "preserveAspectRatio",
-              "description": "Set whether SVG preserves its aspect ratio alignment or spacing.",
               "type": {
-                "text": "PreserveAspectRatio"
+                "text": "<length>"
               },
-              "default": "xMidYMid meet",
-              "attribute": "preserveAspectRatio",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
-            },
+              "description": "The radius of the palette corners.",
+              "name": "--palette-corners"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "viewBox",
+              "name": "_tooltip",
               "type": {
-                "text": "ViewBox"
+                "text": "ToolTip"
               },
-              "privacy": "protected",
-              "default": "{ x: 0, y: 0, width: 0, height: 0 }",
-              "description": "The viewBox dimensions the SVG will use.",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_widthController",
-              "privacy": "private",
-              "default": "new StyleController(this, '--svg-width', (val) => { const width = parseFloat(val); if(isNaN(width) || width <= 0) return; this.viewBox = { ...this.viewBox, width: width || 0 }; })",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_heightController",
-              "privacy": "private",
-              "default": "new StyleController(this, '--svg-height', (val) => { const height = parseFloat(val); if(isNaN(height) || height <= 0) return; this.viewBox = { ...this.viewBox, height: height || 0 }; })",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getViewBoxSize",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "svg",
-                  "type": {
-                    "text": "SVGElement"
-                  },
-                  "description": "The SVG to get the attribute from."
-                }
-              ],
-              "description": "Gets the viewBox dimensions from an SVG element.",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
-            }
-          ],
-          "events": [
-            {
+              "name": "editMode",
+              "description": "Whether the palette can be edited.",
               "type": {
                 "text": "boolean"
               },
-              "description": "Emits when the component enters or leaves the viewport.",
-              "name": "intersection"
-            }
-          ],
-          "superclass": {
-            "name": "ResponsiveSvg",
-            "module": "/src/components/responsive-svg/responsive-svg.js"
-          },
-          "tagName": "draw-svg",
-          "customElement": true,
-          "cssParts": [
-            {
-              "description": "Styles the SVG element.",
-              "name": "__svg",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "default": "false",
+              "attribute": "editMode"
             },
             {
-              "description": "Styles all child path elements of the SVG.",
-              "name": "__path",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
-            }
-          ],
-          "cssProperties": [
-            {
+              "kind": "field",
+              "name": "colors",
               "type": {
-                "text": "<length> (em)"
+                "text": "string[]"
               },
-              "description": "Controls the width of the SVG. (Expects em value)",
-              "name": "--svg-width",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "privacy": "public",
+              "default": "[]",
+              "description": "The input colors the palette will display.",
+              "attribute": "colors",
+              "reflects": true
             },
             {
+              "kind": "field",
+              "name": "height",
               "type": {
-                "text": "<length> (em)"
+                "text": "number"
               },
-              "description": "Controls the height of the SVG. (Expects em value)",
-              "name": "--svg-height",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "privacy": "public",
+              "description": "The height of the palette.",
+              "default": "150",
+              "attribute": "height",
+              "reflects": true
             },
             {
+              "kind": "field",
+              "name": "width",
               "type": {
-                "text": "<length> (em)"
+                "text": "number"
               },
-              "description": "Set by the component as a fallback in case --svg-width is not defined.",
-              "name": "--svg-width-fallback",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "privacy": "public",
+              "description": "The width of the palette.",
+              "default": "700",
+              "attribute": "width",
+              "reflects": true
             },
             {
+              "kind": "field",
+              "name": "direction",
               "type": {
-                "text": "<length> (em)"
+                "text": "Direction"
               },
-              "description": "Set by the component as a fallback in case --svg-height is not defined.",
-              "name": "--svg-height-fallback",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "privacy": "public",
+              "description": "The direction the palette colors will face.",
+              "default": "column",
+              "attribute": "direction",
+              "reflects": true
             },
             {
-              "type": {
-                "text": "number"
-              },
-              "description": "Controls the scale of the SVG when sized relative to font-size.",
-              "name": "--scale",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "autofit",
+              "kind": "field",
+              "name": "gradient",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "public",
               "default": "false",
-              "description": "The SVG will attempt to fill its container.",
-              "fieldName": "autofit",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "description": "Whether the colors will appear as a gradient.",
+              "attribute": "gradient",
+              "reflects": true
             },
             {
-              "name": "svgColors",
+              "kind": "field",
+              "name": "preventHover",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "public",
               "default": "false",
-              "description": "Use the colors from the SVG input.",
-              "fieldName": "svgColors",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "description": "Whether hovering over the palette is allowed.",
+              "attribute": "preventHover",
+              "reflects": true
             },
             {
-              "name": "svg",
-              "description": "The SVG to responsively size.\r\nMust use a property expression (.) to set",
+              "kind": "field",
+              "name": "hideText",
               "type": {
-                "text": "SVGElement | TemplateResult<2> | string"
+                "text": "boolean"
               },
-              "fieldName": "svg",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the text on each color is shown.",
+              "attribute": "hideText",
+              "reflects": true
             },
-            {
-              "name": "preserveAspectRatio",
-              "description": "Set whether SVG preserves its aspect ratio alignment or spacing.",
-              "type": {
-                "text": "PreserveAspectRatio"
-              },
-              "default": "xMidYMid meet",
-              "fieldName": "preserveAspectRatio",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DrawSvg",
-          "declaration": {
-            "name": "DrawSvg",
-            "module": "src/components/draw-svg/draw-svg.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "draw-svg",
-          "declaration": {
-            "name": "DrawSvg",
-            "module": "src/components/draw-svg/draw-svg.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/color-palette/color-palette-utils.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "defaultSettings",
-          "type": {
-            "text": "ColorPaletteSettings"
-          },
-          "default": "{ noticeDuration: 10000, errorPulse: true, aliasMode: AliasMode.Both, corners: true, stabilizeWhileEditing: true, reloadDelay: 5, copyFormat: CopyFormat.Raw, height: 150, width: 700, direction: Direction.Column, gradient: false, preventHover: false, hideText: false, override: false }"
-        },
-        {
-          "kind": "variable",
-          "name": "urlRegex",
-          "default": "/(?:https:\\/\\/www\\.|http:\\/\\/www\\.|https:\\/\\/|http:\\/\\/)?[a-zA-Z0-9]{2,}(?:\\.[a-zA-Z0-9]{2,})(?:\\.[a-zA-Z0-9]{2,})?\\/(?:palette\\/)?([a-zA-Z0-9-]{2,})/"
-        },
-        {
-          "kind": "class",
-          "description": "",
-          "name": "PaletteError",
-          "members": [
             {
               "kind": "field",
-              "name": "status",
-              "type": {
-                "text": "Status"
-              },
-              "default": "status"
-            }
-          ],
-          "superclass": {
-            "name": "Error",
-            "module": "src/components/color-palette/color-palette-utils.ts"
-          }
-        },
-        {
-          "kind": "function",
-          "name": "parseSettings",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
-            {
-              "name": "input",
+              "name": "override",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "settings from codeblock"
-            }
-          ],
-          "description": "Parses input & extracts settings"
-        },
-        {
-          "kind": "function",
-          "name": "parseColors",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the input bypasses validation checks.",
+              "attribute": "override",
+              "reflects": true
+            },
             {
-              "name": "input",
+              "kind": "field",
+              "name": "aliases",
               "type": {
                 "text": "string[]"
               },
-              "description": "colors from codeblock"
+              "privacy": "public",
+              "default": "[]",
+              "description": "The aliases for each color.",
+              "attribute": "aliases",
+              "reflects": true
             },
             {
-              "name": "override",
-              "type": {
-                "text": "boolean"
-              }
-            }
-          ],
-          "description": "Parses input & extracts colors based on color space or URL"
-        },
-        {
-          "kind": "function",
-          "name": "calcColorsAndSettings",
-          "parameters": [
-            {
-              "name": "input",
+              "kind": "field",
+              "name": "maxWidth",
               "type": {
-                "text": "string"
-              }
+                "text": "number"
+              },
+              "privacy": "public",
+              "default": "0",
+              "description": "The maximum width of the container. (So that the palette doesn't expand past its bounds)",
+              "attribute": "maxWidth"
             },
             {
-              "name": "pluginSettings",
+              "kind": "field",
+              "name": "settings",
+              "privacy": "public",
+              "description": "Helper accessor for settings",
               "type": {
-                "text": "ColorPaletteSettings"
+                "text": "PaletteSettings"
               }
-            }
-          ],
-          "description": "Calculates colors and settings based on codeblock contents"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "defaultSettings",
-          "declaration": {
-            "name": "defaultSettings",
-            "module": "src/components/color-palette/color-palette-utils.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "urlRegex",
-          "declaration": {
-            "name": "urlRegex",
-            "module": "src/components/color-palette/color-palette-utils.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "PaletteError",
-          "declaration": {
-            "name": "PaletteError",
-            "module": "src/components/color-palette/color-palette-utils.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "parseSettings",
-          "declaration": {
-            "name": "parseSettings",
-            "module": "src/components/color-palette/color-palette-utils.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "parseColors",
-          "declaration": {
-            "name": "parseColors",
-            "module": "src/components/color-palette/color-palette-utils.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "calcColorsAndSettings",
-          "declaration": {
-            "name": "calcColorsAndSettings",
-            "module": "src/components/color-palette/color-palette-utils.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/color-palette/color-palette.styles.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/components/color-palette/color-palette.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/color-palette/color-palette.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A component which can display colors in various ways.",
-          "name": "ColorPalette",
-          "cssProperties": [
+            },
             {
+              "kind": "field",
+              "name": "status",
               "type": {
-                "text": "<length>"
+                "text": "Status"
               },
-              "description": "The height of the palette.",
-              "name": "--palette-height"
+              "privacy": "public",
+              "description": "The current status of the palette."
             },
             {
+              "kind": "field",
+              "name": "pluginSettings",
               "type": {
-                "text": "<length>"
+                "text": "ColorPaletteSettings"
               },
-              "description": "The width of the palette.",
-              "name": "--palette-width"
+              "default": "defaultSettings",
+              "description": "Extended settings",
+              "attribute": "pluginSettings"
             },
             {
-              "type": {
-                "text": "<color>"
-              },
-              "description": "The background color of the palette.",
-              "name": "--palette-background-color"
+              "kind": "method",
+              "name": "setStatusAndColors",
+              "description": "Sets the current status and parses colors."
             },
             {
-              "type": {
-                "text": "<color>"
+              "kind": "method",
+              "name": "getPaletteWidth",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "createPalette",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
               },
-              "description": "The color of the palette.",
-              "name": "--palette-color"
+              "description": "Creates a color palette or gradient palette depending on settings."
             },
             {
-              "type": {
-                "text": "<length>"
+              "kind": "method",
+              "name": "createColors",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
               },
-              "description": "The flex size for palette items.",
-              "name": "--palette-column-flex-basis"
+              "description": "Create a color palette."
             },
             {
-              "type": {
-                "text": "<length>"
+              "kind": "method",
+              "name": "createGradient",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
               },
-              "description": "The radius of the palette corners.",
-              "name": "--palette-corners"
+              "description": "Create a gradient palette."
+            },
+            {
+              "kind": "method",
+              "name": "createInvalidPalette",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "Status"
+                  },
+                  "description": "Palette status type"
+                },
+                {
+                  "name": "message",
+                  "default": "''"
+                }
+              ],
+              "description": "Create invalid palette based on palette status."
             }
           ],
-          "members": [
+          "events": [
             {
-              "kind": "field",
-              "name": "_tooltip",
+              "name": "notice",
               "type": {
-                "text": "ToolTip"
+                "text": "string"
               },
-              "privacy": "private"
+              "description": "Emits a user-facing notice."
             },
             {
-              "kind": "field",
+              "type": {
+                "text": "PaletteChangeEvent"
+              }
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Emits a change in editMode.",
+              "name": "edit-mode"
+            },
+            {
+              "description": "Emits a change in palette colors or settings.",
+              "name": "palette-change"
+            }
+          ],
+          "attributes": [
+            {
               "name": "editMode",
               "description": "Whether the palette can be edited.",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "editMode"
+              "fieldName": "editMode"
             },
             {
-              "kind": "field",
               "name": "colors",
               "type": {
                 "text": "string[]"
               },
-              "privacy": "public",
               "default": "[]",
               "description": "The input colors the palette will display.",
-              "attribute": "colors",
-              "reflects": true
+              "fieldName": "colors"
             },
             {
-              "kind": "field",
               "name": "height",
               "type": {
                 "text": "number"
               },
-              "privacy": "public",
               "description": "The height of the palette.",
               "default": "150",
-              "attribute": "height",
-              "reflects": true
+              "fieldName": "height"
             },
             {
-              "kind": "field",
               "name": "width",
               "type": {
                 "text": "number"
               },
-              "privacy": "public",
               "description": "The width of the palette.",
               "default": "700",
-              "attribute": "width",
-              "reflects": true
+              "fieldName": "width"
             },
             {
-              "kind": "field",
               "name": "direction",
               "type": {
                 "text": "Direction"
               },
-              "privacy": "public",
               "description": "The direction the palette colors will face.",
               "default": "column",
-              "attribute": "direction",
-              "reflects": true
+              "fieldName": "direction"
             },
             {
-              "kind": "field",
               "name": "gradient",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "public",
               "default": "false",
               "description": "Whether the colors will appear as a gradient.",
-              "attribute": "gradient",
-              "reflects": true
+              "fieldName": "gradient"
             },
             {
-              "kind": "field",
               "name": "preventHover",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "public",
               "default": "false",
               "description": "Whether hovering over the palette is allowed.",
-              "attribute": "preventHover",
-              "reflects": true
+              "fieldName": "preventHover"
             },
             {
-              "kind": "field",
               "name": "hideText",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "public",
               "default": "false",
               "description": "Whether the text on each color is shown.",
-              "attribute": "hideText",
-              "reflects": true
+              "fieldName": "hideText"
             },
             {
-              "kind": "field",
               "name": "override",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "public",
               "default": "false",
               "description": "Whether the input bypasses validation checks.",
-              "attribute": "override",
-              "reflects": true
+              "fieldName": "override"
             },
             {
-              "kind": "field",
               "name": "aliases",
               "type": {
                 "text": "string[]"
               },
-              "privacy": "public",
               "default": "[]",
               "description": "The aliases for each color.",
-              "attribute": "aliases",
-              "reflects": true
+              "fieldName": "aliases"
+            },
+            {
+              "name": "maxWidth",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The maximum width of the container. (So that the palette doesn't expand past its bounds)",
+              "fieldName": "maxWidth"
+            },
+            {
+              "name": "pluginSettings",
+              "type": {
+                "text": "ColorPaletteSettings"
+              },
+              "default": "defaultSettings",
+              "description": "Extended settings",
+              "fieldName": "pluginSettings"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "color-palette",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ColorPalette",
+          "declaration": {
+            "name": "ColorPalette",
+            "module": "src/components/color-palette/color-palette.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "color-palette",
+          "declaration": {
+            "name": "ColorPalette",
+            "module": "src/components/color-palette/color-palette.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/draw-svg/draw-svg.styles.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "src/components/draw-svg/draw-svg.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/draw-svg/draw-svg.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Animates the provided SVG paths as if they were being drawn.",
+          "name": "DrawSvg",
+          "members": [
+            {
+              "kind": "field",
+              "name": "isIntersecting",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the SVG is intersecting with the client viewport. Useful for determining when to animate."
+            },
+            {
+              "kind": "method",
+              "name": "svgClasses",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "{}"
+                }
+              },
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "maxWidth",
+              "name": "autofit",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "privacy": "public",
-              "default": "0",
-              "description": "The maximum width of the container. (So that the palette doesn't expand past its bounds)",
-              "attribute": "maxWidth"
+              "default": "false",
+              "description": "The SVG will attempt to fill its container.",
+              "attribute": "autofit",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "settings",
-              "privacy": "public",
-              "description": "Helper accessor for settings",
+              "name": "svgColors",
               "type": {
-                "text": "PaletteSettings"
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Use the colors from the SVG input.",
+              "attribute": "svgColors",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
               }
             },
             {
               "kind": "field",
-              "name": "status",
+              "name": "svg",
+              "description": "The SVG to responsively size.\r\nMust use a property expression (.) to set",
               "type": {
-                "text": "Status"
+                "text": "SVGElement | TemplateResult<2> | string"
               },
-              "privacy": "public",
-              "description": "The current status of the palette."
+              "attribute": "svg",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "pluginSettings",
+              "name": "preserveAspectRatio",
+              "description": "Set whether SVG preserves its aspect ratio alignment or spacing.",
               "type": {
-                "text": "ColorPaletteSettings"
+                "text": "PreserveAspectRatio"
               },
-              "default": "defaultSettings",
-              "description": "Extended settings",
-              "attribute": "pluginSettings"
-            },
-            {
-              "kind": "method",
-              "name": "setStatusAndColors",
-              "description": "Sets the current status and parses colors."
+              "default": "xMidYMid meet",
+              "attribute": "preserveAspectRatio",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "getPaletteWidth",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "viewBox",
+              "type": {
+                "text": "ViewBox"
+              },
+              "privacy": "protected",
+              "default": "{ x: 0, y: 0, width: 0, height: 0 }",
+              "description": "The viewBox dimensions the SVG will use.",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "createPalette",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult | typeof nothing"
-                }
-              },
-              "description": "Creates a color palette or gradient palette depending on settings."
+              "kind": "field",
+              "name": "_widthController",
+              "privacy": "private",
+              "default": "new StyleController(this, '--svg-width', (val) => { const width = parseFloat(val); if(isNaN(width) || width <= 0) return; this.viewBox = { ...this.viewBox, width: width || 0 }; })",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "createColors",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              },
-              "description": "Create a color palette."
+              "kind": "field",
+              "name": "_heightController",
+              "privacy": "private",
+              "default": "new StyleController(this, '--svg-height', (val) => { const height = parseFloat(val); if(isNaN(height) || height <= 0) return; this.viewBox = { ...this.viewBox, height: height || 0 }; })",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "createGradient",
-              "privacy": "protected",
+              "name": "getViewBoxSize",
+              "privacy": "public",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": ""
                 }
               },
-              "description": "Create a gradient palette."
-            },
-            {
-              "kind": "method",
-              "name": "createInvalidPalette",
-              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "type",
+                  "name": "svg",
                   "type": {
-                    "text": "Status"
+                    "text": "SVGElement"
                   },
-                  "description": "Palette status type"
-                },
-                {
-                  "name": "message",
-                  "default": "''"
+                  "description": "The SVG to get the attribute from."
                 }
               ],
-              "description": "Create invalid palette based on palette status."
+              "description": "Gets the viewBox dimensions from an SVG element.",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             }
           ],
           "events": [
-            {
-              "name": "notice",
-              "type": {
-                "text": "string"
-              },
-              "description": "Emits a user-facing notice."
-            },
-            {
-              "type": {
-                "text": "PaletteChangeEvent"
-              }
-            },
             {
               "type": {
                 "text": "boolean"
               },
-              "description": "Emits a change in editMode.",
-              "name": "edit-mode"
-            },
-            {
-              "description": "Emits a change in palette colors or settings.",
-              "name": "palette-change"
+              "description": "Emits when the component enters or leaves the viewport.",
+              "name": "intersection"
             }
           ],
-          "attributes": [
-            {
-              "name": "editMode",
-              "description": "Whether the palette can be edited.",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "editMode"
-            },
+          "superclass": {
+            "name": "ResponsiveSvg",
+            "module": "/src/components/responsive-svg/responsive-svg.js"
+          },
+          "tagName": "draw-svg",
+          "customElement": true,
+          "cssParts": [
             {
-              "name": "colors",
-              "type": {
-                "text": "string[]"
-              },
-              "default": "[]",
-              "description": "The input colors the palette will display.",
-              "fieldName": "colors"
+              "description": "Styles the SVG element.",
+              "name": "__svg",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
-              "name": "height",
-              "type": {
-                "text": "number"
-              },
-              "description": "The height of the palette.",
-              "default": "150",
-              "fieldName": "height"
-            },
+              "description": "Styles all child path elements of the SVG.",
+              "name": "__path",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            }
+          ],
+          "cssProperties": [
             {
-              "name": "width",
               "type": {
-                "text": "number"
+                "text": "<length> (em)"
               },
-              "description": "The width of the palette.",
-              "default": "700",
-              "fieldName": "width"
+              "description": "Controls the width of the SVG. (Expects em value)",
+              "name": "--svg-width",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
-              "name": "direction",
               "type": {
-                "text": "Direction"
+                "text": "<length> (em)"
               },
-              "description": "The direction the palette colors will face.",
-              "default": "column",
-              "fieldName": "direction"
+              "description": "Controls the height of the SVG. (Expects em value)",
+              "name": "--svg-height",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
-              "name": "gradient",
               "type": {
-                "text": "boolean"
+                "text": "<length> (em)"
               },
-              "default": "false",
-              "description": "Whether the colors will appear as a gradient.",
-              "fieldName": "gradient"
+              "description": "Set by the component as a fallback in case --svg-width is not defined.",
+              "name": "--svg-width-fallback",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
-              "name": "preventHover",
               "type": {
-                "text": "boolean"
+                "text": "<length> (em)"
               },
-              "default": "false",
-              "description": "Whether hovering over the palette is allowed.",
-              "fieldName": "preventHover"
+              "description": "Set by the component as a fallback in case --svg-height is not defined.",
+              "name": "--svg-height-fallback",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
-              "name": "hideText",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Whether the text on each color is shown.",
-              "fieldName": "hideText"
-            },
+              "description": "Controls the scale of the SVG when sized relative to font-size.",
+              "name": "--scale",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "name": "override",
+              "name": "autofit",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the input bypasses validation checks.",
-              "fieldName": "override"
+              "description": "The SVG will attempt to fill its container.",
+              "fieldName": "autofit",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
-              "name": "aliases",
+              "name": "svgColors",
               "type": {
-                "text": "string[]"
+                "text": "boolean"
               },
-              "default": "[]",
-              "description": "The aliases for each color.",
-              "fieldName": "aliases"
+              "default": "false",
+              "description": "Use the colors from the SVG input.",
+              "fieldName": "svgColors",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
-              "name": "maxWidth",
+              "name": "svg",
+              "description": "The SVG to responsively size.\r\nMust use a property expression (.) to set",
               "type": {
-                "text": "number"
+                "text": "SVGElement | TemplateResult<2> | string"
               },
-              "default": "0",
-              "description": "The maximum width of the container. (So that the palette doesn't expand past its bounds)",
-              "fieldName": "maxWidth"
+              "fieldName": "svg",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
-              "name": "pluginSettings",
+              "name": "preserveAspectRatio",
+              "description": "Set whether SVG preserves its aspect ratio alignment or spacing.",
               "type": {
-                "text": "ColorPaletteSettings"
+                "text": "PreserveAspectRatio"
               },
-              "default": "defaultSettings",
-              "description": "Extended settings",
-              "fieldName": "pluginSettings"
+              "default": "xMidYMid meet",
+              "fieldName": "preserveAspectRatio",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "color-palette",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorPalette",
+          "name": "DrawSvg",
           "declaration": {
-            "name": "ColorPalette",
-            "module": "src/components/color-palette/color-palette.ts"
+            "name": "DrawSvg",
+            "module": "src/components/draw-svg/draw-svg.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "color-palette",
+          "name": "draw-svg",
           "declaration": {
-            "name": "ColorPalette",
-            "module": "src/components/color-palette/color-palette.ts"
+            "name": "DrawSvg",
+            "module": "src/components/draw-svg/draw-svg.ts"
           }
         }
       ]
@@ -5098,33 +5119,33 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/menu/color-palette-menu.js",
+      "path": "dist/components/color-palette/item/color-palette-item-edit.js",
       "declarations": [
         {
           "kind": "variable",
           "name": "s",
-          "default": "class extends b { constructor() { super(...arguments), this.colors = [], this.editMode = !1, this.copyFormat = v.copyFormat, this.reorder = !1; } render() { return a` ${this.reorder ? this.reorderItems() : this.menuItems()} `; } /** Renders the menu items. */ menuItems() { const n = { colors: this.colors, settings: this.settings }; return a` <menu> <li> <button @click=${(t) => { t.stopPropagation(), this.reorder = !this.reorder; }} > ${r(g)} <span>Reorder</span> </button> </li> <li> <button @click=${() => { this.dispatchEvent(new Event(\"open-editor\")); }} > ${r(E)} <span>Edit Mode</span> </button> </li> ${// Only show toggle edit mode option when palette is not a gradient this.settings?.gradient ? $ : a` <li> <button @click=${() => { this.dispatchEvent(new CustomEvent(\"edit-mode\", { detail: !this.editMode })); }} > ${r(C)} <span>Quick Edit</span> ${this.editMode ? r(w) : $} </button> </li> `} <hr> <li> <button @click=${() => { const t = this.colors.map((e) => { const o = d(e).rgb(); return `rgb(${o[0]}, ${o[1]}, ${o[2]})`; }); this.dispatchEvent(new p({ colors: t })); }} > ${r(u)} <span>Convert to RGB</span> </button> </li> <li> <button @click=${() => { const t = this.colors.map((e) => { const o = d(e).hsl(); return `hsl(${o[0]} ${o[1]}% ${o[2]}%)`; }); this.dispatchEvent(new p({ colors: t })); }} > ${r(u)} <span>Convert to HSL</span> </button> </li> <li> <button @click=${() => { const t = this.colors.map((e) => d(e).hex(2)); this.dispatchEvent(new p({ colors: t })); }} > ${r(u)} <span>Convert to HEX</span> </button> </li> <hr> <li> <button @click=${async () => { await y(JSON.stringify(n), this.copyFormat), this.dispatchEvent(new p({ colors: [] })); }} > ${r(P)} <span>Cut</span> </button> </li> <li> <button @click=${async () => { await y(JSON.stringify(n), this.copyFormat); }} > ${r(O)} <span>Copy</span> </button> </li> </menu> `; } /** Renders the reorder items. */ reorderItems() { return a` <color-palette-reorder .colors=${this.colors} @palette-change=${(n) => { this.dispatchEvent(new p({ colors: n.detail.colors })), this.reorder = !1; }} > </color-palette-reorder> `; } }"
+          "default": "class extends n { constructor() { super(...arguments), this.stabilizeWhileEditing = !1, this._storedAlias = \"\"; } /** Renders the content. */ content() { return p` <input value=${this.alias || this.color} @pointerdown=${(t) => { t.target instanceof HTMLInputElement && (t.stopPropagation(), this._storedAlias = t.target.value, t.target.value = \"\", t.target.focus()); }} @contextmenu=${(t) => { t.target instanceof HTMLInputElement && (t.stopPropagation(), t.preventDefault(), t.target.value = this.color.toUpperCase(), this.alias = \"\", t.target.blur()); }} @keypress=${(t) => { t.target instanceof HTMLInputElement && t.key === \"Enter\" && t.target.blur(); }} @focusout=${(t) => { t.target instanceof HTMLInputElement && (t.target.value.trim() === \"\" ? t.target.value = this._storedAlias : t.target.value !== this.color && (this.alias = t.target.value), this.dispatchEvent(new CustomEvent(\"alias\", { detail: this.alias }))); }} > <button id='trash' title='Remove' @click=${(t) => this.dispatchEvent(new Event(\"trash\", t))} > ${c(h)} </button> `; } }"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorPaletteMenu",
+          "name": "ColorPaletteItemEdit",
           "declaration": {
             "name": "s",
-            "module": "dist/components/color-palette/menu/color-palette-menu.js"
+            "module": "dist/components/color-palette/item/color-palette-item-edit.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/menu/color-palette-menu.styles.js",
+      "path": "dist/components/color-palette/item/color-palette-item-edit.styles.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "t",
-          "default": "r` :host { display: block; } menu { display: grid; grid-template-columns: 1fr; padding: 0.5rem; margin: 0; border-radius: 5px; color: rgb(245, 245, 245); background-color: #222222; } li { display: grid; grid-template-columns: subgrid; list-style: none; } button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: flex-start; column-gap: 0.5rem; background-color: inherit; color: inherit; border: none; cursor: pointer; padding: 4px 8px; text-wrap: nowrap; &:hover { background-color: #323232; } span { font-size: 14px; } } hr { width: 95%; border-color: rgb(45, 45, 45); } `"
+          "name": "e",
+          "default": "o` :host([stabilizeWhileEditing]:hover) { flex-basis: 0 !important; } :host(:not([stabilizeWhileEditing])) #container { display: none; } :host(:not([stabilizeWhileEditing]):hover) #container { display: flex; } #container { input { color: var(--palette-item-color); font-size: var(--palette-item-font-size); font-weight: bold; user-select: none; border: none; background-color: transparent; field-sizing: content; min-width: 2rem; max-width: 5rem; cursor: pointer; text-align: center; } /* Color Trash Button */ #trash { background-color: var(--palette-item-background-color); color: var(--palette-item-color); box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 20px -28px inset; cursor: pointer; border: none; border-radius: 5px; padding: 4px 12px; &:hover { background-color: rgb(75, 75, 75); } svg { width: 18px; height: 18px; } } } `"
         }
       ],
       "exports": [
@@ -5132,41 +5153,41 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "t",
-            "module": "dist/components/color-palette/menu/color-palette-menu.styles.js"
+            "name": "e",
+            "module": "dist/components/color-palette/item/color-palette-item-edit.styles.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/menu/color-palette-reorder.js",
+      "path": "dist/components/color-palette/item/color-palette-item.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "o",
-          "default": "class extends m { constructor() { super(...arguments), this.colors = []; } render() { return l` <menu> ${f( Object.keys(c), (r) => l` <button @click=${(s) => { this.selectOption(r); }} > <span>${r}</span> </button> ` )} </menu> `; } /** Reorders the palette colors based on the selected option. */ selectOption(r) { const s = this.colors.map((e) => h(e)); let a = []; switch (r) { case \"Hue\": a = s.sort((e, t) => e.hue() - t.hue()).map((e) => e.hex()); break; case \"Saturation\": a = s.sort((e, t) => e.saturation() - t.saturation()).map((e) => e.hex()); break; case \"Lightness\": a = s.sort((e, t) => e.lightness() - t.lightness()).map((e) => e.hex()); break; case \"Red\": a = s.sort((e, t) => e.red() - t.red()).map((e) => e.hex()); break; case \"Green\": a = s.sort((e, t) => e.green() - t.green()).map((e) => e.hex()); break; case \"Blue\": a = s.sort((e, t) => e.blue() - t.blue()).map((e) => e.hex()); break; case \"Alpha\": a = s.sort((e, t) => e.alpha() - t.alpha()).map((e) => e.hex()); break; } this.dispatchEvent(new v({ colors: a })); } }"
+          "name": "t",
+          "default": "class extends d { constructor() { super(...arguments), this.color = \"\", this.alias = \"\", this.aliasMode = c.aliasMode, this.direction = c.direction, this.editMode = !1, this.height = c.height, this.preventHover = !1, this.hideText = !1, this.colorCount = 0; } render() { return this.style.setProperty(\"--palette-item-background-color\", this.color), this.style.setProperty(\"--palette-item-color\", f(this.color)), this.style.setProperty(\"--palette-item-font-size\", `${g(this.colorCount)}px`), p` <div id='container' @click=${(i) => this.dispatchEvent(new Event(\"select\", i))} > ${this.content()} </div> `; } /** Renders the content */ content() { const i = this.aliasMode === u.Both || this.alias == null || this.alias.trim() === \"\"; return p` ${i ? p`<span id='text'>${this.color.trim().toUpperCase()}</span>` : y} ${this.alias !== \"\" ? p` <span id=\"alias\">${this.alias}</span> ` : y} `; } }"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorPaletteReorder",
+          "name": "ColorPaletteItem",
           "declaration": {
-            "name": "o",
-            "module": "dist/components/color-palette/menu/color-palette-reorder.js"
+            "name": "t",
+            "module": "dist/components/color-palette/item/color-palette-item.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/menu/color-palette-reorder.styles.js",
+      "path": "dist/components/color-palette/item/color-palette-item.styles.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "n",
-          "default": "o` :host { display: block; } menu { display: flex; flex-direction: column; gap: 0.5rem; background-color: rgb(27, 27, 27); padding: 0.5rem; border-radius: 5px; button { color: rgb(245, 245, 245); background-color: transparent; border: none; padding: 4px 12px; cursor: pointer; &:hover { background-color: rgb(75, 75, 75); } span { font-size: 14px; } } } `"
+          "name": "o",
+          "default": "e` :host { --palette-item-background-color: #000000; --palette-item-color: #ffffff; --palette-item-font-size: 16px; display: flex; flex: 1; transition: all 0.1s ease-in-out; background-color: var(--palette-item-background-color); color: var(--palette-item-color); } /* Animation Size */ :host(:not([preventHover]):hover) { flex-basis: var(--palette-column-flex-basis); } :host([direction='column']:not([preventHover]):hover) { flex-basis: 80px; } /* Hover States */ :host(:not([preventHover])) #container > span { display: none; } :host(:not([preventHover]):hover) #container > span { display: block; } :host([hideText]) #container > span { display: none; } :host([hideText]:hover) #container > span { display: none; } /* Container Directions */ :host([direction='column']) > #container { display: flex; flex-direction: column; justify-content: center; } :host([direction='row']) > #container { display: flex; justify-content: center; } :host([direction='row'][editMode]) > #container { display: grid; grid-template-columns: 1fr 1fr; } #container { flex: 1; gap: 3%; *:first-child { justify-self: flex-end; align-self: center; } *:last-child { justify-self: flex-start; align-self: center; } span { display: block; text-align: center; font-size: 100%; font-weight: bold; user-select: none; } } `"
         }
       ],
       "exports": [
@@ -5174,41 +5195,41 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "n",
-            "module": "dist/components/color-palette/menu/color-palette-reorder.styles.js"
+            "name": "o",
+            "module": "dist/components/color-palette/item/color-palette-item.styles.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/item/color-palette-item-edit.js",
+      "path": "dist/components/color-palette/menu/color-palette-menu.js",
       "declarations": [
         {
           "kind": "variable",
           "name": "s",
-          "default": "class extends n { constructor() { super(...arguments), this.stabilizeWhileEditing = !1, this._storedAlias = \"\"; } /** Renders the content. */ content() { return p` <input value=${this.alias || this.color} @pointerdown=${(t) => { t.target instanceof HTMLInputElement && (t.stopPropagation(), this._storedAlias = t.target.value, t.target.value = \"\", t.target.focus()); }} @contextmenu=${(t) => { t.target instanceof HTMLInputElement && (t.stopPropagation(), t.preventDefault(), t.target.value = this.color.toUpperCase(), this.alias = \"\", t.target.blur()); }} @keypress=${(t) => { t.target instanceof HTMLInputElement && t.key === \"Enter\" && t.target.blur(); }} @focusout=${(t) => { t.target instanceof HTMLInputElement && (t.target.value.trim() === \"\" ? t.target.value = this._storedAlias : t.target.value !== this.color && (this.alias = t.target.value), this.dispatchEvent(new CustomEvent(\"alias\", { detail: this.alias }))); }} > <button id='trash' title='Remove' @click=${(t) => this.dispatchEvent(new Event(\"trash\", t))} > ${c(h)} </button> `; } }"
+          "default": "class extends b { constructor() { super(...arguments), this.colors = [], this.editMode = !1, this.copyFormat = v.copyFormat, this.reorder = !1; } render() { return a` ${this.reorder ? this.reorderItems() : this.menuItems()} `; } /** Renders the menu items. */ menuItems() { const n = { colors: this.colors, settings: this.settings }; return a` <menu> <li> <button @click=${(t) => { t.stopPropagation(), this.reorder = !this.reorder; }} > ${r(g)} <span>Reorder</span> </button> </li> <li> <button @click=${() => { this.dispatchEvent(new Event(\"open-editor\")); }} > ${r(E)} <span>Edit Mode</span> </button> </li> ${// Only show toggle edit mode option when palette is not a gradient this.settings?.gradient ? $ : a` <li> <button @click=${() => { this.dispatchEvent(new CustomEvent(\"edit-mode\", { detail: !this.editMode })); }} > ${r(C)} <span>Quick Edit</span> ${this.editMode ? r(w) : $} </button> </li> `} <hr> <li> <button @click=${() => { const t = this.colors.map((e) => { const o = d(e).rgb(); return `rgb(${o[0]}, ${o[1]}, ${o[2]})`; }); this.dispatchEvent(new p({ colors: t })); }} > ${r(u)} <span>Convert to RGB</span> </button> </li> <li> <button @click=${() => { const t = this.colors.map((e) => { const o = d(e).hsl(); return `hsl(${o[0]} ${o[1]}% ${o[2]}%)`; }); this.dispatchEvent(new p({ colors: t })); }} > ${r(u)} <span>Convert to HSL</span> </button> </li> <li> <button @click=${() => { const t = this.colors.map((e) => d(e).hex(2)); this.dispatchEvent(new p({ colors: t })); }} > ${r(u)} <span>Convert to HEX</span> </button> </li> <hr> <li> <button @click=${async () => { await y(JSON.stringify(n), this.copyFormat), this.dispatchEvent(new p({ colors: [] })); }} > ${r(P)} <span>Cut</span> </button> </li> <li> <button @click=${async () => { await y(JSON.stringify(n), this.copyFormat); }} > ${r(O)} <span>Copy</span> </button> </li> </menu> `; } /** Renders the reorder items. */ reorderItems() { return a` <color-palette-reorder .colors=${this.colors} @palette-change=${(n) => { this.dispatchEvent(new p({ colors: n.detail.colors })), this.reorder = !1; }} > </color-palette-reorder> `; } }"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorPaletteItemEdit",
+          "name": "ColorPaletteMenu",
           "declaration": {
             "name": "s",
-            "module": "dist/components/color-palette/item/color-palette-item-edit.js"
+            "module": "dist/components/color-palette/menu/color-palette-menu.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/item/color-palette-item-edit.styles.js",
+      "path": "dist/components/color-palette/menu/color-palette-menu.styles.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "e",
-          "default": "o` :host([stabilizeWhileEditing]:hover) { flex-basis: 0 !important; } :host(:not([stabilizeWhileEditing])) #container { display: none; } :host(:not([stabilizeWhileEditing]):hover) #container { display: flex; } #container { input { color: var(--palette-item-color); font-size: var(--palette-item-font-size); font-weight: bold; user-select: none; border: none; background-color: transparent; field-sizing: content; min-width: 2rem; max-width: 5rem; cursor: pointer; text-align: center; } /* Color Trash Button */ #trash { background-color: var(--palette-item-background-color); color: var(--palette-item-color); box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 20px -28px inset; cursor: pointer; border: none; border-radius: 5px; padding: 4px 12px; &:hover { background-color: rgb(75, 75, 75); } svg { width: 18px; height: 18px; } } } `"
+          "name": "t",
+          "default": "r` :host { display: block; } menu { display: grid; grid-template-columns: 1fr; padding: 0.5rem; margin: 0; border-radius: 5px; color: rgb(245, 245, 245); background-color: #222222; } li { display: grid; grid-template-columns: subgrid; list-style: none; } button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: flex-start; column-gap: 0.5rem; background-color: inherit; color: inherit; border: none; cursor: pointer; padding: 4px 8px; text-wrap: nowrap; &:hover { background-color: #323232; } span { font-size: 14px; } } hr { width: 95%; border-color: rgb(45, 45, 45); } `"
         }
       ],
       "exports": [
@@ -5216,41 +5237,41 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "e",
-            "module": "dist/components/color-palette/item/color-palette-item-edit.styles.js"
+            "name": "t",
+            "module": "dist/components/color-palette/menu/color-palette-menu.styles.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/item/color-palette-item.js",
+      "path": "dist/components/color-palette/menu/color-palette-reorder.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "t",
-          "default": "class extends d { constructor() { super(...arguments), this.color = \"\", this.alias = \"\", this.aliasMode = c.aliasMode, this.direction = c.direction, this.editMode = !1, this.height = c.height, this.preventHover = !1, this.hideText = !1, this.colorCount = 0; } render() { return this.style.setProperty(\"--palette-item-background-color\", this.color), this.style.setProperty(\"--palette-item-color\", f(this.color)), this.style.setProperty(\"--palette-item-font-size\", `${g(this.colorCount)}px`), p` <div id='container' @click=${(i) => this.dispatchEvent(new Event(\"select\", i))} > ${this.content()} </div> `; } /** Renders the content */ content() { const i = this.aliasMode === u.Both || this.alias == null || this.alias.trim() === \"\"; return p` ${i ? p`<span id='text'>${this.color.trim().toUpperCase()}</span>` : y} ${this.alias !== \"\" ? p` <span id=\"alias\">${this.alias}</span> ` : y} `; } }"
+          "name": "o",
+          "default": "class extends m { constructor() { super(...arguments), this.colors = []; } render() { return l` <menu> ${f( Object.keys(c), (r) => l` <button @click=${(s) => { this.selectOption(r); }} > <span>${r}</span> </button> ` )} </menu> `; } /** Reorders the palette colors based on the selected option. */ selectOption(r) { const s = this.colors.map((e) => h(e)); let a = []; switch (r) { case \"Hue\": a = s.sort((e, t) => e.hue() - t.hue()).map((e) => e.hex()); break; case \"Saturation\": a = s.sort((e, t) => e.saturation() - t.saturation()).map((e) => e.hex()); break; case \"Lightness\": a = s.sort((e, t) => e.lightness() - t.lightness()).map((e) => e.hex()); break; case \"Red\": a = s.sort((e, t) => e.red() - t.red()).map((e) => e.hex()); break; case \"Green\": a = s.sort((e, t) => e.green() - t.green()).map((e) => e.hex()); break; case \"Blue\": a = s.sort((e, t) => e.blue() - t.blue()).map((e) => e.hex()); break; case \"Alpha\": a = s.sort((e, t) => e.alpha() - t.alpha()).map((e) => e.hex()); break; } this.dispatchEvent(new v({ colors: a })); } }"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorPaletteItem",
+          "name": "ColorPaletteReorder",
           "declaration": {
-            "name": "t",
-            "module": "dist/components/color-palette/item/color-palette-item.js"
+            "name": "o",
+            "module": "dist/components/color-palette/menu/color-palette-reorder.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/item/color-palette-item.styles.js",
+      "path": "dist/components/color-palette/menu/color-palette-reorder.styles.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "o",
-          "default": "e` :host { --palette-item-background-color: #000000; --palette-item-color: #ffffff; --palette-item-font-size: 16px; display: flex; flex: 1; transition: all 0.1s ease-in-out; background-color: var(--palette-item-background-color); color: var(--palette-item-color); } /* Animation Size */ :host(:not([preventHover]):hover) { flex-basis: var(--palette-column-flex-basis); } :host([direction='column']:not([preventHover]):hover) { flex-basis: 80px; } /* Hover States */ :host(:not([preventHover])) #container > span { display: none; } :host(:not([preventHover]):hover) #container > span { display: block; } :host([hideText]) #container > span { display: none; } :host([hideText]:hover) #container > span { display: none; } /* Container Directions */ :host([direction='column']) > #container { display: flex; flex-direction: column; justify-content: center; } :host([direction='row']) > #container { display: flex; justify-content: center; } :host([direction='row'][editMode]) > #container { display: grid; grid-template-columns: 1fr 1fr; } #container { flex: 1; gap: 3%; *:first-child { justify-self: flex-end; align-self: center; } *:last-child { justify-self: flex-start; align-self: center; } span { display: block; text-align: center; font-size: 100%; font-weight: bold; user-select: none; } } `"
+          "name": "n",
+          "default": "o` :host { display: block; } menu { display: flex; flex-direction: column; gap: 0.5rem; background-color: rgb(27, 27, 27); padding: 0.5rem; border-radius: 5px; button { color: rgb(245, 245, 245); background-color: transparent; border: none; padding: 4px 12px; cursor: pointer; &:hover { background-color: rgb(75, 75, 75); } span { font-size: 14px; } } } `"
         }
       ],
       "exports": [
@@ -5258,8 +5279,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "o",
-            "module": "dist/components/color-palette/item/color-palette-item.styles.js"
+            "name": "n",
+            "module": "dist/components/color-palette/menu/color-palette-reorder.styles.js"
           }
         }
       ]
@@ -7252,275 +7273,416 @@
               }
             },
             {
-              "description": "Emits a change in palette colors.",
+              "description": "Emits a change in palette colors.",
+              "name": "palette-change"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "colors",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "The colors that can be reordered.",
+              "fieldName": "colors"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "color-palette-reorder",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ColorPaletteReorder",
+          "declaration": {
+            "name": "ColorPaletteReorder",
+            "module": "src/components/color-palette/menu/color-palette-reorder.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "color-palette-reorder",
+          "declaration": {
+            "name": "ColorPaletteReorder",
+            "module": "src/components/color-palette/menu/color-palette-reorder.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/color-palette/editor/options/picker-generate.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Generates new colors upon user request for color-palette-editor.",
+          "name": "PickerGenerate",
+          "members": [
+            {
+              "kind": "field",
+              "name": "settings",
+              "type": {
+                "text": "PaletteSettings"
+              },
+              "privacy": "public",
+              "default": "{ height: defaultSettings.height, width: defaultSettings.width, direction: defaultSettings.direction, gradient: defaultSettings.gradient, preventHover: defaultSettings.preventHover, hideText: defaultSettings.hideText, override: defaultSettings.override, aliases: [] }",
+              "description": "The palette settings to be edited.",
+              "attribute": "settings"
+            },
+            {
+              "kind": "field",
+              "name": "combination",
+              "type": {
+                "text": "Combination"
+              },
+              "privacy": "public",
+              "description": "The color theory combination used when generating colors.",
+              "attribute": "combination"
+            },
+            {
+              "kind": "field",
+              "name": "baseColor",
+              "type": {
+                "text": "ReturnType<typeof colorsea> | undefined"
+              },
+              "privacy": "public",
+              "description": "The base color used when generating colors.",
+              "attribute": "baseColor"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "PaletteChangeEvent"
+              }
+            },
+            {
+              "description": "Emitted when new colors have been generated.",
               "name": "palette-change"
             }
           ],
           "attributes": [
             {
-              "name": "colors",
+              "name": "settings",
               "type": {
-                "text": "string[]"
+                "text": "PaletteSettings"
               },
-              "default": "[]",
-              "description": "The colors that can be reordered.",
-              "fieldName": "colors"
+              "default": "{ height: defaultSettings.height, width: defaultSettings.width, direction: defaultSettings.direction, gradient: defaultSettings.gradient, preventHover: defaultSettings.preventHover, hideText: defaultSettings.hideText, override: defaultSettings.override, aliases: [] }",
+              "description": "The palette settings to be edited.",
+              "fieldName": "settings"
+            },
+            {
+              "name": "combination",
+              "type": {
+                "text": "Combination"
+              },
+              "description": "The color theory combination used when generating colors.",
+              "fieldName": "combination"
+            },
+            {
+              "name": "baseColor",
+              "type": {
+                "text": "ReturnType<typeof colorsea> | undefined"
+              },
+              "description": "The base color used when generating colors.",
+              "fieldName": "baseColor"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "color-palette-reorder",
+          "tagName": "picker-generate",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorPaletteReorder",
+          "name": "PickerGenerate",
           "declaration": {
-            "name": "ColorPaletteReorder",
-            "module": "src/components/color-palette/menu/color-palette-reorder.ts"
+            "name": "PickerGenerate",
+            "module": "src/components/color-palette/editor/options/picker-generate.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "color-palette-reorder",
-          "declaration": {
-            "name": "ColorPaletteReorder",
-            "module": "src/components/color-palette/menu/color-palette-reorder.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/node_modules/style-observer/src/util/adopt-css.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "n",
-          "parameters": [
-            {
-              "name": "l"
-            },
-            {
-              "name": "e",
-              "default": "globalThis.document"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
+          "name": "picker-generate",
           "declaration": {
-            "name": "n",
-            "module": "dist/node_modules/style-observer/src/util/adopt-css.js"
+            "name": "PickerGenerate",
+            "module": "src/components/color-palette/editor/options/picker-generate.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/node_modules/style-observer/src/util/Bug.js",
+      "path": "src/components/color-palette/editor/options/picker-image.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "t",
+          "description": "Lets users choose an image to take colors from for color-palette-editor.",
+          "name": "PickerImage",
           "members": [
             {
               "kind": "field",
-              "name": "#t",
+              "name": "_canvas",
+              "type": {
+                "text": "CanvasImage"
+              },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#e",
+              "name": "_tooltip",
+              "type": {
+                "text": "ToolTip"
+              },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "valuePending",
-              "description": "Get whether the bug is present or not, or a promise that will resolve to this value when detection is complete.",
-              "readonly": true
+              "name": "_urlInput",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "value",
-              "description": "Synchronously get either whether the bug is present (if already detected or detection is sync)\nor kick off detection and return the initial value if detection is async",
-              "readonly": true
+              "name": "_fileInput",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "all",
+              "name": "width",
               "type": {
-                "text": "object"
+                "text": "number"
               },
-              "static": true,
-              "default": "{}"
+              "privacy": "public",
+              "default": "0",
+              "description": "The width of the canvas.",
+              "attribute": "width"
             },
             {
-              "kind": "method",
-              "name": "detectAll",
-              "static": true
+              "kind": "field",
+              "name": "height",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "default": "0",
+              "description": "The height of the canvas.",
+              "attribute": "height"
             },
             {
               "kind": "field",
-              "name": "name",
-              "default": "e"
+              "name": "_fileURL",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''",
+              "description": "The user input file URL (if there is one)."
             },
             {
               "kind": "field",
-              "name": "initialValue"
+              "name": "_count",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "8",
+              "description": "The number of colors the retrieve from the image."
             },
             {
-              "kind": "field",
-              "name": "detect",
-              "default": "s"
+              "kind": "method",
+              "name": "_onFileChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "default": "this"
+              "kind": "method",
+              "name": "_updatePalette",
+              "privacy": "private"
             }
-          ]
+          ],
+          "events": [
+            {
+              "name": "select",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Emitted when a color on the canvas has been selected."
+            },
+            {
+              "type": {
+                "text": "PaletteChangeEvent"
+              }
+            },
+            {
+              "description": "Emitted when new colors have been chosen.",
+              "name": "palette-change"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "width",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The width of the canvas.",
+              "fieldName": "width"
+            },
+            {
+              "name": "height",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The height of the canvas.",
+              "fieldName": "height"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "picker-image",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
+          "name": "PickerImage",
           "declaration": {
-            "name": "t",
-            "module": "dist/node_modules/style-observer/src/util/Bug.js"
+            "name": "PickerImage",
+            "module": "src/components/color-palette/editor/options/picker-image.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "picker-image",
+          "declaration": {
+            "name": "PickerImage",
+            "module": "src/components/color-palette/editor/options/picker-image.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/node_modules/style-observer/src/util/gentle-register-property.js",
+      "path": "src/components/color-palette/editor/options/picker-manual.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "f",
-          "parameters": [
-            {
-              "name": "t"
-            },
-            {
-              "name": "n",
-              "default": "{}"
-            },
+          "kind": "class",
+          "description": "Allows users to manually choose colors for color-palette-editor.",
+          "name": "PickerManual",
+          "members": [],
+          "events": [
             {
-              "name": "r",
-              "default": "globalThis.document"
+              "name": "change",
+              "type": {
+                "text": "string"
+              },
+              "description": "Emitted when a new color has been selected."
             }
-          ]
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "picker-manual",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
+          "name": "PickerManual",
           "declaration": {
-            "name": "f",
-            "module": "dist/node_modules/style-observer/src/util/gentle-register-property.js"
+            "name": "PickerManual",
+            "module": "src/components/color-palette/editor/options/picker-manual.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/node_modules/style-observer/src/util/is-registered-property.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "n",
-          "parameters": [
-            {
-              "name": "t"
-            },
-            {
-              "name": "l",
-              "default": "globalThis.document"
-            }
-          ]
-        }
-      ],
-      "exports": [
+        },
         {
-          "kind": "js",
-          "name": "default",
+          "kind": "custom-element-definition",
+          "name": "picker-manual",
           "declaration": {
-            "name": "n",
-            "module": "dist/node_modules/style-observer/src/util/is-registered-property.js"
+            "name": "PickerManual",
+            "module": "src/components/color-palette/editor/options/picker-manual.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/node_modules/style-observer/src/util/MultiWeakMap.js",
+      "path": "src/components/color-palette/editor/options/picker-url.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "r",
+          "description": "Selects colors from a user provided URL for color-palette-editor.",
+          "name": "PickerUrl",
           "members": [
             {
-              "kind": "method",
-              "name": "has",
-              "parameters": [
-                {
-                  "name": "e"
-                },
-                {
-                  "name": "s"
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "add",
-              "parameters": [
-                {
-                  "name": "e"
-                },
-                {
-                  "name": "s"
-                }
-              ]
-            },
+              "kind": "field",
+              "name": "_input",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "privacy": "private"
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "delete",
-              "parameters": [
-                {
-                  "name": "e"
-                },
-                {
-                  "name": "s"
-                }
-              ]
+              "name": "change",
+              "type": {
+                "text": "string[]"
+              },
+              "description": "Emits the colors gathered from the URL."
             }
           ],
           "superclass": {
-            "name": "WeakMap",
-            "module": "dist/node_modules/style-observer/src/util/MultiWeakMap.js"
-          }
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "picker-url",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
+          "name": "PickerUrl",
           "declaration": {
-            "name": "r",
-            "module": "dist/node_modules/style-observer/src/util/MultiWeakMap.js"
+            "name": "PickerUrl",
+            "module": "src/components/color-palette/editor/options/picker-url.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "picker-url",
+          "declaration": {
+            "name": "PickerUrl",
+            "module": "src/components/color-palette/editor/options/picker-url.ts"
           }
         }
       ]
@@ -7611,372 +7773,231 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/editor/options/picker-generate.ts",
+      "path": "dist/node_modules/style-observer/src/util/adopt-css.js",
       "declarations": [
         {
-          "kind": "class",
-          "description": "Generates new colors upon user request for color-palette-editor.",
-          "name": "PickerGenerate",
-          "members": [
-            {
-              "kind": "field",
-              "name": "settings",
-              "type": {
-                "text": "PaletteSettings"
-              },
-              "privacy": "public",
-              "default": "{ height: defaultSettings.height, width: defaultSettings.width, direction: defaultSettings.direction, gradient: defaultSettings.gradient, preventHover: defaultSettings.preventHover, hideText: defaultSettings.hideText, override: defaultSettings.override, aliases: [] }",
-              "description": "The palette settings to be edited.",
-              "attribute": "settings"
-            },
-            {
-              "kind": "field",
-              "name": "combination",
-              "type": {
-                "text": "Combination"
-              },
-              "privacy": "public",
-              "description": "The color theory combination used when generating colors.",
-              "attribute": "combination"
-            },
-            {
-              "kind": "field",
-              "name": "baseColor",
-              "type": {
-                "text": "ReturnType<typeof colorsea> | undefined"
-              },
-              "privacy": "public",
-              "description": "The base color used when generating colors.",
-              "attribute": "baseColor"
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "PaletteChangeEvent"
-              }
-            },
-            {
-              "description": "Emitted when new colors have been generated.",
-              "name": "palette-change"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "settings",
-              "type": {
-                "text": "PaletteSettings"
-              },
-              "default": "{ height: defaultSettings.height, width: defaultSettings.width, direction: defaultSettings.direction, gradient: defaultSettings.gradient, preventHover: defaultSettings.preventHover, hideText: defaultSettings.hideText, override: defaultSettings.override, aliases: [] }",
-              "description": "The palette settings to be edited.",
-              "fieldName": "settings"
-            },
+          "kind": "function",
+          "name": "n",
+          "parameters": [
             {
-              "name": "combination",
-              "type": {
-                "text": "Combination"
-              },
-              "description": "The color theory combination used when generating colors.",
-              "fieldName": "combination"
+              "name": "l"
             },
             {
-              "name": "baseColor",
-              "type": {
-                "text": "ReturnType<typeof colorsea> | undefined"
-              },
-              "description": "The base color used when generating colors.",
-              "fieldName": "baseColor"
+              "name": "e",
+              "default": "globalThis.document"
             }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "picker-generate",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "PickerGenerate",
-          "declaration": {
-            "name": "PickerGenerate",
-            "module": "src/components/color-palette/editor/options/picker-generate.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "picker-generate",
+          "name": "default",
           "declaration": {
-            "name": "PickerGenerate",
-            "module": "src/components/color-palette/editor/options/picker-generate.ts"
+            "name": "n",
+            "module": "dist/node_modules/style-observer/src/util/adopt-css.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/editor/options/picker-image.ts",
+      "path": "dist/node_modules/style-observer/src/util/Bug.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Lets users choose an image to take colors from for color-palette-editor.",
-          "name": "PickerImage",
+          "description": "",
+          "name": "t",
           "members": [
             {
               "kind": "field",
-              "name": "_canvas",
-              "type": {
-                "text": "CanvasImage"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_tooltip",
-              "type": {
-                "text": "ToolTip"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_urlInput",
-              "type": {
-                "text": "HTMLInputElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_fileInput",
-              "type": {
-                "text": "HTMLInputElement"
-              },
+              "name": "#t",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "width",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "public",
-              "default": "0",
-              "description": "The width of the canvas.",
-              "attribute": "width"
+              "kind": "field",
+              "name": "#e",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "height",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "public",
-              "default": "0",
-              "description": "The height of the canvas.",
-              "attribute": "height"
+              "name": "valuePending",
+              "description": "Get whether the bug is present or not, or a promise that will resolve to this value when detection is complete.",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "_fileURL",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "''",
-              "description": "The user input file URL (if there is one)."
+              "name": "value",
+              "description": "Synchronously get either whether the bug is present (if already detected or detection is sync)\nor kick off detection and return the initial value if detection is async",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "_count",
+              "name": "all",
               "type": {
-                "text": "number"
+                "text": "object"
               },
-              "privacy": "private",
-              "default": "8",
-              "description": "The number of colors the retrieve from the image."
+              "static": true,
+              "default": "{}"
             },
             {
               "kind": "method",
-              "name": "_onFileChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "name": "detectAll",
+              "static": true
             },
             {
-              "kind": "method",
-              "name": "_updatePalette",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "name": "select",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Emitted when a color on the canvas has been selected."
+              "kind": "field",
+              "name": "name",
+              "default": "e"
             },
             {
-              "type": {
-                "text": "PaletteChangeEvent"
-              }
+              "kind": "field",
+              "name": "initialValue"
             },
             {
-              "description": "Emitted when new colors have been chosen.",
-              "name": "palette-change"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "width",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The width of the canvas.",
-              "fieldName": "width"
+              "kind": "field",
+              "name": "detect",
+              "default": "s"
             },
             {
-              "name": "height",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The height of the canvas.",
-              "fieldName": "height"
+              "kind": "field",
+              "default": "this"
             }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "picker-image",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "PickerImage",
-          "declaration": {
-            "name": "PickerImage",
-            "module": "src/components/color-palette/editor/options/picker-image.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "picker-image",
+          "name": "default",
           "declaration": {
-            "name": "PickerImage",
-            "module": "src/components/color-palette/editor/options/picker-image.ts"
+            "name": "t",
+            "module": "dist/node_modules/style-observer/src/util/Bug.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/editor/options/picker-manual.ts",
+      "path": "dist/node_modules/style-observer/src/util/gentle-register-property.js",
       "declarations": [
         {
-          "kind": "class",
-          "description": "Allows users to manually choose colors for color-palette-editor.",
-          "name": "PickerManual",
-          "members": [],
-          "events": [
+          "kind": "function",
+          "name": "f",
+          "parameters": [
             {
-              "name": "change",
-              "type": {
-                "text": "string"
-              },
-              "description": "Emitted when a new color has been selected."
+              "name": "t"
+            },
+            {
+              "name": "n",
+              "default": "{}"
+            },
+            {
+              "name": "r",
+              "default": "globalThis.document"
             }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "picker-manual",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "PickerManual",
+          "name": "default",
           "declaration": {
-            "name": "PickerManual",
-            "module": "src/components/color-palette/editor/options/picker-manual.ts"
+            "name": "f",
+            "module": "dist/node_modules/style-observer/src/util/gentle-register-property.js"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util/is-registered-property.js",
+      "declarations": [
         {
-          "kind": "custom-element-definition",
-          "name": "picker-manual",
+          "kind": "function",
+          "name": "n",
+          "parameters": [
+            {
+              "name": "t"
+            },
+            {
+              "name": "l",
+              "default": "globalThis.document"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
           "declaration": {
-            "name": "PickerManual",
-            "module": "src/components/color-palette/editor/options/picker-manual.ts"
+            "name": "n",
+            "module": "dist/node_modules/style-observer/src/util/is-registered-property.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/editor/options/picker-url.ts",
+      "path": "dist/node_modules/style-observer/src/util/MultiWeakMap.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Selects colors from a user provided URL for color-palette-editor.",
-          "name": "PickerUrl",
+          "description": "",
+          "name": "r",
           "members": [
             {
-              "kind": "field",
-              "name": "_input",
-              "type": {
-                "text": "HTMLInputElement"
-              },
-              "privacy": "private"
-            }
-          ],
-          "events": [
+              "kind": "method",
+              "name": "has",
+              "parameters": [
+                {
+                  "name": "e"
+                },
+                {
+                  "name": "s"
+                }
+              ]
+            },
             {
-              "name": "change",
-              "type": {
-                "text": "string[]"
-              },
-              "description": "Emits the colors gathered from the URL."
+              "kind": "method",
+              "name": "add",
+              "parameters": [
+                {
+                  "name": "e"
+                },
+                {
+                  "name": "s"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "delete",
+              "parameters": [
+                {
+                  "name": "e"
+                },
+                {
+                  "name": "s"
+                }
+              ]
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "picker-url",
-          "customElement": true
+            "name": "WeakMap",
+            "module": "dist/node_modules/style-observer/src/util/MultiWeakMap.js"
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "PickerUrl",
-          "declaration": {
-            "name": "PickerUrl",
-            "module": "src/components/color-palette/editor/options/picker-url.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "picker-url",
+          "name": "default",
           "declaration": {
-            "name": "PickerUrl",
-            "module": "src/components/color-palette/editor/options/picker-url.ts"
+            "name": "r",
+            "module": "dist/node_modules/style-observer/src/util/MultiWeakMap.js"
           }
         }
       ]