@alegendstale/holly-components 4.0.6 → 4.0.7

package/custom-elements.json

@@ -23,56 +23,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/decorators/condCustomElement.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "o",
-          "parameters": [
-            {
-              "name": "t"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "condCustomElement",
-          "declaration": {
-            "name": "o",
-            "module": "dist/decorators/condCustomElement.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/decorators/ExposeParts.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "l",
-          "parameters": [
-            {
-              "name": "o"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "exposeParts",
-          "declaration": {
-            "name": "l",
-            "module": "dist/decorators/ExposeParts.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/controllers/ResponsiveController.js",
@@ -174,6 +124,56 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/decorators/condCustomElement.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "o",
+          "parameters": [
+            {
+              "name": "t"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "condCustomElement",
+          "declaration": {
+            "name": "o",
+            "module": "dist/decorators/condCustomElement.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/decorators/ExposeParts.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "l",
+          "parameters": [
+            {
+              "name": "o"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "exposeParts",
+          "declaration": {
+            "name": "l",
+            "module": "dist/decorators/ExposeParts.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/events/events.js",
@@ -1715,6 +1715,132 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/canvas/canvas-base.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "o",
+          "default": "class extends u { render() { return x` <canvas @click=${(e) => this.dispatchEvent(new CustomEvent(\"select\", { detail: this.getCanvasHex(e.clientX, e.clientY) }))} @pointermove=${(e) => { e.isPrimary && this.dispatchEvent(new CustomEvent(\"move\", { detail: { x: e.clientX, y: e.clientY } })); }} ${h((e) => { e instanceof HTMLCanvasElement && (this.context = e.getContext(\"2d\", { willReadFrequently: !0, alpha: !0 })); })} > </canvas> `; } /** Retrieves the hex from the mouse position. */ getCanvasHex(l, e) { const a = this.canvas.getBoundingClientRect(); let n = l - a.left, t = e - a.top, [s, r, c, p] = this.context.getImageData(n, t, 1, 1).data; const i = Math.round(p / 255 * 100); return i !== 255 ? v([s, r, c, i]).hex() : v([s, r, c]).hex(); } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CanvasBase",
+          "declaration": {
+            "name": "o",
+            "module": "dist/components/canvas/canvas-base.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/canvas/canvas-gradient.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "i",
+          "default": "class extends d { constructor() { super(...arguments), this.colors = [], this.height = 0, this.width = 0, this.direction = h.Column; } updated(r) { super.updated(r), this.createGradient(this.colors, this.height, this.width, this.direction); } /** Creates a new gradient canvas */ createGradient(r, e, o, s) { if (!this.context) return; this.canvas.height = e, this.canvas.width = o; let t = s === h.Column ? this.context.createLinearGradient(0, 0, o, 0) : this.context.createLinearGradient(0, 0, 0, e), n = []; for (const [a, l] of r.entries()) u(l) && (t.addColorStop(a / (r.length - 1), l), n.push(l)); if (n.length <= 1) throw new Error(\"There are not enough valid color stops to create the gradient.\"); this.context.fillStyle = t || \"#000\", this.context.fillRect(0, 0, o, e), this.canvas.classList.add(\"gradient\"), this.canvas.style.setProperty(\"--palette-column-flex-basis\", (e / r.length / 2).toString() + \"px\"); } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CanvasGradient",
+          "declaration": {
+            "name": "i",
+            "module": "dist/components/canvas/canvas-gradient.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/canvas/canvas-image.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "r",
+          "default": "class extends c { constructor() { super(...arguments), this.imageURL = \"\", this.smoothing = !1, this.width = 0, this.height = 0, this.status = \"idle\"; } updated(t) { super.updated(t), t.has(\"imageURL\") ? this.status = this.imageURL ? \"loading\" : \"idle\" : (t.has(\"width\") || t.has(\"height\")) && this.status === \"success\" && this._performDraw(); } get updateComplete() { return (async () => { if (await super.updateComplete, this.status === \"loading\" && await new Promise((a) => { this.addEventListener(\"canvas-ready\", a, { once: !0 }); }), this.status === \"error\") throw new Error(`canvas-image failed to load ${this.imageURL}`); return !0; })(); } render() { return l` ${super.render()} <img src=${this.imageURL} crossorigin='anonymous' @load=${() => this._performDraw()} @error=${() => this._handleLoadError()} > `; } /** * Updates & loads the canvas image. * Attempts to preserve aspect ratio based on width. */ _performDraw() { const t = this.image; if (!t || !this.context) return; const a = t.naturalHeight / t.naturalWidth; let e = this.width, s = e * a; s > this.height && (e = this.height / a, s = this.height), this.canvas.width = e, this.canvas.height = s, this.context.imageSmoothingEnabled = this.smoothing, this.context.drawImage(t, 0, 0, e, s), this.status = \"success\", this.dispatchEvent(new CustomEvent(\"canvas-ready\")); } /** @internal Handle errors when the image fails to load. */ _handleLoadError() { this.status = this.imageURL === \"\" ? \"idle\" : \"error\", this.dispatchEvent(new CustomEvent(\"canvas-ready\")); } /** * Gets the most frequent colors in an image. * @param numColors Number of colors to return * @param quality Artificially reduce number of pixels (higher = less accurate but faster) * @returns Most frequent colors */ async getPalette(t = 7, a = 10) { const e = t <= 7 ? t : t + 1; await this.updateComplete; const s = await this.createPixelArray(a); if (!s) return null; const i = w(s, e); return i ? i.palette() : []; } /** * Creates an array of pixels from the image. * Inspired by colorthief * @param quality Artificially reduce number of pixels (higher = less accurate but faster) * @returns Array of pixels */ async createPixelArray(t) { await this.updateComplete; const a = [], e = (await this.getImageData())?.data; if (!e) return null; const s = this.height * this.width; for (let i = 0; i < s; i += t) { const o = i * 4, [n, m, u, g] = [e[o + 0], e[o + 1], e[o + 2], e[o + 3]]; (typeof g > \"u\" || g >= 125) && (n > 250 && m > 250 && u > 250 || a.push([n, m, u])); } return a; } /** Gets the image data from the canvas. */ async getImageData(t = 0, a = 0) { try { return await this.updateComplete, this.context.getImageData(t, a, this.canvas.width, this.canvas.height); } catch { throw new Error(\"Failed to get image data.\"); } } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CanvasImage",
+          "declaration": {
+            "name": "r",
+            "module": "dist/components/canvas/canvas-image.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/canvas/canvas-image.styles.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "e",
+          "default": "s` :host { display: block; } :host([data-status='error']) { width: 100px; height: 100px; border: 2px solid red; } /* Hide when width hasn't been set */ canvas:not([width]) { display: none; } img { display: none; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "e",
+            "module": "dist/components/canvas/canvas-image.styles.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/carousel-scroller/carousel-scroller.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "o",
+          "default": "class extends c { constructor() { super(...arguments), this.slotChildren = [], this._currentSlide = 0, this.debouncers = /* @__PURE__ */ new WeakMap(); } render() { return d` <div class=\"container\"> <button @click=${this.scrollToPrevSlide}><</button> <button @click=${this.scrollToNextSlide}>></button> <div> <slot @slotchange=${this.slotChange} @slots-loaded=${(e) => this.slotChildren = e.detail} > </slot> </div> </div> `; } /** Gets the current slide. * @returns HTMLElement */ getCurrentSlide() { return this.slotChildren[this._currentSlide - 1]; } /** Scrolls to the slide before the current slide. */ scrollToPrevSlide() { this._currentSlide = this._currentSlide === 0 ? this._currentSlide = this.slotChildren.length - 1 : this._currentSlide - 1, this.slotChildren.at(this._currentSlide)?.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" }); } /** Scrolls to the slide after the current slide. */ scrollToNextSlide() { this._currentSlide = this._currentSlide === this.slotChildren.length - 1 ? 0 : this._currentSlide + 1, this.slotChildren.at(this._currentSlide)?.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" }); } /** @internal */ slotChange() { const e = Array.from( this.slotEl.assignedElements().map((l) => l) ); clearTimeout(this.debouncers.get(this.slotEl)); const s = setTimeout( () => this.dispatchEvent(new CustomEvent(\"slots-loaded\", { detail: e })), 100 ); this.debouncers.set(this.slotEl, s); } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CarouselScroller",
+          "declaration": {
+            "name": "o",
+            "module": "dist/components/carousel-scroller/carousel-scroller.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/carousel-scroller/carousel-scroller.styles.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "o",
+          "default": "r` :host { --padding: 40px; --margin: 80px; } .container { width: 600px; height: 400px; margin: 20px; border-radius: 20px; overflow: hidden; position: relative; & > button { position: absolute; width: var(--padding); height: calc(var(--padding) * 2); z-index: 1; background-color: #00000080; border: none; bottom: calc(50% - var(--padding)); font-size: 32px; &:hover { background-color: #6352b880; } &:nth-child(1) { left: 0; border-top-right-radius: 314px; border-bottom-right-radius: 314px; } &:nth-child(2) { right: 0; border-top-left-radius: 314px; border-bottom-left-radius: 314px; } } & > div { display: flex; overflow-x: scroll; position: relative; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--padding); } ::slotted(*) { display: flex; flex-direction: column; justify-content: center; min-height: calc(400px - var(--margin)); min-width: calc(600px - var(--margin)); max-height: calc(400px - var(--margin)); max-width: calc(600px - var(--margin)); background: white; scroll-snap-align: center; padding: calc(var(--margin) / 2); } } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "o",
+            "module": "dist/components/carousel-scroller/carousel-scroller.styles.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/components/color-palette/color-palette-utils.js",
@@ -1925,133 +2051,49 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/canvas/canvas-base.js",
+      "path": "dist/components/draw-svg/draw-svg.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "o",
-          "default": "class extends u { render() { return x` <canvas @click=${(e) => this.dispatchEvent(new CustomEvent(\"select\", { detail: this.getCanvasHex(e.clientX, e.clientY) }))} @pointermove=${(e) => { e.isPrimary && this.dispatchEvent(new CustomEvent(\"move\", { detail: { x: e.clientX, y: e.clientY } })); }} ${h((e) => { e instanceof HTMLCanvasElement && (this.context = e.getContext(\"2d\", { willReadFrequently: !0, alpha: !0 })); })} > </canvas> `; } /** Retrieves the hex from the mouse position. */ getCanvasHex(l, e) { const a = this.canvas.getBoundingClientRect(); let n = l - a.left, t = e - a.top, [s, r, c, p] = this.context.getImageData(n, t, 1, 1).data; const i = Math.round(p / 255 * 100); return i !== 255 ? v([s, r, c, i]).hex() : v([s, r, c]).hex(); } }"
+          "name": "n",
+          "default": "class extends a { constructor() { super(...arguments), this.isIntersecting = !1, this.intersectionObserver = new IntersectionObserver(([s]) => { this.isIntersecting = s.isIntersecting, this.dispatchEvent(new CustomEvent(\"intersection\", { detail: s.isIntersecting })); }); } svgClasses() { return super.svgClasses(), { animation: this.isIntersecting }; } connectedCallback() { super.connectedCallback(), this.intersectionObserver.observe(this); } disconnectedCallback() { super.disconnectedCallback(), this.intersectionObserver.disconnect(); } }"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "CanvasBase",
+          "name": "DrawSvg",
           "declaration": {
-            "name": "o",
-            "module": "dist/components/canvas/canvas-base.js"
+            "name": "n",
+            "module": "dist/components/draw-svg/draw-svg.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/canvas/canvas-gradient.js",
+      "path": "dist/components/draw-svg/draw-svg.styles.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "i",
-          "default": "class extends d { constructor() { super(...arguments), this.colors = [], this.height = 0, this.width = 0, this.direction = h.Column; } updated(r) { super.updated(r), this.createGradient(this.colors, this.height, this.width, this.direction); } /** Creates a new gradient canvas */ createGradient(r, e, o, s) { if (!this.context) return; this.canvas.height = e, this.canvas.width = o; let t = s === h.Column ? this.context.createLinearGradient(0, 0, o, 0) : this.context.createLinearGradient(0, 0, 0, e), n = []; for (const [a, l] of r.entries()) u(l) && (t.addColorStop(a / (r.length - 1), l), n.push(l)); if (n.length <= 1) throw new Error(\"There are not enough valid color stops to create the gradient.\"); this.context.fillStyle = t || \"#000\", this.context.fillRect(0, 0, o, e), this.canvas.classList.add(\"gradient\"), this.canvas.style.setProperty(\"--palette-column-flex-basis\", (e / r.length / 2).toString() + \"px\"); } }"
+          "name": "e",
+          "default": "t` :host { stroke: white; fill: white; } /* Override responsive-svg path fill */ :host(:not([svgColors])) path { fill: transparent; } path { stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: 1000; } .animation { path { animation: textAnimation 2s ease-in-out 1 forwards; will-change: fill, stroke-width, stroke-dashoffset; } } @keyframes textAnimation { 0% { stroke-dashoffset: 1000; } 60% { fill: transparent; } 100% { fill: inherit; stroke-dashoffset: 0; stroke-width: 1; } } `"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "CanvasGradient",
+          "name": "default",
           "declaration": {
-            "name": "i",
-            "module": "dist/components/canvas/canvas-gradient.js"
+            "name": "e",
+            "module": "dist/components/draw-svg/draw-svg.styles.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/canvas/canvas-image.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "r",
-          "default": "class extends c { constructor() { super(...arguments), this.imageURL = \"\", this.smoothing = !1, this.width = 0, this.height = 0, this.status = \"idle\"; } updated(t) { super.updated(t), t.has(\"imageURL\") ? this.status = this.imageURL ? \"loading\" : \"idle\" : (t.has(\"width\") || t.has(\"height\")) && this.status === \"success\" && this._performDraw(); } get updateComplete() { return (async () => { if (await super.updateComplete, this.status === \"loading\" && await new Promise((a) => { this.addEventListener(\"canvas-ready\", a, { once: !0 }); }), this.status === \"error\") throw new Error(`canvas-image failed to load ${this.imageURL}`); return !0; })(); } render() { return l` ${super.render()} <img src=${this.imageURL} crossorigin='anonymous' @load=${() => this._performDraw()} @error=${() => this._handleLoadError()} > `; } /** * Updates & loads the canvas image. * Attempts to preserve aspect ratio based on width. */ _performDraw() { const t = this.image; if (!t || !this.context) return; const a = t.naturalHeight / t.naturalWidth; let e = this.width, s = e * a; s > this.height && (e = this.height / a, s = this.height), this.canvas.width = e, this.canvas.height = s, this.context.imageSmoothingEnabled = this.smoothing, this.context.drawImage(t, 0, 0, e, s), this.status = \"success\", this.dispatchEvent(new CustomEvent(\"canvas-ready\")); } /** @internal Handle errors when the image fails to load. */ _handleLoadError() { this.status = this.imageURL === \"\" ? \"idle\" : \"error\", this.dispatchEvent(new CustomEvent(\"canvas-ready\")); } /** * Gets the most frequent colors in an image. * @param numColors Number of colors to return * @param quality Artificially reduce number of pixels (higher = less accurate but faster) * @returns Most frequent colors */ async getPalette(t = 7, a = 10) { const e = t <= 7 ? t : t + 1; await this.updateComplete; const s = await this.createPixelArray(a); if (!s) return null; const i = w(s, e); return i ? i.palette() : []; } /** * Creates an array of pixels from the image. * Inspired by colorthief * @param quality Artificially reduce number of pixels (higher = less accurate but faster) * @returns Array of pixels */ async createPixelArray(t) { await this.updateComplete; const a = [], e = (await this.getImageData())?.data; if (!e) return null; const s = this.height * this.width; for (let i = 0; i < s; i += t) { const o = i * 4, [n, m, u, g] = [e[o + 0], e[o + 1], e[o + 2], e[o + 3]]; (typeof g > \"u\" || g >= 125) && (n > 250 && m > 250 && u > 250 || a.push([n, m, u])); } return a; } /** Gets the image data from the canvas. */ async getImageData(t = 0, a = 0) { try { return await this.updateComplete, this.context.getImageData(t, a, this.canvas.width, this.canvas.height); } catch { throw new Error(\"Failed to get image data.\"); } } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "CanvasImage",
-          "declaration": {
-            "name": "r",
-            "module": "dist/components/canvas/canvas-image.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/canvas/canvas-image.styles.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "e",
-          "default": "s` :host { display: block; } :host([data-status='error']) { width: 100px; height: 100px; border: 2px solid red; } /* Hide when width hasn't been set */ canvas:not([width]) { display: none; } img { display: none; } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "e",
-            "module": "dist/components/canvas/canvas-image.styles.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/carousel-scroller/carousel-scroller.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "o",
-          "default": "class extends c { constructor() { super(...arguments), this.slotChildren = [], this._currentSlide = 0, this.debouncers = /* @__PURE__ */ new WeakMap(); } render() { return d` <div class=\"container\"> <button @click=${this.scrollToPrevSlide}><</button> <button @click=${this.scrollToNextSlide}>></button> <div> <slot @slotchange=${this.slotChange} @slots-loaded=${(e) => this.slotChildren = e.detail} > </slot> </div> </div> `; } /** Gets the current slide. * @returns HTMLElement */ getCurrentSlide() { return this.slotChildren[this._currentSlide - 1]; } /** Scrolls to the slide before the current slide. */ scrollToPrevSlide() { this._currentSlide = this._currentSlide === 0 ? this._currentSlide = this.slotChildren.length - 1 : this._currentSlide - 1, this.slotChildren.at(this._currentSlide)?.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" }); } /** Scrolls to the slide after the current slide. */ scrollToNextSlide() { this._currentSlide = this._currentSlide === this.slotChildren.length - 1 ? 0 : this._currentSlide + 1, this.slotChildren.at(this._currentSlide)?.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" }); } /** @internal */ slotChange() { const e = Array.from( this.slotEl.assignedElements().map((l) => l) ); clearTimeout(this.debouncers.get(this.slotEl)); const s = setTimeout( () => this.dispatchEvent(new CustomEvent(\"slots-loaded\", { detail: e })), 100 ); this.debouncers.set(this.slotEl, s); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "CarouselScroller",
-          "declaration": {
-            "name": "o",
-            "module": "dist/components/carousel-scroller/carousel-scroller.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/carousel-scroller/carousel-scroller.styles.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "o",
-          "default": "r` :host { --padding: 40px; --margin: 80px; } .container { width: 600px; height: 400px; margin: 20px; border-radius: 20px; overflow: hidden; position: relative; & > button { position: absolute; width: var(--padding); height: calc(var(--padding) * 2); z-index: 1; background-color: #00000080; border: none; bottom: calc(50% - var(--padding)); font-size: 32px; &:hover { background-color: #6352b880; } &:nth-child(1) { left: 0; border-top-right-radius: 314px; border-bottom-right-radius: 314px; } &:nth-child(2) { right: 0; border-top-left-radius: 314px; border-bottom-left-radius: 314px; } } & > div { display: flex; overflow-x: scroll; position: relative; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--padding); } ::slotted(*) { display: flex; flex-direction: column; justify-content: center; min-height: calc(400px - var(--margin)); min-width: calc(600px - var(--margin)); max-height: calc(400px - var(--margin)); max-width: calc(600px - var(--margin)); background: white; scroll-snap-align: center; padding: calc(var(--margin) / 2); } } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "o",
-            "module": "dist/components/carousel-scroller/carousel-scroller.styles.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/responsive-svg/responsive-svg.js",
+      "path": "dist/components/responsive-svg/responsive-svg.js",
       "declarations": [
         {
           "kind": "variable",
@@ -2197,48 +2239,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/draw-svg/draw-svg.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "n",
-          "default": "class extends a { constructor() { super(...arguments), this.isIntersecting = !1, this.intersectionObserver = new IntersectionObserver(([s]) => { this.isIntersecting = s.isIntersecting, this.dispatchEvent(new CustomEvent(\"intersection\", { detail: s.isIntersecting })); }); } svgClasses() { return super.svgClasses(), { animation: this.isIntersecting }; } connectedCallback() { super.connectedCallback(), this.intersectionObserver.observe(this); } disconnectedCallback() { super.disconnectedCallback(), this.intersectionObserver.disconnect(); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DrawSvg",
-          "declaration": {
-            "name": "n",
-            "module": "dist/components/draw-svg/draw-svg.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/draw-svg/draw-svg.styles.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "e",
-          "default": "t` :host { stroke: white; fill: white; } /* Override responsive-svg path fill */ :host(:not([svgColors])) path { fill: transparent; } path { stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: 1000; } .animation { path { animation: textAnimation 2s ease-in-out 1 forwards; will-change: fill, stroke-width, stroke-dashoffset; } } @keyframes textAnimation { 0% { stroke-dashoffset: 1000; } 60% { fill: transparent; } 100% { fill: inherit; stroke-dashoffset: 0; stroke-width: 1; } } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "e",
-            "module": "dist/components/draw-svg/draw-svg.styles.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/absolute-container/absolute-container.styles.ts",
@@ -3448,6 +3448,124 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/carousel-scroller/carousel-scroller.styles.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "src/components/carousel-scroller/carousel-scroller.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/carousel-scroller/carousel-scroller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A carousel which can have any number of slides, and rotates circularly.",
+          "name": "CarouselScroller",
+          "cssProperties": [
+            {
+              "type": {
+                "text": "<length>"
+              },
+              "description": "The size of the scroller padding.",
+              "name": "--padding"
+            },
+            {
+              "type": {
+                "text": "<length>"
+              },
+              "description": "The size of the scroller margin.",
+              "name": "--margin"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "slotEl",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "protected",
+              "description": "The items that will be used as slides."
+            },
+            {
+              "kind": "field",
+              "name": "slotChildren",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "privacy": "protected",
+              "default": "[]",
+              "description": "The slides being used."
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentSlide",
+              "privacy": "public",
+              "description": "Gets the current slide.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "scrollToPrevSlide",
+              "privacy": "public",
+              "description": "Scrolls to the slide before the current slide."
+            },
+            {
+              "kind": "method",
+              "name": "scrollToNextSlide",
+              "privacy": "public",
+              "description": "Scrolls to the slide after the current slide."
+            }
+          ],
+          "events": [
+            {
+              "name": "slots-loaded",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "description": "Emits when the slots have fully loaded."
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "carousel-scroller",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CarouselScroller",
+          "declaration": {
+            "name": "CarouselScroller",
+            "module": "src/components/carousel-scroller/carousel-scroller.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "carousel-scroller",
+          "declaration": {
+            "name": "CarouselScroller",
+            "module": "src/components/carousel-scroller/carousel-scroller.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/color-palette/color-palette-utils.ts",
@@ -4391,139 +4509,21 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/carousel-scroller/carousel-scroller.styles.ts",
+      "path": "src/components/responsive-svg/responsive-svg.styles.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/components/carousel-scroller/carousel-scroller.styles.ts"
+            "module": "src/components/responsive-svg/responsive-svg.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/carousel-scroller/carousel-scroller.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A carousel which can have any number of slides, and rotates circularly.",
-          "name": "CarouselScroller",
-          "cssProperties": [
-            {
-              "type": {
-                "text": "<length>"
-              },
-              "description": "The size of the scroller padding.",
-              "name": "--padding"
-            },
-            {
-              "type": {
-                "text": "<length>"
-              },
-              "description": "The size of the scroller margin.",
-              "name": "--margin"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "slotEl",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "privacy": "protected",
-              "description": "The items that will be used as slides."
-            },
-            {
-              "kind": "field",
-              "name": "slotChildren",
-              "type": {
-                "text": "HTMLElement[]"
-              },
-              "privacy": "protected",
-              "default": "[]",
-              "description": "The slides being used."
-            },
-            {
-              "kind": "method",
-              "name": "getCurrentSlide",
-              "privacy": "public",
-              "description": "Gets the current slide.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "scrollToPrevSlide",
-              "privacy": "public",
-              "description": "Scrolls to the slide before the current slide."
-            },
-            {
-              "kind": "method",
-              "name": "scrollToNextSlide",
-              "privacy": "public",
-              "description": "Scrolls to the slide after the current slide."
-            }
-          ],
-          "events": [
-            {
-              "name": "slots-loaded",
-              "type": {
-                "text": "HTMLElement[]"
-              },
-              "description": "Emits when the slots have fully loaded."
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "carousel-scroller",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "CarouselScroller",
-          "declaration": {
-            "name": "CarouselScroller",
-            "module": "src/components/carousel-scroller/carousel-scroller.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "carousel-scroller",
-          "declaration": {
-            "name": "CarouselScroller",
-            "module": "src/components/carousel-scroller/carousel-scroller.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/responsive-svg/responsive-svg.styles.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/components/responsive-svg/responsive-svg.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/responsive-svg/responsive-svg.ts",
+      "path": "src/components/responsive-svg/responsive-svg.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -5117,6 +5117,90 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/color-palette/item/color-palette-item-edit.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> `; } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ColorPaletteItemEdit",
+          "declaration": {
+            "name": "s",
+            "module": "dist/components/color-palette/item/color-palette-item-edit.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/color-palette/item/color-palette-item-edit.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; } } } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "e",
+            "module": "dist/components/color-palette/item/color-palette-item-edit.styles.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/color-palette/item/color-palette-item.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} `; } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ColorPaletteItem",
+          "declaration": {
+            "name": "t",
+            "module": "dist/components/color-palette/item/color-palette-item.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/color-palette/item/color-palette-item.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; } } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "o",
+            "module": "dist/components/color-palette/item/color-palette-item.styles.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/components/color-palette/menu/color-palette-menu.js",
@@ -5203,68 +5287,261 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/node_modules/style-observer/src/element-style-observer.js",
+      "path": "src/components/color-palette/component/color-palette-component.styles.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "src/components/color-palette/component/color-palette-component.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/color-palette/component/color-palette-component.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "O",
+          "description": "color-palette components combined.",
+          "name": "ColorPaletteComponent",
           "members": [
             {
               "kind": "field",
-              "name": "propertyNames",
-              "description": "Get the names of all properties currently being observed.",
+              "name": "_menuWrapper",
               "type": {
-                "text": "string[]"
+                "text": "AbsoluteContainer"
               },
-              "readonly": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "target",
-              "description": "The element being observed.",
+              "name": "_editorWrapper",
               "type": {
-                "text": "Element"
+                "text": "AbsoluteContainer"
               },
-              "default": "t"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "callback",
-              "description": "The callback to call when the element's style changes.",
+              "name": "_menuSheet",
               "type": {
-                "text": "StyleObserverCallback"
+                "text": "BottomSheet"
               },
-              "default": "r"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "options",
-              "description": "The observer options.",
+              "name": "_menu",
               "type": {
-                "text": "StyleObserverOptions"
+                "text": "ColorPaletteMenu"
               },
-              "default": "{ properties: [], ...s }"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#t",
-              "privacy": "private",
+              "name": "_editor",
               "type": {
-                "text": "boolean"
+                "text": "ColorPaletteEditor"
               },
-              "default": "!1",
-              "description": "Whether the observer has been initialized."
-            },
-            {
-              "kind": "method",
-              "name": "#s",
-              "privacy": "private",
-              "description": "Called the first time observe() is called to initialize the target."
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "resolveOptions",
+              "kind": "field",
+              "name": "colors",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "public",
+              "default": "[]",
+              "description": "The palette colors.",
+              "attribute": "colors"
+            },
+            {
+              "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.",
+              "attribute": "settings"
+            },
+            {
+              "kind": "field",
+              "name": "editMode",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the palette is in edit mode.",
+              "attribute": "editMode"
+            },
+            {
+              "kind": "field",
+              "name": "responsiveController",
+              "privacy": "protected",
+              "default": "new ResponsiveController(this, '1400px')"
+            },
+            {
+              "kind": "field",
+              "name": "isMobile",
+              "description": "Whether the screen is mobile sized.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handlePaletteChange",
+              "parameters": [
+                {
+                  "name": "{ detail: { colors } }",
+                  "type": {
+                    "text": "PaletteChangeEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleEditMode",
+              "parameters": [
+                {
+                  "name": "{ detail: editMode }",
+                  "type": {
+                    "text": "CustomEvent<boolean>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenEditor"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "colors",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "The palette colors.",
+              "fieldName": "colors"
+            },
+            {
+              "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.",
+              "fieldName": "settings"
+            },
+            {
+              "name": "editMode",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the palette is in edit mode.",
+              "fieldName": "editMode"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "color-palette-component",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ColorPaletteComponent",
+          "declaration": {
+            "name": "ColorPaletteComponent",
+            "module": "src/components/color-palette/component/color-palette-component.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "color-palette-component",
+          "declaration": {
+            "name": "ColorPaletteComponent",
+            "module": "src/components/color-palette/component/color-palette-component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/element-style-observer.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "O",
+          "members": [
+            {
+              "kind": "field",
+              "name": "propertyNames",
+              "description": "Get the names of all properties currently being observed.",
+              "type": {
+                "text": "string[]"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "description": "The element being observed.",
+              "type": {
+                "text": "Element"
+              },
+              "default": "t"
+            },
+            {
+              "kind": "field",
+              "name": "callback",
+              "description": "The callback to call when the element's style changes.",
+              "type": {
+                "text": "StyleObserverCallback"
+              },
+              "default": "r"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "description": "The observer options.",
+              "type": {
+                "text": "StyleObserverOptions"
+              },
+              "default": "{ properties: [], ...s }"
+            },
+            {
+              "kind": "field",
+              "name": "#t",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "!1",
+              "description": "Whether the observer has been initialized."
+            },
+            {
+              "kind": "method",
+              "name": "#s",
+              "privacy": "private",
+              "description": "Called the first time observe() is called to initialize the target."
+            },
+            {
+              "kind": "method",
+              "name": "resolveOptions",
               "parameters": [
                 {
                   "name": "t"
@@ -5809,298 +6086,21 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/item/color-palette-item-edit.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> `; } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ColorPaletteItemEdit",
-          "declaration": {
-            "name": "s",
-            "module": "dist/components/color-palette/item/color-palette-item-edit.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/color-palette/item/color-palette-item-edit.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; } } } `"
-        }
-      ],
+      "path": "src/components/color-palette/editor/color-palette-editor.styles.ts",
+      "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "e",
-            "module": "dist/components/color-palette/item/color-palette-item-edit.styles.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/color-palette/item/color-palette-item.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} `; } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ColorPaletteItem",
-          "declaration": {
-            "name": "t",
-            "module": "dist/components/color-palette/item/color-palette-item.js"
+            "module": "src/components/color-palette/editor/color-palette-editor.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/item/color-palette-item.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; } } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "o",
-            "module": "dist/components/color-palette/item/color-palette-item.styles.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/color-palette/component/color-palette-component.styles.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/components/color-palette/component/color-palette-component.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/color-palette/component/color-palette-component.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "color-palette components combined.",
-          "name": "ColorPaletteComponent",
-          "members": [
-            {
-              "kind": "field",
-              "name": "_menuWrapper",
-              "type": {
-                "text": "AbsoluteContainer"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_editorWrapper",
-              "type": {
-                "text": "AbsoluteContainer"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_menuSheet",
-              "type": {
-                "text": "BottomSheet"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_menu",
-              "type": {
-                "text": "ColorPaletteMenu"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_editor",
-              "type": {
-                "text": "ColorPaletteEditor"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "colors",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "public",
-              "default": "[]",
-              "description": "The palette colors.",
-              "attribute": "colors"
-            },
-            {
-              "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.",
-              "attribute": "settings"
-            },
-            {
-              "kind": "field",
-              "name": "editMode",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the palette is in edit mode.",
-              "attribute": "editMode"
-            },
-            {
-              "kind": "field",
-              "name": "responsiveController",
-              "privacy": "protected",
-              "default": "new ResponsiveController(this, '1400px')"
-            },
-            {
-              "kind": "field",
-              "name": "isMobile",
-              "description": "Whether the screen is mobile sized.",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "handlePaletteChange",
-              "parameters": [
-                {
-                  "name": "{ detail: { colors } }",
-                  "type": {
-                    "text": "PaletteChangeEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleEditMode",
-              "parameters": [
-                {
-                  "name": "{ detail: editMode }",
-                  "type": {
-                    "text": "CustomEvent<boolean>"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleOpenEditor"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "colors",
-              "type": {
-                "text": "string[]"
-              },
-              "default": "[]",
-              "description": "The palette colors.",
-              "fieldName": "colors"
-            },
-            {
-              "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.",
-              "fieldName": "settings"
-            },
-            {
-              "name": "editMode",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the palette is in edit mode.",
-              "fieldName": "editMode"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "color-palette-component",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ColorPaletteComponent",
-          "declaration": {
-            "name": "ColorPaletteComponent",
-            "module": "src/components/color-palette/component/color-palette-component.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "color-palette-component",
-          "declaration": {
-            "name": "ColorPaletteComponent",
-            "module": "src/components/color-palette/component/color-palette-component.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/color-palette/editor/color-palette-editor.styles.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/components/color-palette/editor/color-palette-editor.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/color-palette/editor/color-palette-editor.ts",
+      "path": "src/components/color-palette/editor/color-palette-editor.ts",
       "declarations": [
         {
           "kind": "class",
@@ -7317,231 +7317,372 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/node_modules/style-observer/src/util/adopt-css.js",
+      "path": "src/components/color-palette/editor/options/picker-generate.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "n",
-          "parameters": [
+          "kind": "class",
+          "description": "Generates new colors upon user request for color-palette-editor.",
+          "name": "PickerGenerate",
+          "members": [
             {
-              "name": "l"
+              "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"
             },
             {
-              "name": "e",
-              "default": "globalThis.document"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "n",
-            "module": "dist/node_modules/style-observer/src/util/adopt-css.js"
-          }
-        }
+              "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"
+            },
+            {
+              "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": "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",
+          "declaration": {
+            "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"
           }
         }
       ]
@@ -7632,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"
           }
         }
       ]