@alegendstale/holly-components 2.0.9 → 2.0.10

package/custom-elements.json

@@ -2,6 +2,157 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "dist/controllers/ResponsiveController.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "h",
+          "members": [
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "field",
+              "name": "isMobile",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "!1"
+            },
+            {
+              "kind": "field",
+              "name": "mediaQueryList"
+            },
+            {
+              "kind": "field",
+              "name": "handleMediaQueryChange"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ResponsiveController",
+          "declaration": {
+            "name": "h",
+            "module": "dist/controllers/ResponsiveController.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/controllers/StyleController.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "l",
+          "members": [
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "field",
+              "name": "host",
+              "default": "s"
+            },
+            {
+              "kind": "field",
+              "name": "property",
+              "default": "t"
+            },
+            {
+              "kind": "field",
+              "name": "callback",
+              "default": "e"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\""
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "StyleController",
+          "declaration": {
+            "name": "l",
+            "module": "dist/controllers/StyleController.js"
+          }
+        }
+      ]
+    },
+    {
+      "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/utils/basicUtils.js",
@@ -520,115 +671,193 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/utils/ResponsiveController.js",
+      "path": "src/decorators/condCustomElement.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "h",
-          "members": [
-            {
-              "kind": "method",
-              "name": "hostConnected"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
+          "kind": "function",
+          "name": "condCustomElement",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "isMobile",
+              "name": "tagName",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "!1"
-            },
-            {
-              "kind": "field",
-              "name": "mediaQueryList"
-            },
-            {
-              "kind": "field",
-              "name": "handleMediaQueryChange"
+              "description": "The tag name of the custom element to define."
             }
-          ]
+          ],
+          "description": "Registers a new custom element if it doesn't already exist."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ResponsiveController",
+          "name": "condCustomElement",
           "declaration": {
-            "name": "h",
-            "module": "dist/utils/ResponsiveController.js"
+            "name": "condCustomElement",
+            "module": "src/decorators/condCustomElement.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/decorators/condCustomElement.js",
+      "path": "src/decorators/ExposeParts.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "o",
+          "name": "exposeParts",
           "parameters": [
             {
-              "name": "t"
+              "name": "partMap",
+              "type": {
+                "text": "PartMap[]"
+              }
             }
-          ]
+          ],
+          "description": "Property decorator that exposes parts and updates them when the property changes."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "condCustomElement",
+          "name": "exposeParts",
           "declaration": {
-            "name": "o",
-            "module": "dist/decorators/condCustomElement.js"
+            "name": "exposeParts",
+            "module": "src/decorators/ExposeParts.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/decorators/condCustomElement.ts",
+      "path": "src/controllers/ResponsiveController.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "condCustomElement",
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "ResponsiveController",
+          "members": [
             {
-              "name": "tagName",
+              "kind": "field",
+              "name": "isMobile",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The tag name of the custom element to define."
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "ReactiveControllerHost"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "mediaQueryList",
+              "type": {
+                "text": "MediaQueryList"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleMediaQueryChange",
+              "type": {
+                "text": "(event: MediaQueryListEvent) => void"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             }
-          ],
-          "description": "Registers a new custom element if it doesn't already exist."
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "condCustomElement",
+          "name": "ResponsiveController",
           "declaration": {
-            "name": "condCustomElement",
-            "module": "src/decorators/condCustomElement.ts"
+            "name": "ResponsiveController",
+            "module": "src/controllers/ResponsiveController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/utils/basicUtils.ts",
+      "path": "src/controllers/StyleController.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "getModifiedSettings",
-          "parameters": [
-            {
+          "kind": "class",
+          "description": "",
+          "name": "StyleController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "observer",
+              "type": {
+                "text": "StyleObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "StyleController",
+          "declaration": {
+            "name": "StyleController",
+            "module": "src/controllers/StyleController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/basicUtils.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "getModifiedSettings",
+          "parameters": [
+            {
               "name": "settings",
               "type": {
                 "text": "PaletteSettings"
@@ -1292,79 +1521,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/ResponsiveController.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ResponsiveController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "isMobile",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "host",
-              "type": {
-                "text": "ReactiveControllerHost"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "mediaQueryList",
-              "type": {
-                "text": "MediaQueryList"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleMediaQueryChange",
-              "type": {
-                "text": "(event: MediaQueryListEvent) => void"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ResponsiveController",
-          "declaration": {
-            "name": "ResponsiveController",
-            "module": "src/utils/ResponsiveController.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/components/absolute-container/absolute-container.js",
@@ -1407,48 +1563,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/bottom-sheet/bottom-sheet.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "o",
-          "default": "class extends c { constructor() { super(...arguments), this.open = !1, this.nonmodal = !1, this.dragging = !1, this.scrolling = !1, this.snapPoints = [], this.defaultSnap = NaN, this.emitter = new d(), this.startY = 0, this.startHeight = 0, this.previousTouch = null, this.lastScrollTop = 0; } set height(t) { const e = Math.min(Math.max(t, 0), 100); this.emitter.emit(\"snapped\", this.isSnapped(e), this.shadowRoot?.activeElement), isFinite(t) ? this.style.setProperty(\"--height\", `${Math.round(e)}dvh`) : this.style.setProperty(\"--height\", \"fit-content\"); } get height() { return parseInt(this.style.getPropertyValue(\"--height\")); } connectedCallback() { super.connectedCallback(); const t = this.snapPoints.length === 2 ? 0 : 1; this.defaultSnap = this.snapPoints.length > 0 ? isNaN(this.defaultSnap) ? this.snapPoints[Math.round(this.snapPoints.length / 2) - t] : this.defaultSnap : NaN, this.emitter.on(\"snapped\", this.onSnapped.bind(this)), requestAnimationFrame(() => { this.showSheet(this.open); }); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return requestAnimationFrame(() => { this.setDialog(this.open); }), g` <dialog @click=${(t) => { t.stopPropagation(), this.toggleSheet(); }} > <button id=\"handle\" part=\"__handle\" @pointerdown=${this.pointerDown} @pointermove=${this.pointerMove} @pointerup=${this.pointerUp} @click=${(t) => { t.stopPropagation(); }} > ⸻ </button> <div id='content' part=\"__content\" tabindex='0' @touchstart=${this.touchDown} @touchend=${this.touchUp} @touchmove=${this.touchMove} @scroll=${this.contentScroll} @touchcancel=${(t) => { console.warn(\"User Agent touchcancelled the event.\", t.target); }} @dragstart=${(t) => { t.preventDefault(); }} @click=${(t) => { t.stopPropagation(); }} > <slot></slot> </div> </dialog> `; } /** * Find closest point index to target in array */ closestSnapPointIndex(t, e) { return t.reduce((i, n, s) => Math.abs(n - e) < Math.abs(t[i] - e) ? s : i, 0); } /** * Sets sheet height to the closest snap * @param height percentage */ setSnap(t) { if (this.snapPoints.length === 0) return; const e = this.snapPoints[this.closestSnapPointIndex(this.snapPoints, t)]; e === this.snapPoints[0] && this.showSheet(!1), this.height = e; } /** * @returns Whether sheet is snapped to a snap point */ isSnapped(t) { return this.snapPoints.some((e) => e === Math.round(t)); } /** * Sets the display state of the sheet */ showSheet(t) { this.open = t, this.height = isNaN(this.defaultSnap) ? 1 / 0 : this.defaultSnap, this.setOverscroll(t), this.setDialog(t); } /** * Toggles the display state of the sheet */ toggleSheet() { this.showSheet(!this.open); } /** * Remove overscroll to prevent mobile browsers from refreshing during drag */ setOverscroll(t) { const e = document.querySelector(\"html\"), i = document.querySelector(\"body\"), n = t ? \"none\" : \"unset\"; e && e.style.setProperty(\"overscroll-behavior-block\", n), i && i.style.setProperty(\"overscroll-behavior-block\", n); } setDialog(t) { t && !this.dialog.open ? this.nonmodal ? this.dialog.show() : this.dialog.showModal() : t && this.dialog.open ? this.nonmodal && this.modalDialog ? (this.dialog.close(), this.dialog.show()) : !this.nonmodal && this.nonModalDialog && (this.dialog.close(), this.dialog.showModal()) : this.dialog.close(); } touchDown(t) { t.target instanceof HTMLElement && (this.startY = t.touches[0].pageY, this.startHeight = this.height); } touchMove(t) { if (!(t.target instanceof HTMLElement)) return; const e = t.touches[0]; let i = NaN; this.previousTouch && (i = e.pageY - this.previousTouch.pageY), this.previousTouch = e; let n = this.startY - t.touches[0].pageY; const s = this.startHeight + n / window.innerHeight * 100; !this.scrolling && this.dragging ? this.height = s : this.scrolling && this.dragging || this.scrolling && !this.dragging ? t.target.focus({ preventScroll: !0 }) : !this.scrolling && !this.dragging && (i >= 0 ? this.height = Math.min(s, this.defaultSnap || this.snapPoints[this.snapPoints.length - 1]) : t.target.focus({ preventScroll: !0 })); } touchUp(t) { t.target instanceof HTMLElement && (this.previousTouch = null, this.setSnap(this.height)); } pointerDown(t) { t.target instanceof HTMLElement && (t.target.setPointerCapture(t.pointerId), this.startY = t.pageY, this.startHeight = this.height); } pointerMove(t) { if (!(t.target instanceof HTMLElement && t.target.hasPointerCapture(t.pointerId)) || !t.isPrimary) return; t.preventDefault(); let e = this.startY - t.pageY; const i = this.startHeight + e / window.innerHeight * 100; t.target.id === \"handle\" && (this.height = i); } pointerUp(t) { t.target instanceof HTMLElement && (t.target.releasePointerCapture(t.pointerId), this.setSnap(this.height)); } onSnapped(t, e) { this.dragging = !t; } contentScroll(t) { if (!(t.target instanceof HTMLElement && t.target.id === \"content\")) return; const e = t.target.scrollTop; this.scrolling = e !== this.lastScrollTop, this.lastScrollTop = e, e === 0 && (this.scrolling = !1); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BottomSheet",
-          "declaration": {
-            "name": "o",
-            "module": "dist/components/bottom-sheet/bottom-sheet.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/bottom-sheet/bottom-sheet.styles.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "e",
-          "default": "o` :host { contain: content; overscroll-behavior-block: none; --height: fit-content; } :host([dragging]) dialog { #content { cursor: grabbing; /* Important! Prevents mobile browsers from reclaiming PointerMove event on touch devices */ touch-action: none; /* Prevent weird scrollbar movement on mobile when dragging */ overflow-y: hidden; } } :host(:not([dragging])) dialog { /* Only animate if not dragging */ transition-property: overlay opacity display; transition-duration: 0.25s; transition-behavior: allow-discrete; &::backdrop { transition-property: overlay opacity display; transition-duration: 0.25s; transition-behavior: allow-discrete; } #content { /* Allow scroll */ touch-action: pan-y; } } dialog { display: none; opacity: 0; translate: 0 var(--height); height: var(--height); min-height: 0; max-height: 100%; min-width: 100%; max-width: 100%; flex-direction: column; box-sizing: border-box; padding: 0; border: 0; background-color: light-dark(#d9d9d9, #1c1c1c); /* Important! Removes default browser styling, allowing bottom to work */ inset: unset; bottom: 0; left: 0; overflow-y: hidden; /* Important! Prevents mobile browsers from reclaiming PointerMove event on touch devices */ touch-action: none; /* Prevent weird scrollbar movement on mobile when dragging */ overflow-y: hidden; &[open] { display: flex; opacity: 1; translate: 0 0; &::backdrop { opacity: 0.8; } } &::backdrop { background: black; opacity: 0; } } @starting-style { dialog[open] { opacity: 0; translate: 0 var(--height); &::backdrop { opacity: 0; } } } #handle { display: block; position: sticky; top: 0; background: transparent; border: 0; cursor: grabbing; min-height: 35px; user-select: none; touch-action: none; } div { /* display: contents; */ overflow-y: auto; scrollbar-width: none; box-sizing: border-box; min-height: 100%; min-width: 100%; } ::slotted(*) { /* Prevent slotted items from taking pointer events */ /* pointer-events: none; */ } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "e",
-            "module": "dist/components/bottom-sheet/bottom-sheet.styles.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/components/canvas/canvas-base.js",
@@ -1533,48 +1647,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/carousel-scroller/carousel-scroller.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "i",
-          "default": "class extends c { constructor() { super(), this.slotChildren = [], this.emitter = new m(), this._currentSlide = 0, this.debouncers = /* @__PURE__ */ new WeakMap(), this.emitter.on(\"slotsLoaded\", (e) => { this.slotChildren = e; }); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return d` <div class=\"container\"> <button @click=${this.scrollToPrevSlide}><</button> <button @click=${this.scrollToNextSlide}>></button> <div> <slot @slotchange=${this.slotChange}></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((r) => r) ); clearTimeout(this.debouncers.get(this.slotEl)); const s = setTimeout( () => this.emitter.emit(\"slotsLoaded\", e), 100 ); this.debouncers.set(this.slotEl, s); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "CarouselScroller",
-          "declaration": {
-            "name": "i",
-            "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",
@@ -1785,81 +1857,33 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/responsive-svg/responsive-svg.js",
+      "path": "dist/components/bottom-sheet/bottom-sheet.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "l",
-          "type": {
-            "text": "array"
-          },
-          "default": "[ \"none\", \"xMinYMin\", \"xMidYMin\", \"xMaxYMin\", \"xMinYMid\", \"xMidYMid\", \"xMaxYMid\", \"xMinYMax\", \"xMidYMax\", \"xMaxYMax\" ]"
-        },
-        {
-          "kind": "variable",
-          "name": "A",
-          "type": {
-            "text": "array"
-          },
-          "default": "[\"meet\", \"slice\"]"
-        },
-        {
-          "kind": "variable",
-          "name": "M",
-          "type": {
-            "text": "array"
-          },
-          "default": "[ ...l, ...l.flatMap((t) => A.map((e) => `${t} ${e}`)) ]"
-        },
-        {
-          "kind": "variable",
-          "name": "p",
-          "default": "class extends g { constructor() { super(...arguments), this.autofit = !1, this.svgColors = !1, this.viewBox = { x: 0, y: 0, width: 0, height: 0 }; } set svg(t) { const e = t instanceof SVGElement || x(t) ? t : u(t); e instanceof Element && !(e instanceof SVGElement) || (this._svg = e); } get svg() { return this._svg ?? \"\"; } set preserveAspectRatio(t) { this._preserveAspectRatio = t; } get preserveAspectRatio() { if (this._preserveAspectRatio == null && this.svg instanceof SVGElement) { const t = this.svg.getAttribute(\"preserveAspectRatio\") || \"\"; if (R(t)) return t; } return this._preserveAspectRatio || \"xMidYMid meet\"; } // For classes inheriting from responsive-svg (e.g. draw-svg) svgClasses() { return {}; } willUpdate(t) { if (super.willUpdate(t), this.svg instanceof SVGElement) { const e = this.getViewBoxSize(this.svg), i = this.svg.getAttribute(\"width\"), o = this.svg.getAttribute(\"height\"); this.viewBox = e ?? { x: 0, y: 0, width: Number(i) || 0, height: Number(o) || 0 }; } else { const e = this.style.getPropertyValue(\"--svg-width\"), i = this.style.getPropertyValue(\"--svg-height\"); this.viewBox = { x: 0, y: 0, width: parseFloat(e) || 0, height: parseFloat(i) || 0 }; } } render() { const t = this.viewBox, e = this.preserveAspectRatio, i = this.svgClasses(); if (typeof this.svg == \"string\") return c`<p style=\"font-size: initial;\">⚠️ SVG Error</p>`; if (this.svg instanceof SVGElement) { const s = this.svg.cloneNode(!0); return this.applyPartToPaths(s, \"__path\"), o(Array.from(s.children), t); } else return o(this.svg, t); function o(s, r) { if (s) return c` <svg part=\"__svg\" class=${m(i)} style=${f({ \"--svg-width-fallback\": `${r.width}em`, \"--svg-height-fallback\": `${r.height}em` })} viewBox=\"${r.x} ${r.y} ${r.width} ${r.height}\" preserveAspectRatio=${e} xmlns=\"http://www.w3.org/2000/svg\" > ${s} </svg> `; } } /** Applies a part name to all paths in the given element. */ applyPartToPaths(t, e) { if (t instanceof Element) { t.tagName.toLowerCase() === \"path\" && t.setAttribute(\"part\", e); for (const i of Array.from(t.children)) this.applyPartToPaths(i, e); } } /** * Gets the viewBox dimensions from an SVG element. * @param svg The SVG to get the attribute from. * @returns The SVG viewBox x, y, width, and height */ getViewBoxSize(t) { const e = t.getAttribute(\"viewBox\")?.split(\" \"); return e ? { x: +e[0], y: +e[1], width: +e[2], height: +e[3] } : null; } }"
+          "name": "o",
+          "default": "class extends c { constructor() { super(...arguments), this.open = !1, this.nonmodal = !1, this.dragging = !1, this.scrolling = !1, this.snapPoints = [], this.defaultSnap = NaN, this.emitter = new d(), this.startY = 0, this.startHeight = 0, this.previousTouch = null, this.lastScrollTop = 0; } set height(t) { const e = Math.min(Math.max(t, 0), 100); this.emitter.emit(\"snapped\", this.isSnapped(e), this.shadowRoot?.activeElement), isFinite(t) ? this.style.setProperty(\"--height\", `${Math.round(e)}dvh`) : this.style.setProperty(\"--height\", \"fit-content\"); } get height() { return parseInt(this.style.getPropertyValue(\"--height\")); } connectedCallback() { super.connectedCallback(); const t = this.snapPoints.length === 2 ? 0 : 1; this.defaultSnap = this.snapPoints.length > 0 ? isNaN(this.defaultSnap) ? this.snapPoints[Math.round(this.snapPoints.length / 2) - t] : this.defaultSnap : NaN, this.emitter.on(\"snapped\", this.onSnapped.bind(this)), requestAnimationFrame(() => { this.showSheet(this.open); }); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return requestAnimationFrame(() => { this.setDialog(this.open); }), g` <dialog @click=${(t) => { t.stopPropagation(), this.toggleSheet(); }} > <button id=\"handle\" part=\"__handle\" @pointerdown=${this.pointerDown} @pointermove=${this.pointerMove} @pointerup=${this.pointerUp} @click=${(t) => { t.stopPropagation(); }} > ⸻ </button> <div id='content' part=\"__content\" tabindex='0' @touchstart=${this.touchDown} @touchend=${this.touchUp} @touchmove=${this.touchMove} @scroll=${this.contentScroll} @touchcancel=${(t) => { console.warn(\"User Agent touchcancelled the event.\", t.target); }} @dragstart=${(t) => { t.preventDefault(); }} @click=${(t) => { t.stopPropagation(); }} > <slot></slot> </div> </dialog> `; } /** * Find closest point index to target in array */ closestSnapPointIndex(t, e) { return t.reduce((i, n, s) => Math.abs(n - e) < Math.abs(t[i] - e) ? s : i, 0); } /** * Sets sheet height to the closest snap * @param height percentage */ setSnap(t) { if (this.snapPoints.length === 0) return; const e = this.snapPoints[this.closestSnapPointIndex(this.snapPoints, t)]; e === this.snapPoints[0] && this.showSheet(!1), this.height = e; } /** * @returns Whether sheet is snapped to a snap point */ isSnapped(t) { return this.snapPoints.some((e) => e === Math.round(t)); } /** * Sets the display state of the sheet */ showSheet(t) { this.open = t, this.height = isNaN(this.defaultSnap) ? 1 / 0 : this.defaultSnap, this.setOverscroll(t), this.setDialog(t); } /** * Toggles the display state of the sheet */ toggleSheet() { this.showSheet(!this.open); } /** * Remove overscroll to prevent mobile browsers from refreshing during drag */ setOverscroll(t) { const e = document.querySelector(\"html\"), i = document.querySelector(\"body\"), n = t ? \"none\" : \"unset\"; e && e.style.setProperty(\"overscroll-behavior-block\", n), i && i.style.setProperty(\"overscroll-behavior-block\", n); } setDialog(t) { t && !this.dialog.open ? this.nonmodal ? this.dialog.show() : this.dialog.showModal() : t && this.dialog.open ? this.nonmodal && this.modalDialog ? (this.dialog.close(), this.dialog.show()) : !this.nonmodal && this.nonModalDialog && (this.dialog.close(), this.dialog.showModal()) : this.dialog.close(); } touchDown(t) { t.target instanceof HTMLElement && (this.startY = t.touches[0].pageY, this.startHeight = this.height); } touchMove(t) { if (!(t.target instanceof HTMLElement)) return; const e = t.touches[0]; let i = NaN; this.previousTouch && (i = e.pageY - this.previousTouch.pageY), this.previousTouch = e; let n = this.startY - t.touches[0].pageY; const s = this.startHeight + n / window.innerHeight * 100; !this.scrolling && this.dragging ? this.height = s : this.scrolling && this.dragging || this.scrolling && !this.dragging ? t.target.focus({ preventScroll: !0 }) : !this.scrolling && !this.dragging && (i >= 0 ? this.height = Math.min(s, this.defaultSnap || this.snapPoints[this.snapPoints.length - 1]) : t.target.focus({ preventScroll: !0 })); } touchUp(t) { t.target instanceof HTMLElement && (this.previousTouch = null, this.setSnap(this.height)); } pointerDown(t) { t.target instanceof HTMLElement && (t.target.setPointerCapture(t.pointerId), this.startY = t.pageY, this.startHeight = this.height); } pointerMove(t) { if (!(t.target instanceof HTMLElement && t.target.hasPointerCapture(t.pointerId)) || !t.isPrimary) return; t.preventDefault(); let e = this.startY - t.pageY; const i = this.startHeight + e / window.innerHeight * 100; t.target.id === \"handle\" && (this.height = i); } pointerUp(t) { t.target instanceof HTMLElement && (t.target.releasePointerCapture(t.pointerId), this.setSnap(this.height)); } onSnapped(t, e) { this.dragging = !t; } contentScroll(t) { if (!(t.target instanceof HTMLElement && t.target.id === \"content\")) return; const e = t.target.scrollTop; this.scrolling = e !== this.lastScrollTop, this.lastScrollTop = e, e === 0 && (this.scrolling = !1); } }"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ResponsiveSvg",
-          "declaration": {
-            "name": "p",
-            "module": "dist/components/responsive-svg/responsive-svg.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "preserveAspectRatioAlignOptions",
-          "declaration": {
-            "name": "l",
-            "module": "dist/components/responsive-svg/responsive-svg.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "preserveAspectRatioOptions",
-          "declaration": {
-            "name": "M",
-            "module": "dist/components/responsive-svg/responsive-svg.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "preserveAspectRatioSpacingOptions",
+          "name": "BottomSheet",
           "declaration": {
-            "name": "A",
-            "module": "dist/components/responsive-svg/responsive-svg.js"
+            "name": "o",
+            "module": "dist/components/bottom-sheet/bottom-sheet.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/responsive-svg/responsive-svg.styles.js",
+      "path": "dist/components/bottom-sheet/bottom-sheet.styles.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "s",
-          "default": "t` :host { display: block; --scale: 1; } :host([autofit]), :host([autofit]) svg { width: 100%; height: 100%; } /* Size scaling based on font-size */ :host(:not([autofit])) { /* Removes extra space from under SVG */ display: flex; } :host(:not([autofit])) svg { /* Allow SVG to be manipulated by font size */ display: inline-block; /* Change SVG size using font-size */ font-size: inherit; /* Remove extra vertical space in inline element reserved for character descenders */ vertical-align: top; width: calc(var(--svg-width, var(--svg-width-fallback)) / 100 * var(--scale)); height: calc(var(--svg-height, var(--svg-height-fallback)) / 100 * var(--scale)); } :host(:not([svgColors])) svg { /* Inherit fill to bypass default */ fill: inherit; } :host(:not([svgColors])) path { fill: inherit; stroke: inherit; } svg { max-width: 100%; max-height: 100%; } `"
+          "name": "e",
+          "default": "o` :host { contain: content; overscroll-behavior-block: none; --height: fit-content; } :host([dragging]) dialog { #content { cursor: grabbing; /* Important! Prevents mobile browsers from reclaiming PointerMove event on touch devices */ touch-action: none; /* Prevent weird scrollbar movement on mobile when dragging */ overflow-y: hidden; } } :host(:not([dragging])) dialog { /* Only animate if not dragging */ transition-property: overlay opacity display; transition-duration: 0.25s; transition-behavior: allow-discrete; &::backdrop { transition-property: overlay opacity display; transition-duration: 0.25s; transition-behavior: allow-discrete; } #content { /* Allow scroll */ touch-action: pan-y; } } dialog { display: none; opacity: 0; translate: 0 var(--height); height: var(--height); min-height: 0; max-height: 100%; min-width: 100%; max-width: 100%; flex-direction: column; box-sizing: border-box; padding: 0; border: 0; background-color: light-dark(#d9d9d9, #1c1c1c); /* Important! Removes default browser styling, allowing bottom to work */ inset: unset; bottom: 0; left: 0; overflow-y: hidden; /* Important! Prevents mobile browsers from reclaiming PointerMove event on touch devices */ touch-action: none; /* Prevent weird scrollbar movement on mobile when dragging */ overflow-y: hidden; &[open] { display: flex; opacity: 1; translate: 0 0; &::backdrop { opacity: 0.8; } } &::backdrop { background: black; opacity: 0; } } @starting-style { dialog[open] { opacity: 0; translate: 0 var(--height); &::backdrop { opacity: 0; } } } #handle { display: block; position: sticky; top: 0; background: transparent; border: 0; cursor: grabbing; min-height: 35px; user-select: none; touch-action: none; } div { /* display: contents; */ overflow-y: auto; scrollbar-width: none; box-sizing: border-box; min-height: 100%; min-width: 100%; } ::slotted(*) { /* Prevent slotted items from taking pointer events */ /* pointer-events: none; */ } `"
         }
       ],
       "exports": [
@@ -1867,8 +1891,50 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "s",
-            "module": "dist/components/responsive-svg/responsive-svg.styles.js"
+            "name": "e",
+            "module": "dist/components/bottom-sheet/bottom-sheet.styles.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/carousel-scroller/carousel-scroller.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "i",
+          "default": "class extends c { constructor() { super(), this.slotChildren = [], this.emitter = new m(), this._currentSlide = 0, this.debouncers = /* @__PURE__ */ new WeakMap(), this.emitter.on(\"slotsLoaded\", (e) => { this.slotChildren = e; }); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return d` <div class=\"container\"> <button @click=${this.scrollToPrevSlide}><</button> <button @click=${this.scrollToNextSlide}>></button> <div> <slot @slotchange=${this.slotChange}></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((r) => r) ); clearTimeout(this.debouncers.get(this.slotEl)); const s = setTimeout( () => this.emitter.emit(\"slotsLoaded\", e), 100 ); this.debouncers.set(this.slotEl, s); } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CarouselScroller",
+          "declaration": {
+            "name": "i",
+            "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"
           }
         }
       ]
@@ -1915,6 +1981,96 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/responsive-svg/responsive-svg.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "v",
+          "type": {
+            "text": "array"
+          },
+          "default": "[ \"none\", \"xMinYMin\", \"xMidYMin\", \"xMaxYMin\", \"xMinYMid\", \"xMidYMid\", \"xMaxYMid\", \"xMinYMax\", \"xMidYMax\", \"xMaxYMax\" ]"
+        },
+        {
+          "kind": "variable",
+          "name": "S",
+          "type": {
+            "text": "array"
+          },
+          "default": "[\"meet\", \"slice\"]"
+        },
+        {
+          "kind": "variable",
+          "name": "R",
+          "type": {
+            "text": "array"
+          },
+          "default": "[ ...v, ...v.flatMap((t) => S.map((e) => `${t} ${e}`)) ]"
+        },
+        {
+          "kind": "variable",
+          "name": "n",
+          "default": "class extends g { constructor() { super(...arguments), this.autofit = !1, this.svgColors = !1, this.viewBox = { x: 0, y: 0, width: 0, height: 0 }, this._widthController = new c(this, \"--svg-width\", (t) => { this.viewBox = { ...this.viewBox, width: parseFloat(t) || 0 }; }), this._heightController = new c(this, \"--svg-height\", (t) => { this.viewBox = { ...this.viewBox, height: parseFloat(t) || 0 }; }); } set svg(t) { const e = t instanceof SVGElement || w(t) ? t : x(t); e instanceof Element && !(e instanceof SVGElement) || (this._svg = e); } get svg() { return this._svg ?? \"\"; } set preserveAspectRatio(t) { this._preserveAspectRatio = t; } get preserveAspectRatio() { if (this._preserveAspectRatio == null && this.svg instanceof SVGElement) { const t = this.svg.getAttribute(\"preserveAspectRatio\") || \"\"; if (B(t)) return t; } return this._preserveAspectRatio || \"xMidYMid meet\"; } // For classes inheriting from responsive-svg (e.g. draw-svg) svgClasses() { return {}; } connectedCallback() { if (super.connectedCallback(), this.svg instanceof SVGElement) { const t = this.getViewBoxSize(this.svg), e = parseFloat(this.svg.getAttribute(\"width\") || \"0\"), r = parseFloat(this.svg.getAttribute(\"height\") || \"0\"); this.viewBox = { x: t?.x ?? 0, y: t?.y ?? 0, width: this.viewBox.width || (t?.width ?? e), height: this.viewBox.height || (t?.height ?? r) }; } } render() { const t = this.viewBox, e = this.preserveAspectRatio, r = this.svgClasses(); if (t.height === 0 || t.width === 0) return l`<p style=\"font-size: initial;\">⚠️ SVG ViewBox</p>`; if (typeof this.svg == \"string\") return l`<p style=\"font-size: initial;\">⚠️ SVG Error</p>`; if (this.svg instanceof SVGElement) { const s = this.svg.cloneNode(!0); return o(Array.from(s.children), t); } else return o(this.svg, t); function o(s, i) { if (s) return l` <svg class=${u(r)} style=${m({ \"--svg-width-fallback\": `${i.width}em`, \"--svg-height-fallback\": `${i.height}em` })} viewBox=\"${i.x} ${i.y} ${i.width} ${i.height}\" preserveAspectRatio=${e} xmlns=\"http://www.w3.org/2000/svg\" > ${s} </svg> `; } } /** * Gets the viewBox dimensions from an SVG element. * @param svg The SVG to get the attribute from. * @returns The SVG viewBox x, y, width, and height */ getViewBoxSize(t) { const e = t.getAttribute(\"viewBox\")?.split(\" \"); return e ? { x: +e[0], y: +e[1], width: +e[2], height: +e[3] } : null; } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ResponsiveSvg",
+          "declaration": {
+            "name": "n",
+            "module": "dist/components/responsive-svg/responsive-svg.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "preserveAspectRatioAlignOptions",
+          "declaration": {
+            "name": "v",
+            "module": "dist/components/responsive-svg/responsive-svg.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "preserveAspectRatioOptions",
+          "declaration": {
+            "name": "R",
+            "module": "dist/components/responsive-svg/responsive-svg.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "preserveAspectRatioSpacingOptions",
+          "declaration": {
+            "name": "S",
+            "module": "dist/components/responsive-svg/responsive-svg.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/responsive-svg/responsive-svg.styles.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "s",
+          "default": "t` :host { display: block; --scale: 1; } :host([autofit]), :host([autofit]) svg { width: 100%; height: 100%; } /* Size scaling based on font-size */ :host(:not([autofit])) { /* Removes extra space from under SVG */ display: flex; } :host(:not([autofit])) svg { /* Allow SVG to be manipulated by font size */ display: inline-block; /* Change SVG size using font-size */ font-size: inherit; /* Remove extra vertical space in inline element reserved for character descenders */ vertical-align: top; width: calc(var(--svg-width, var(--svg-width-fallback)) / 100 * var(--scale)); height: calc(var(--svg-height, var(--svg-height-fallback)) / 100 * var(--scale)); } :host(:not([svgColors])) svg { /* Inherit fill to bypass default */ fill: inherit; } :host(:not([svgColors])) path { fill: inherit; stroke: inherit; } svg { max-width: 100%; max-height: 100%; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "s",
+            "module": "dist/components/responsive-svg/responsive-svg.styles.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/components/tool-tip/tool-tip.js",
@@ -3168,99 +3324,218 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/color-palette-utils.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "defaultSettings",
-          "type": {
-            "text": "ColorPaletteSettings"
-          },
-          "default": "{ noticeDuration: 10000, errorPulse: true, aliasMode: AliasMode.Both, corners: true, stabilizeWhileEditing: true, reloadDelay: 5, copyFormat: CopyFormat.Raw, height: 150, width: 700, direction: Direction.Column, gradient: false, preventHover: false, hideText: false, override: false }"
-        },
+      "path": "src/components/carousel-scroller/carousel-scroller.styles.ts",
+      "declarations": [],
+      "exports": [
         {
-          "kind": "variable",
-          "name": "urlRegex",
-          "default": "/(?:https:\\/\\/www\\.|http:\\/\\/www\\.|https:\\/\\/|http:\\/\\/)?[a-zA-Z0-9]{2,}(?:\\.[a-zA-Z0-9]{2,})(?:\\.[a-zA-Z0-9]{2,})?\\/(?:palette\\/)?([a-zA-Z0-9-]{2,})/"
-        },
+          "kind": "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": "",
-          "name": "PaletteError",
-          "members": [
+          "description": "A carousel which can have any number of slides, and rotates circularly.",
+          "name": "CarouselScroller",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "status",
               "type": {
-                "text": "Status"
+                "text": "<length>"
               },
-              "default": "status"
-            }
-          ],
-          "superclass": {
-            "name": "Error",
-            "module": "src/components/color-palette/color-palette-utils.ts"
-          }
-        },
-        {
-          "kind": "function",
-          "name": "parseSettings",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
+              "description": "The size of the scroller padding.",
+              "name": "--padding"
+            },
             {
-              "name": "input",
               "type": {
-                "text": "string"
+                "text": "<length>"
               },
-              "description": "settings from codeblock"
+              "description": "The size of the scroller margin.",
+              "name": "--margin"
             }
           ],
-          "description": "Parses input & extracts settings"
-        },
-        {
-          "kind": "function",
-          "name": "parseColors",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
+          "members": [
             {
-              "name": "input",
+              "kind": "field",
+              "name": "slotEl",
               "type": {
-                "text": "string[]"
+                "text": "HTMLSlotElement"
               },
-              "description": "colors from codeblock"
+              "privacy": "protected",
+              "description": "The items that will be used as slides."
             },
             {
-              "name": "override",
+              "kind": "field",
+              "name": "slotChildren",
               "type": {
-                "text": "boolean"
-              }
-            }
-          ],
-          "description": "Parses input & extracts colors based on color space or URL"
-        },
-        {
-          "kind": "function",
-          "name": "calcColorsAndSettings",
-          "parameters": [
+                "text": "HTMLElement[]"
+              },
+              "privacy": "protected",
+              "default": "[]",
+              "description": "The slides being used."
+            },
             {
-              "name": "input",
+              "kind": "field",
+              "name": "emitter",
               "type": {
-                "text": "string"
-              }
+                "text": "EventEmitter<EventMap>"
+              },
+              "privacy": "public",
+              "default": "new EventEmitter<EventMap>()",
+              "description": "Public way to subscribe to events."
             },
             {
-              "name": "pluginSettings",
-              "type": {
-                "text": "ColorPaletteSettings"
-              }
+              "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."
+            }
+          ],
+          "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",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "defaultSettings",
+          "type": {
+            "text": "ColorPaletteSettings"
+          },
+          "default": "{ noticeDuration: 10000, errorPulse: true, aliasMode: AliasMode.Both, corners: true, stabilizeWhileEditing: true, reloadDelay: 5, copyFormat: CopyFormat.Raw, height: 150, width: 700, direction: Direction.Column, gradient: false, preventHover: false, hideText: false, override: false }"
+        },
+        {
+          "kind": "variable",
+          "name": "urlRegex",
+          "default": "/(?:https:\\/\\/www\\.|http:\\/\\/www\\.|https:\\/\\/|http:\\/\\/)?[a-zA-Z0-9]{2,}(?:\\.[a-zA-Z0-9]{2,})(?:\\.[a-zA-Z0-9]{2,})?\\/(?:palette\\/)?([a-zA-Z0-9-]{2,})/"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PaletteError",
+          "members": [
+            {
+              "kind": "field",
+              "name": "status",
+              "type": {
+                "text": "Status"
+              },
+              "default": "status"
+            }
+          ],
+          "superclass": {
+            "name": "Error",
+            "module": "src/components/color-palette/color-palette-utils.ts"
+          }
+        },
+        {
+          "kind": "function",
+          "name": "parseSettings",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "input",
+              "type": {
+                "text": "string"
+              },
+              "description": "settings from codeblock"
+            }
+          ],
+          "description": "Parses input & extracts settings"
+        },
+        {
+          "kind": "function",
+          "name": "parseColors",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "input",
+              "type": {
+                "text": "string[]"
+              },
+              "description": "colors from codeblock"
+            },
+            {
+              "name": "override",
+              "type": {
+                "text": "boolean"
+              }
+            }
+          ],
+          "description": "Parses input & extracts colors based on color space or URL"
+        },
+        {
+          "kind": "function",
+          "name": "calcColorsAndSettings",
+          "parameters": [
+            {
+              "name": "input",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "pluginSettings",
+              "type": {
+                "text": "ColorPaletteSettings"
+              }
             }
           ],
           "description": "Calculates colors and settings based on codeblock contents"
@@ -3758,218 +4033,128 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/carousel-scroller/carousel-scroller.styles.ts",
+      "path": "src/components/draw-svg/draw-svg.styles.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/components/carousel-scroller/carousel-scroller.styles.ts"
+            "module": "src/components/draw-svg/draw-svg.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/carousel-scroller/carousel-scroller.ts",
+      "path": "src/components/draw-svg/draw-svg.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A carousel which can have any number of slides, and rotates circularly.",
-          "name": "CarouselScroller",
-          "cssProperties": [
+          "description": "Animates the provided SVG paths as if they were being drawn.",
+          "name": "DrawSvg",
+          "members": [
             {
+              "kind": "field",
+              "name": "isIntersecting",
               "type": {
-                "text": "<length>"
+                "text": "boolean"
               },
-              "description": "The size of the scroller padding.",
-              "name": "--padding"
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the SVG is intersecting with the client viewport. Useful for determining when to animate."
+            },
+            {
+              "kind": "method",
+              "name": "svgClasses",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "{}"
+                }
+              },
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
+              "kind": "field",
+              "name": "emitter",
               "type": {
-                "text": "<length>"
+                "text": "EventEmitter<EventMap>"
               },
-              "description": "The size of the scroller margin.",
-              "name": "--margin"
-            }
-          ],
-          "members": [
+              "privacy": "public",
+              "default": "new EventEmitter()",
+              "description": "Public way to subscribe to events."
+            },
             {
               "kind": "field",
-              "name": "slotEl",
+              "name": "autofit",
               "type": {
-                "text": "HTMLSlotElement"
+                "text": "boolean"
               },
-              "privacy": "protected",
-              "description": "The items that will be used as slides."
+              "default": "false",
+              "description": "The SVG will attempt to fill its container.",
+              "attribute": "autofit",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "slotChildren",
+              "name": "svgColors",
               "type": {
-                "text": "HTMLElement[]"
+                "text": "boolean"
               },
-              "privacy": "protected",
-              "default": "[]",
-              "description": "The slides being used."
+              "default": "false",
+              "description": "Use the colors from the SVG input.",
+              "attribute": "svgColors",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "emitter",
+              "name": "svg",
+              "description": "The SVG to responsively size.\r\nMust use a property expression (.) to set",
               "type": {
-                "text": "EventEmitter<EventMap>"
+                "text": "SVGElement | TemplateResult<2> | string"
               },
-              "privacy": "public",
-              "default": "new EventEmitter<EventMap>()",
-              "description": "Public way to subscribe to events."
+              "attribute": "svg",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "getCurrentSlide",
-              "privacy": "public",
-              "description": "Gets the current slide.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "preserveAspectRatio",
+              "description": "Set whether SVG preserves its aspect ratio alignment or spacing.",
+              "type": {
+                "text": "PreserveAspectRatio"
+              },
+              "default": "xMidYMid meet",
+              "attribute": "preserveAspectRatio",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
               }
             },
-            {
-              "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."
-            }
-          ],
-          "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/draw-svg/draw-svg.styles.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/components/draw-svg/draw-svg.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/draw-svg/draw-svg.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Animates the provided SVG paths as if they were being drawn.",
-          "name": "DrawSvg",
-          "members": [
             {
               "kind": "field",
-              "name": "isIntersecting",
+              "name": "viewBox",
               "type": {
-                "text": "boolean"
+                "text": "ViewBox"
               },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the SVG is intersecting with the client viewport. Useful for determining when to animate."
-            },
-            {
-              "kind": "method",
-              "name": "svgClasses",
               "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "{}"
-                }
-              },
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "emitter",
-              "type": {
-                "text": "EventEmitter<EventMap>"
-              },
-              "privacy": "public",
-              "default": "new EventEmitter()",
-              "description": "Public way to subscribe to events."
-            },
-            {
-              "kind": "field",
-              "name": "autofit",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The SVG will attempt to fill its container.",
-              "attribute": "autofit",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "svgColors",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Use the colors from the SVG input.",
-              "attribute": "svgColors",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "svg",
-              "description": "The SVG to responsively size.\r\nMust use a property expression (.) to set",
-              "type": {
-                "text": "SVGElement | TemplateResult<2> | string"
-              },
-              "attribute": "svg",
+              "default": "{ x: 0, y: 0, width: 0, height: 0 }",
+              "description": "The viewBox dimensions the SVG will use.",
               "inheritedFrom": {
                 "name": "ResponsiveSvg",
                 "module": "src/components/responsive-svg/responsive-svg.ts"
@@ -3977,14 +4162,9 @@
             },
             {
               "kind": "field",
-              "name": "preserveAspectRatio",
-              "description": "Set whether SVG preserves its aspect ratio alignment or spacing.",
-              "type": {
-                "text": "PreserveAspectRatio"
-              },
-              "default": "xMidYMid meet",
-              "attribute": "preserveAspectRatio",
-              "reflects": true,
+              "name": "_widthController",
+              "privacy": "private",
+              "default": "new StyleController(this, '--svg-width', (val) => { this.viewBox = { ...this.viewBox, width: parseFloat(val) || 0 } })",
               "inheritedFrom": {
                 "name": "ResponsiveSvg",
                 "module": "src/components/responsive-svg/responsive-svg.ts"
@@ -3992,37 +4172,9 @@
             },
             {
               "kind": "field",
-              "name": "viewBox",
-              "type": {
-                "text": "ViewBox"
-              },
-              "privacy": "protected",
-              "default": "{ x: 0, y: 0, width: 0, height: 0 }",
-              "description": "The viewBox dimensions the SVG will use.",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "applyPartToPaths",
+              "name": "_heightController",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "Element"
-                  }
-                },
-                {
-                  "name": "partValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Applies a part name to all paths in the given element.",
+              "default": "new StyleController(this, '--svg-height', (val) => { this.viewBox = { ...this.viewBox, height: parseFloat(val) || 0 } })",
               "inheritedFrom": {
                 "name": "ResponsiveSvg",
                 "module": "src/components/responsive-svg/responsive-svg.ts"
@@ -4369,24 +4521,16 @@
               "privacy": "protected"
             },
             {
-              "kind": "method",
-              "name": "applyPartToPaths",
+              "kind": "field",
+              "name": "_widthController",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "Element"
-                  }
-                },
-                {
-                  "name": "partValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Applies a part name to all paths in the given element."
+              "default": "new StyleController(this, '--svg-width', (val) => { this.viewBox = { ...this.viewBox, width: parseFloat(val) || 0 } })"
+            },
+            {
+              "kind": "field",
+              "name": "_heightController",
+              "privacy": "private",
+              "default": "new StyleController(this, '--svg-height', (val) => { this.viewBox = { ...this.viewBox, height: parseFloat(val) || 0 } })"
             },
             {
               "kind": "method",
@@ -4921,225 +5065,1136 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/menu/color-palette-menu.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "s",
-          "default": "class extends y { constructor() { super(...arguments), this.colors = [], this.editMode = !1, this.copyFormat = v.copyFormat, this.reorder = !1, this.emitter = new C(); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return c` ${this.reorder ? this.reorderItems() : this.menuItems()} `; } /** Renders the menu items. */ menuItems() { const i = { colors: this.colors, settings: this.settings }; return c` <menu> <li> <button @click=${(t) => { t.stopPropagation(), this.reorder = !this.reorder; }} > ${r(E)} <span>Reorder</span> </button> </li> <li> <button @click=${() => { this.emitter.emit(\"openEditor\"); }} > ${r(P)} <span>Edit Mode</span> </button> </li> ${// Only show toggle edit mode option when palette is not a gradient this.settings?.gradient ? d : c` <li> <button @click=${() => { this.emitter.emit(\"editMode\", !this.editMode); }} > ${r(k)} <span>Quick Edit</span> ${this.editMode ? r(M) : d} </button> </li> `} <hr> <li> <button @click=${() => { const t = this.colors.map((o) => { const e = u(o).rgb(); return `rgb(${e[0]}, ${e[1]}, ${e[2]})`; }); this.emitter.emit(\"change\", t); }} > ${r(h)} <span>Convert to RGB</span> </button> </li> <li> <button @click=${() => { const t = this.colors.map((o) => { const e = u(o).hsl(); return `hsl(${e[0]} ${e[1]}% ${e[2]}%)`; }); this.emitter.emit(\"change\", t); }} > ${r(h)} <span>Convert to HSL</span> </button> </li> <li> <button @click=${() => { const t = this.colors.map((o) => u(o).hex(2)); this.emitter.emit(\"change\", t); }} > ${r(h)} <span>Convert to HEX</span> </button> </li> <hr> <li> <button @click=${async () => { await b(JSON.stringify(i), this.copyFormat), this.emitter.emit(\"change\", []); }} > ${r(O)} <span>Cut</span> </button> </li> <li> <button @click=${async () => { await b(JSON.stringify(i), this.copyFormat); }} > ${r(w)} <span>Copy</span> </button> </li> </menu> `; } /** Renders the reorder items. */ reorderItems() { const i = (t) => { t instanceof _ && (t.emitter.clear(), t.emitter.on(\"submit\", (o) => { this.emitter.emit(\"change\", o), this.reorder = !1; })); }; return c` <color-palette-reorder .colors=${this.colors} ${S(i)} > </color-palette-reorder> `; } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ColorPaletteMenu",
-          "declaration": {
-            "name": "s",
-            "module": "dist/components/color-palette/menu/color-palette-menu.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/color-palette/menu/color-palette-menu.styles.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "t",
-          "default": "r` :host { display: block; } menu { display: grid; grid-template-columns: 1fr; padding: 0.5rem; margin: 0; border-radius: 5px; color: rgb(245, 245, 245); background-color: #222222; } li { display: grid; grid-template-columns: subgrid; list-style: none; } button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: flex-start; column-gap: 0.5rem; background-color: inherit; color: inherit; border: none; cursor: pointer; padding: 4px 8px; text-wrap: nowrap; &:hover { background-color: #323232; } span { font-size: 14px; } } hr { width: 95%; border-color: rgb(45, 45, 45); } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "t",
-            "module": "dist/components/color-palette/menu/color-palette-menu.styles.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/color-palette/menu/color-palette-reorder.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "o",
-          "default": "class extends m { constructor() { super(...arguments), this.colors = [], this.emitter = new y(); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return c` <menu> ${x( Object.keys(i), (r) => c` <button @click=${(s) => { this.selectOption(r); }} > <span>${r}</span> </button> ` )} </menu> `; } /** Reorders the palette colors based on the selected option. */ selectOption(r) { const s = this.colors.map((e) => u(e)); let a = []; switch (r) { case \"Hue\": a = s.sort((e, t) => e.hue() - t.hue()).map((e) => e.hex()); break; case \"Saturation\": a = s.sort((e, t) => e.saturation() - t.saturation()).map((e) => e.hex()); break; case \"Lightness\": a = s.sort((e, t) => e.lightness() - t.lightness()).map((e) => e.hex()); break; case \"Red\": a = s.sort((e, t) => e.red() - t.red()).map((e) => e.hex()); break; case \"Green\": a = s.sort((e, t) => e.green() - t.green()).map((e) => e.hex()); break; case \"Blue\": a = s.sort((e, t) => e.blue() - t.blue()).map((e) => e.hex()); break; case \"Alpha\": a = s.sort((e, t) => e.alpha() - t.alpha()).map((e) => e.hex()); break; } this.emitter.emit(\"submit\", a); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ColorPaletteReorder",
-          "declaration": {
-            "name": "o",
-            "module": "dist/components/color-palette/menu/color-palette-reorder.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/color-palette/menu/color-palette-reorder.styles.js",
+      "path": "dist/node_modules/style-observer/src/element-style-observer.js",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "n",
-          "default": "o` :host { display: block; } menu { display: flex; flex-direction: column; gap: 0.5rem; background-color: rgb(27, 27, 27); padding: 0.5rem; border-radius: 5px; button { color: rgb(245, 245, 245); background-color: transparent; border: none; padding: 4px 12px; cursor: pointer; &:hover { background-color: rgb(75, 75, 75); } span { font-size: 14px; } } } `"
-        }
+          "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"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleEvent",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "name": "event",
+                  "optional": true,
+                  "type": {
+                    "text": "TransitionEvent"
+                  }
+                }
+              ],
+              "description": "Handle a potential property change",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "observe",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "name": "properties",
+                  "type": {
+                    "text": "string | string[]"
+                  }
+                }
+              ],
+              "description": "Observe the target for changes to one or more CSS properties.",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateTransitionProperties",
+              "description": "Update the `--style-observer-transition` property to include all observed properties."
+            },
+            {
+              "kind": "field",
+              "name": "#e",
+              "privacy": "private",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateTransition",
+              "parameters": [
+                {
+                  "name": "{ firstTime: t }",
+                  "default": "{}"
+                },
+                {
+                  "name": "options",
+                  "type": {
+                    "text": "@param {boolean} [options.firstTime] - Whether this is the first time the transition is being set.\n   "
+                  }
+                }
+              ],
+              "description": "Update the target's transition property or refresh it if it was overwritten."
+            },
+            {
+              "kind": "field",
+              "name": "_isHost",
+              "description": "Whether the target has an open shadow root (and the modern adoptedStyleSheets API is supported).",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_shadowSheet",
+              "description": "Shadow style sheet. Only used if _isHost is true.",
+              "type": {
+                "text": "CSSStyleSheet | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_styles",
+              "type": {
+                "text": "Record<string, string>"
+              },
+              "default": "{}",
+              "description": "Any styles we've set on the target, for any reason.",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setProperty",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "name": "r"
+                },
+                {
+                  "name": "s"
+                },
+                {
+                  "name": "property",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "priority",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Set a CSS property on the target.",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getProperty",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "name": "property",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Get a CSS property from the target.",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "unobserve",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "description": "Properties to stop observing. Defaults to all observed properties.",
+                  "name": "properties",
+                  "optional": true,
+                  "type": {
+                    "text": "string | string[]"
+                  }
+                }
+              ],
+              "description": "Stop observing a target for changes to one or more CSS properties.",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "all",
+              "static": true,
+              "default": "new d()",
+              "description": "All instances ever observed by this class."
+            },
+            {
+              "kind": "field",
+              "name": "renderedObserver",
+              "default": "new g((i) => { this.propertyNames.length > 0 && this.handleEvent(); })"
+            },
+            {
+              "kind": "field"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "c",
+          "parameters": [
+            {
+              "name": "o"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "O",
+            "module": "dist/node_modules/style-observer/src/element-style-observer.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "resolveOptions",
+          "declaration": {
+            "name": "c",
+            "module": "dist/node_modules/style-observer/src/element-style-observer.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/rendered-observer.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "c",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#e",
+              "privacy": "private",
+              "default": "new Set()",
+              "description": "All currently observed targets",
+              "type": {
+                "text": "WeakSet<Element>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#t",
+              "privacy": "private",
+              "default": "new WeakMap()",
+              "description": "Documents to IntersectionObserver instances",
+              "type": {
+                "text": "WeakMap<Document, IntersectionObserver>"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "observe",
+              "parameters": [
+                {
+                  "name": "e"
+                },
+                {
+                  "description": "The element to observe.",
+                  "name": "element",
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ],
+              "description": "Begin observing the presence of an element."
+            },
+            {
+              "kind": "method",
+              "name": "unobserve",
+              "parameters": [
+                {
+                  "name": "e"
+                },
+                {
+                  "description": "The element to stop observing. If not provided, all targets will be unobserved.",
+                  "name": "element",
+                  "optional": true,
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ],
+              "description": "Stop observing the presence of an element."
+            },
+            {
+              "kind": "field",
+              "name": "callback",
+              "default": "e"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "c",
+            "module": "dist/node_modules/style-observer/src/rendered-observer.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/style-observer.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "p",
+          "members": [
+            {
+              "kind": "field",
+              "name": "elementObservers",
+              "default": "new WeakMap()",
+              "type": {
+                "text": "WeakMap<Element, ElementStyleObserver>"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "changed",
+              "parameters": [
+                {
+                  "name": "t"
+                }
+              ],
+              "type": {
+                "text": "StyleObserverCallback"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "observe",
+              "parameters": [
+                {
+                  "name": "t"
+                }
+              ],
+              "description": "Observe one or more targets for changes to one or more CSS properties."
+            },
+            {
+              "kind": "method",
+              "name": "unobserve",
+              "parameters": [
+                {
+                  "name": "t"
+                }
+              ],
+              "description": "Stop observing one or more targets for changes to one or more CSS properties."
+            },
+            {
+              "kind": "method",
+              "name": "updateTransition",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "name": "targets",
+                  "type": {
+                    "text": "Element | Element[]"
+                  }
+                }
+              ],
+              "description": "Update the transition for one or more targets.",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "callback",
+              "default": "t"
+            },
+            {
+              "kind": "field"
+            },
+            {
+              "kind": "field",
+              "name": "targets",
+              "type": {
+                "text": "array"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "target"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "default": "[...n(o), ...n(t)]",
+              "type": {
+                "text": "array"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "p",
+            "module": "dist/node_modules/style-observer/src/style-observer.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "c",
+          "parameters": [
+            {
+              "name": "e"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "h",
+          "parameters": [
+            {
+              "name": "e"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "m",
+          "parameters": [
+            {
+              "name": "e"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "u",
+          "parameters": [
+            {
+              "name": "e"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "d",
+          "parameters": [
+            {
+              "name": "e"
+            },
+            {
+              "name": "t"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "a",
+          "parameters": [
+            {
+              "name": "e"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "getLonghands",
+          "declaration": {
+            "name": "m",
+            "module": "dist/node_modules/style-observer/src/util.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getTimesFor",
+          "declaration": {
+            "name": "d",
+            "module": "dist/node_modules/style-observer/src/util.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "parseTimes",
+          "declaration": {
+            "name": "u",
+            "module": "dist/node_modules/style-observer/src/util.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "splitCommas",
+          "declaration": {
+            "name": "a",
+            "module": "dist/node_modules/style-observer/src/util.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "toArray",
+          "declaration": {
+            "name": "c",
+            "module": "dist/node_modules/style-observer/src/util.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "wait",
+          "declaration": {
+            "name": "h",
+            "module": "dist/node_modules/style-observer/src/util.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/color-palette/menu/color-palette-menu.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "s",
+          "default": "class extends y { constructor() { super(...arguments), this.colors = [], this.editMode = !1, this.copyFormat = v.copyFormat, this.reorder = !1, this.emitter = new C(); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return c` ${this.reorder ? this.reorderItems() : this.menuItems()} `; } /** Renders the menu items. */ menuItems() { const i = { colors: this.colors, settings: this.settings }; return c` <menu> <li> <button @click=${(t) => { t.stopPropagation(), this.reorder = !this.reorder; }} > ${r(E)} <span>Reorder</span> </button> </li> <li> <button @click=${() => { this.emitter.emit(\"openEditor\"); }} > ${r(P)} <span>Edit Mode</span> </button> </li> ${// Only show toggle edit mode option when palette is not a gradient this.settings?.gradient ? d : c` <li> <button @click=${() => { this.emitter.emit(\"editMode\", !this.editMode); }} > ${r(k)} <span>Quick Edit</span> ${this.editMode ? r(M) : d} </button> </li> `} <hr> <li> <button @click=${() => { const t = this.colors.map((o) => { const e = u(o).rgb(); return `rgb(${e[0]}, ${e[1]}, ${e[2]})`; }); this.emitter.emit(\"change\", t); }} > ${r(h)} <span>Convert to RGB</span> </button> </li> <li> <button @click=${() => { const t = this.colors.map((o) => { const e = u(o).hsl(); return `hsl(${e[0]} ${e[1]}% ${e[2]}%)`; }); this.emitter.emit(\"change\", t); }} > ${r(h)} <span>Convert to HSL</span> </button> </li> <li> <button @click=${() => { const t = this.colors.map((o) => u(o).hex(2)); this.emitter.emit(\"change\", t); }} > ${r(h)} <span>Convert to HEX</span> </button> </li> <hr> <li> <button @click=${async () => { await b(JSON.stringify(i), this.copyFormat), this.emitter.emit(\"change\", []); }} > ${r(O)} <span>Cut</span> </button> </li> <li> <button @click=${async () => { await b(JSON.stringify(i), this.copyFormat); }} > ${r(w)} <span>Copy</span> </button> </li> </menu> `; } /** Renders the reorder items. */ reorderItems() { const i = (t) => { t instanceof _ && (t.emitter.clear(), t.emitter.on(\"submit\", (o) => { this.emitter.emit(\"change\", o), this.reorder = !1; })); }; return c` <color-palette-reorder .colors=${this.colors} ${S(i)} > </color-palette-reorder> `; } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ColorPaletteMenu",
+          "declaration": {
+            "name": "s",
+            "module": "dist/components/color-palette/menu/color-palette-menu.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/color-palette/menu/color-palette-menu.styles.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "t",
+          "default": "r` :host { display: block; } menu { display: grid; grid-template-columns: 1fr; padding: 0.5rem; margin: 0; border-radius: 5px; color: rgb(245, 245, 245); background-color: #222222; } li { display: grid; grid-template-columns: subgrid; list-style: none; } button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: flex-start; column-gap: 0.5rem; background-color: inherit; color: inherit; border: none; cursor: pointer; padding: 4px 8px; text-wrap: nowrap; &:hover { background-color: #323232; } span { font-size: 14px; } } hr { width: 95%; border-color: rgb(45, 45, 45); } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "t",
+            "module": "dist/components/color-palette/menu/color-palette-menu.styles.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/color-palette/menu/color-palette-reorder.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "o",
+          "default": "class extends m { constructor() { super(...arguments), this.colors = [], this.emitter = new y(); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return c` <menu> ${x( Object.keys(i), (r) => c` <button @click=${(s) => { this.selectOption(r); }} > <span>${r}</span> </button> ` )} </menu> `; } /** Reorders the palette colors based on the selected option. */ selectOption(r) { const s = this.colors.map((e) => u(e)); let a = []; switch (r) { case \"Hue\": a = s.sort((e, t) => e.hue() - t.hue()).map((e) => e.hex()); break; case \"Saturation\": a = s.sort((e, t) => e.saturation() - t.saturation()).map((e) => e.hex()); break; case \"Lightness\": a = s.sort((e, t) => e.lightness() - t.lightness()).map((e) => e.hex()); break; case \"Red\": a = s.sort((e, t) => e.red() - t.red()).map((e) => e.hex()); break; case \"Green\": a = s.sort((e, t) => e.green() - t.green()).map((e) => e.hex()); break; case \"Blue\": a = s.sort((e, t) => e.blue() - t.blue()).map((e) => e.hex()); break; case \"Alpha\": a = s.sort((e, t) => e.alpha() - t.alpha()).map((e) => e.hex()); break; } this.emitter.emit(\"submit\", a); } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ColorPaletteReorder",
+          "declaration": {
+            "name": "o",
+            "module": "dist/components/color-palette/menu/color-palette-reorder.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/color-palette/menu/color-palette-reorder.styles.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "n",
+          "default": "o` :host { display: block; } menu { display: flex; flex-direction: column; gap: 0.5rem; background-color: rgb(27, 27, 27); padding: 0.5rem; border-radius: 5px; button { color: rgb(245, 245, 245); background-color: transparent; border: none; padding: 4px 12px; cursor: pointer; &:hover { background-color: rgb(75, 75, 75); } span { font-size: 14px; } } } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "n",
+            "module": "dist/components/color-palette/menu/color-palette-reorder.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": "palette",
+              "type": {
+                "text": "ColorPalette"
+              },
+              "privacy": "public",
+              "description": "The color palette."
+            },
+            {
+              "kind": "field",
+              "name": "absolute",
+              "type": {
+                "text": "AbsoluteContainer"
+              },
+              "privacy": "public",
+              "description": "The color-palette-editor wrapper."
+            },
+            {
+              "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": "isMobile",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false",
+              "description": "Whether the screen is mobile sized."
+            }
+          ],
+          "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",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An editor which can assist in modifying new or existing color palettes.",
+          "name": "ColorPaletteEditor",
+          "cssProperties": [
+            {
+              "type": {
+                "text": "<color>"
+              },
+              "description": "The call to action background color.",
+              "name": "--cta-background"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "palette",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "public",
+              "description": "The wrapper element."
+            },
+            {
+              "kind": "field",
+              "name": "colors",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "public",
+              "default": "[]",
+              "description": "The palette colors to be edited.",
+              "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 to be edited.",
+              "attribute": "settings"
+            },
+            {
+              "kind": "field",
+              "name": "selectedInput",
+              "type": {
+                "text": "SelectedInput"
+              },
+              "privacy": "public",
+              "description": "The editing input that will be used.",
+              "attribute": "selectedInput",
+              "reflects": true
+            },
+            {
+              "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"
+            },
+            {
+              "kind": "field",
+              "name": "emitter",
+              "type": {
+                "text": "EventEmitter<EventMap>"
+              },
+              "privacy": "public",
+              "default": "new EventEmitter<EventMap>()",
+              "description": "Public way to subscribe to events."
+            },
+            {
+              "kind": "method",
+              "name": "renderSettings",
+              "privacy": "private",
+              "description": "Renders the settings fields."
+            },
+            {
+              "kind": "method",
+              "name": "pickerOption",
+              "privacy": "private",
+              "description": "Renders the picker option."
+            },
+            {
+              "kind": "method",
+              "name": "generateOption",
+              "privacy": "private",
+              "description": "Renders the generate option."
+            },
+            {
+              "kind": "method",
+              "name": "imageOption",
+              "privacy": "private",
+              "description": "Renders the image option."
+            },
+            {
+              "kind": "method",
+              "name": "urlOption",
+              "privacy": "private",
+              "description": "Renders the URL option."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "colors",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "The palette colors to be edited.",
+              "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 to be edited.",
+              "fieldName": "settings"
+            },
+            {
+              "name": "selectedInput",
+              "type": {
+                "text": "SelectedInput"
+              },
+              "description": "The editing input that will be used.",
+              "fieldName": "selectedInput"
+            },
+            {
+              "name": "combination",
+              "type": {
+                "text": "Combination"
+              },
+              "description": "The color theory combination used when generating colors.",
+              "fieldName": "combination"
+            },
+            {
+              "name": "baseColor",
+              "type": {
+                "text": "ReturnType<typeof colorsea> | undefined"
+              },
+              "description": "The base color used when generating colors.",
+              "fieldName": "baseColor"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "color-palette-editor",
+          "customElement": true
+        }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
+          "name": "ColorPaletteEditor",
           "declaration": {
-            "name": "n",
-            "module": "dist/components/color-palette/menu/color-palette-reorder.styles.js"
+            "name": "ColorPaletteEditor",
+            "module": "src/components/color-palette/editor/color-palette-editor.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "color-palette-editor",
+          "declaration": {
+            "name": "ColorPaletteEditor",
+            "module": "src/components/color-palette/editor/color-palette-editor.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/component/color-palette-component.styles.ts",
+      "path": "src/components/color-palette/editor/settings-item.styles.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/components/color-palette/component/color-palette-component.styles.ts"
+            "module": "src/components/color-palette/editor/settings-item.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/component/color-palette-component.ts",
+      "path": "src/components/color-palette/editor/settings-item.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "color-palette components combined.",
-          "name": "ColorPaletteComponent",
-          "members": [
-            {
-              "kind": "field",
-              "name": "palette",
-              "type": {
-                "text": "ColorPalette"
-              },
-              "privacy": "public",
-              "description": "The color palette."
-            },
-            {
-              "kind": "field",
-              "name": "absolute",
-              "type": {
-                "text": "AbsoluteContainer"
-              },
-              "privacy": "public",
-              "description": "The color-palette-editor wrapper."
-            },
+          "description": "The settings item using inside of the editor.",
+          "name": "SettingItem",
+          "slots": [
             {
-              "kind": "field",
-              "name": "colors",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "public",
-              "default": "[]",
-              "description": "The palette colors.",
-              "attribute": "colors"
-            },
+              "description": "The setting.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "settings",
+              "name": "name",
               "type": {
-                "text": "PaletteSettings"
+                "text": "string"
               },
               "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"
+              "default": "''",
+              "description": "The name of the setting.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "editMode",
+              "name": "description",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
               "privacy": "public",
-              "default": "false",
-              "description": "Whether the palette is in edit mode.",
-              "attribute": "editMode"
-            },
-            {
-              "kind": "field",
-              "name": "isMobile",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "default": "false",
-              "description": "Whether the screen is mobile sized."
+              "default": "''",
+              "description": "The description of the setting.",
+              "attribute": "description"
             }
           ],
           "attributes": [
             {
-              "name": "colors",
-              "type": {
-                "text": "string[]"
-              },
-              "default": "[]",
-              "description": "The palette colors.",
-              "fieldName": "colors"
-            },
-            {
-              "name": "settings",
+              "name": "name",
               "type": {
-                "text": "PaletteSettings"
+                "text": "string"
               },
-              "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"
+              "default": "''",
+              "description": "The name of the setting.",
+              "fieldName": "name"
             },
             {
-              "name": "editMode",
+              "name": "description",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Whether the palette is in edit mode.",
-              "fieldName": "editMode"
+              "default": "''",
+              "description": "The description of the setting.",
+              "fieldName": "description"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "color-palette-component",
+          "tagName": "setting-item",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorPaletteComponent",
+          "name": "SettingItem",
           "declaration": {
-            "name": "ColorPaletteComponent",
-            "module": "src/components/color-palette/component/color-palette-component.ts"
+            "name": "SettingItem",
+            "module": "src/components/color-palette/editor/settings-item.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "color-palette-component",
+          "name": "setting-item",
           "declaration": {
-            "name": "ColorPaletteComponent",
-            "module": "src/components/color-palette/component/color-palette-component.ts"
+            "name": "SettingItem",
+            "module": "src/components/color-palette/editor/settings-item.ts"
           }
         }
       ]
@@ -6075,308 +7130,252 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/editor/color-palette-editor.styles.ts",
-      "declarations": [],
+      "path": "dist/node_modules/style-observer/src/util/adopt-css.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "n",
+          "parameters": [
+            {
+              "name": "l"
+            },
+            {
+              "name": "e",
+              "default": "globalThis.document"
+            }
+          ]
+        }
+      ],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/components/color-palette/editor/color-palette-editor.styles.ts"
+            "name": "n",
+            "module": "dist/node_modules/style-observer/src/util/adopt-css.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/editor/color-palette-editor.ts",
+      "path": "dist/node_modules/style-observer/src/util/Bug.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "An editor which can assist in modifying new or existing color palettes.",
-          "name": "ColorPaletteEditor",
-          "cssProperties": [
-            {
-              "type": {
-                "text": "<color>"
-              },
-              "description": "The call to action background color.",
-              "name": "--cta-background"
-            }
-          ],
+          "description": "",
+          "name": "t",
           "members": [
             {
-              "kind": "field",
-              "name": "palette",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "public",
-              "description": "The wrapper element."
-            },
-            {
-              "kind": "field",
-              "name": "colors",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "public",
-              "default": "[]",
-              "description": "The palette colors to be edited.",
-              "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 to be edited.",
-              "attribute": "settings"
-            },
-            {
-              "kind": "field",
-              "name": "selectedInput",
-              "type": {
-                "text": "SelectedInput"
-              },
-              "privacy": "public",
-              "description": "The editing input that will be used.",
-              "attribute": "selectedInput",
-              "reflects": true
+              "kind": "field",
+              "name": "#t",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "combination",
-              "type": {
-                "text": "Combination"
-              },
-              "privacy": "public",
-              "description": "The color theory combination used when generating colors.",
-              "attribute": "combination"
+              "name": "#e",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "baseColor",
-              "type": {
-                "text": "ReturnType<typeof colorsea> | undefined"
-              },
-              "privacy": "public",
-              "description": "The base color used when generating colors.",
-              "attribute": "baseColor"
+              "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": "emitter",
+              "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": "all",
               "type": {
-                "text": "EventEmitter<EventMap>"
+                "text": "object"
               },
-              "privacy": "public",
-              "default": "new EventEmitter<EventMap>()",
-              "description": "Public way to subscribe to events."
+              "static": true,
+              "default": "{}"
             },
             {
               "kind": "method",
-              "name": "renderSettings",
-              "privacy": "private",
-              "description": "Renders the settings fields."
+              "name": "detectAll",
+              "static": true
             },
             {
-              "kind": "method",
-              "name": "pickerOption",
-              "privacy": "private",
-              "description": "Renders the picker option."
+              "kind": "field",
+              "name": "name",
+              "default": "e"
             },
             {
-              "kind": "method",
-              "name": "generateOption",
-              "privacy": "private",
-              "description": "Renders the generate option."
+              "kind": "field",
+              "name": "initialValue"
             },
             {
-              "kind": "method",
-              "name": "imageOption",
-              "privacy": "private",
-              "description": "Renders the image option."
+              "kind": "field",
+              "name": "detect",
+              "default": "s"
             },
             {
-              "kind": "method",
-              "name": "urlOption",
-              "privacy": "private",
-              "description": "Renders the URL option."
+              "kind": "field",
+              "default": "this"
             }
-          ],
-          "attributes": [
-            {
-              "name": "colors",
-              "type": {
-                "text": "string[]"
-              },
-              "default": "[]",
-              "description": "The palette colors to be edited.",
-              "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 to be edited.",
-              "fieldName": "settings"
-            },
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "t",
+            "module": "dist/node_modules/style-observer/src/util/Bug.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util/gentle-register-property.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "f",
+          "parameters": [
             {
-              "name": "selectedInput",
-              "type": {
-                "text": "SelectedInput"
-              },
-              "description": "The editing input that will be used.",
-              "fieldName": "selectedInput"
+              "name": "t"
             },
             {
-              "name": "combination",
-              "type": {
-                "text": "Combination"
-              },
-              "description": "The color theory combination used when generating colors.",
-              "fieldName": "combination"
+              "name": "n",
+              "default": "{}"
             },
             {
-              "name": "baseColor",
-              "type": {
-                "text": "ReturnType<typeof colorsea> | undefined"
-              },
-              "description": "The base color used when generating colors.",
-              "fieldName": "baseColor"
+              "name": "r",
+              "default": "globalThis.document"
             }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "color-palette-editor",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorPaletteEditor",
-          "declaration": {
-            "name": "ColorPaletteEditor",
-            "module": "src/components/color-palette/editor/color-palette-editor.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "color-palette-editor",
+          "name": "default",
           "declaration": {
-            "name": "ColorPaletteEditor",
-            "module": "src/components/color-palette/editor/color-palette-editor.ts"
+            "name": "f",
+            "module": "dist/node_modules/style-observer/src/util/gentle-register-property.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/editor/settings-item.styles.ts",
-      "declarations": [],
+      "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",
           "declaration": {
-            "module": "src/components/color-palette/editor/settings-item.styles.ts"
+            "name": "n",
+            "module": "dist/node_modules/style-observer/src/util/is-registered-property.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/editor/settings-item.ts",
+      "path": "dist/node_modules/style-observer/src/util/MultiWeakMap.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The settings item using inside of the editor.",
-          "name": "SettingItem",
-          "slots": [
-            {
-              "description": "The setting.",
-              "name": ""
-            }
-          ],
+          "description": "",
+          "name": "r",
           "members": [
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "''",
-              "description": "The name of the setting.",
-              "attribute": "name"
+              "kind": "method",
+              "name": "has",
+              "parameters": [
+                {
+                  "name": "e"
+                },
+                {
+                  "name": "s"
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "description",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "''",
-              "description": "The description of the setting.",
-              "attribute": "description"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the setting.",
-              "fieldName": "name"
+              "kind": "method",
+              "name": "add",
+              "parameters": [
+                {
+                  "name": "e"
+                },
+                {
+                  "name": "s"
+                }
+              ]
             },
             {
-              "name": "description",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The description of the setting.",
-              "fieldName": "description"
+              "kind": "method",
+              "name": "delete",
+              "parameters": [
+                {
+                  "name": "e"
+                },
+                {
+                  "name": "s"
+                }
+              ]
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "setting-item",
-          "customElement": true
+            "name": "WeakMap",
+            "module": "dist/node_modules/style-observer/src/util/MultiWeakMap.js"
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SettingItem",
-          "declaration": {
-            "name": "SettingItem",
-            "module": "src/components/color-palette/editor/settings-item.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "setting-item",
+          "name": "default",
           "declaration": {
-            "name": "SettingItem",
-            "module": "src/components/color-palette/editor/settings-item.ts"
+            "name": "r",
+            "module": "dist/node_modules/style-observer/src/util/MultiWeakMap.js"
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util/bugs/adopted-style-sheet.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util/bugs/transitionrun-loop.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util/bugs/unregistered-transition.js",
+      "declarations": [],
+      "exports": []
     }
   ]
 }