@alegendstale/holly-components 2.0.10 → 2.0.11

package/custom-elements.json

@@ -669,65 +669,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/decorators/condCustomElement.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "condCustomElement",
-          "parameters": [
-            {
-              "name": "tagName",
-              "type": {
-                "text": "string"
-              },
-              "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": "condCustomElement",
-          "declaration": {
-            "name": "condCustomElement",
-            "module": "src/decorators/condCustomElement.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/decorators/ExposeParts.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "exposeParts",
-          "parameters": [
-            {
-              "name": "partMap",
-              "type": {
-                "text": "PartMap[]"
-              }
-            }
-          ],
-          "description": "Property decorator that exposes parts and updates them when the property changes."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "exposeParts",
-          "declaration": {
-            "name": "exposeParts",
-            "module": "src/decorators/ExposeParts.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/controllers/ResponsiveController.ts",
@@ -849,6 +790,65 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/decorators/condCustomElement.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "condCustomElement",
+          "parameters": [
+            {
+              "name": "tagName",
+              "type": {
+                "text": "string"
+              },
+              "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": "condCustomElement",
+          "declaration": {
+            "name": "condCustomElement",
+            "module": "src/decorators/condCustomElement.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/decorators/ExposeParts.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "exposeParts",
+          "parameters": [
+            {
+              "name": "partMap",
+              "type": {
+                "text": "PartMap[]"
+              }
+            }
+          ],
+          "description": "Property decorator that exposes parts and updates them when the property changes."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "exposeParts",
+          "declaration": {
+            "name": "exposeParts",
+            "module": "src/decorators/ExposeParts.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/utils/basicUtils.ts",
@@ -1563,6 +1563,48 @@
         }
       ]
     },
+    {
+      "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",
@@ -1855,48 +1897,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/carousel-scroller/carousel-scroller.js",
@@ -1987,7 +1987,7 @@
       "declarations": [
         {
           "kind": "variable",
-          "name": "v",
+          "name": "l",
           "type": {
             "text": "array"
           },
@@ -1995,7 +1995,7 @@
         },
         {
           "kind": "variable",
-          "name": "S",
+          "name": "B",
           "type": {
             "text": "array"
           },
@@ -2007,12 +2007,12 @@
           "type": {
             "text": "array"
           },
-          "default": "[ ...v, ...v.flatMap((t) => S.map((e) => `${t} ${e}`)) ]"
+          "default": "[ ...l, ...l.flatMap((t) => B.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; } }"
+          "name": "o",
+          "default": "class extends c { constructor() { super(...arguments), this.autofit = !1, this.svgColors = !1, this.viewBox = { x: 0, y: 0, width: 0, height: 0 }, this._widthController = new g(this, \"--svg-width\", (t) => { const e = parseFloat(t); isNaN(e) || e <= 0 || (this.viewBox = { ...this.viewBox, width: e || 0 }); }), this._heightController = new g(this, \"--svg-height\", (t) => { const e = parseFloat(t); isNaN(e) || e <= 0 || (this.viewBox = { ...this.viewBox, height: e || 0 }); }); } set svg(t) { let e; if (typeof t == \"string\") { const s = m(t); if (!(s instanceof SVGElement)) return; e = s; } else e = t; if (e instanceof SVGElement) { const s = this.getViewBoxSize(e), r = parseFloat(e.getAttribute(\"width\") || \"0\"), i = parseFloat(e.getAttribute(\"height\") || \"0\"); this.viewBox = { x: s?.x ?? 0, y: s?.y ?? 0, width: s?.width || r || this.viewBox.width, height: s?.height || i || this.viewBox.height }; } 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 (_(t)) return t; } return this._preserveAspectRatio || \"xMidYMid meet\"; } // For classes inheriting from responsive-svg (e.g. draw-svg) svgClasses() { return {}; } render() { const t = this.viewBox, e = this.preserveAspectRatio, s = this.svgClasses(); if (t.height === 0 || t.width === 0) return v`<p style=\"font-size: initial;\">⚠️ SVG ViewBox</p>`; if (typeof this.svg == \"string\") return v`<p style=\"font-size: initial;\">⚠️ SVG Error</p>`; const r = this.svg instanceof SVGElement ? Array.from(this.svg.cloneNode(!0).childNodes) : this.svg; return v` <svg class=${u(s)} style=${w({ \"--svg-width-fallback\": `${t.width}em`, \"--svg-height-fallback\": `${t.height}em` })} viewBox=\"${t.x} ${t.y} ${t.width} ${t.height}\" preserveAspectRatio=${e} xmlns=\"http://www.w3.org/2000/svg\" > ${r} </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": [
@@ -2020,7 +2020,7 @@
           "kind": "js",
           "name": "ResponsiveSvg",
           "declaration": {
-            "name": "n",
+            "name": "o",
             "module": "dist/components/responsive-svg/responsive-svg.js"
           }
         },
@@ -2028,7 +2028,7 @@
           "kind": "js",
           "name": "preserveAspectRatioAlignOptions",
           "declaration": {
-            "name": "v",
+            "name": "l",
             "module": "dist/components/responsive-svg/responsive-svg.js"
           }
         },
@@ -2044,7 +2044,7 @@
           "kind": "js",
           "name": "preserveAspectRatioSpacingOptions",
           "declaration": {
-            "name": "S",
+            "name": "B",
             "module": "dist/components/responsive-svg/responsive-svg.js"
           }
         }
@@ -3443,37 +3443,375 @@
     },
     {
       "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/draw-svg/draw-svg.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/draw-svg/draw-svg.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/draw-svg/draw-svg.ts",
+      "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "PaletteError",
+          "description": "Animates the provided SVG paths as if they were being drawn.",
+          "name": "DrawSvg",
           "members": [
             {
               "kind": "field",
-              "name": "status",
+              "name": "isIntersecting",
               "type": {
-                "text": "Status"
+                "text": "boolean"
               },
-              "default": "status"
-            }
-          ],
-          "superclass": {
-            "name": "Error",
+              "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",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            },
+            {
+              "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": "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": "field",
+              "name": "_widthController",
+              "privacy": "private",
+              "default": "new StyleController(this, '--svg-width', (val) => { const width = parseFloat(val); if(isNaN(width) || width <= 0) return; this.viewBox = { ...this.viewBox, width: width || 0 }; })",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_heightController",
+              "privacy": "private",
+              "default": "new StyleController(this, '--svg-height', (val) => { const height = parseFloat(val); if(isNaN(height) || height <= 0) return; this.viewBox = { ...this.viewBox, height: height || 0 }; })",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getViewBoxSize",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "svg",
+                  "type": {
+                    "text": "SVGElement"
+                  },
+                  "description": "The SVG to get the attribute from."
+                }
+              ],
+              "description": "Gets the viewBox dimensions from an SVG element.",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Emits when the component enters or leaves the viewport.",
+              "name": "intersection"
+            }
+          ],
+          "superclass": {
+            "name": "ResponsiveSvg",
+            "module": "/src/components/responsive-svg/responsive-svg.js"
+          },
+          "tagName": "draw-svg",
+          "customElement": true,
+          "cssParts": [
+            {
+              "description": "Styles the SVG element.",
+              "name": "__svg",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            },
+            {
+              "description": "Styles all child path elements of the SVG.",
+              "name": "__path",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            }
+          ],
+          "cssProperties": [
+            {
+              "type": {
+                "text": "<length> (em)"
+              },
+              "description": "Controls the width of the SVG. (Expects em value)",
+              "name": "--svg-width",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            },
+            {
+              "type": {
+                "text": "<length> (em)"
+              },
+              "description": "Controls the height of the SVG. (Expects em value)",
+              "name": "--svg-height",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            },
+            {
+              "type": {
+                "text": "<length> (em)"
+              },
+              "description": "Set by the component as a fallback in case --svg-width is not defined.",
+              "name": "--svg-width-fallback",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            },
+            {
+              "type": {
+                "text": "<length> (em)"
+              },
+              "description": "Set by the component as a fallback in case --svg-height is not defined.",
+              "name": "--svg-height-fallback",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            },
+            {
+              "type": {
+                "text": "number"
+              },
+              "description": "Controls the scale of the SVG when sized relative to font-size.",
+              "name": "--scale",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "autofit",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The SVG will attempt to fill its container.",
+              "fieldName": "autofit",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            },
+            {
+              "name": "svgColors",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Use the colors from the SVG input.",
+              "fieldName": "svgColors",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            },
+            {
+              "name": "svg",
+              "description": "The SVG to responsively size.\r\nMust use a property expression (.) to set",
+              "type": {
+                "text": "SVGElement | TemplateResult<2> | string"
+              },
+              "fieldName": "svg",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            },
+            {
+              "name": "preserveAspectRatio",
+              "description": "Set whether SVG preserves its aspect ratio alignment or spacing.",
+              "type": {
+                "text": "PreserveAspectRatio"
+              },
+              "default": "xMidYMid meet",
+              "fieldName": "preserveAspectRatio",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DrawSvg",
+          "declaration": {
+            "name": "DrawSvg",
+            "module": "src/components/draw-svg/draw-svg.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "draw-svg",
+          "declaration": {
+            "name": "DrawSvg",
+            "module": "src/components/draw-svg/draw-svg.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/color-palette/color-palette-utils.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "defaultSettings",
+          "type": {
+            "text": "ColorPaletteSettings"
+          },
+          "default": "{ noticeDuration: 10000, errorPulse: true, aliasMode: AliasMode.Both, corners: true, stabilizeWhileEditing: true, reloadDelay: 5, copyFormat: CopyFormat.Raw, height: 150, width: 700, direction: Direction.Column, gradient: false, preventHover: false, hideText: false, override: false }"
+        },
+        {
+          "kind": "variable",
+          "name": "urlRegex",
+          "default": "/(?:https:\\/\\/www\\.|http:\\/\\/www\\.|https:\\/\\/|http:\\/\\/)?[a-zA-Z0-9]{2,}(?:\\.[a-zA-Z0-9]{2,})(?:\\.[a-zA-Z0-9]{2,})?\\/(?:palette\\/)?([a-zA-Z0-9-]{2,})/"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PaletteError",
+          "members": [
+            {
+              "kind": "field",
+              "name": "status",
+              "type": {
+                "text": "Status"
+              },
+              "default": "status"
+            }
+          ],
+          "superclass": {
+            "name": "Error",
             "module": "src/components/color-palette/color-palette-utils.ts"
           }
         },
@@ -3618,753 +3956,415 @@
             {
               "type": {
                 "text": "<length>"
-              },
-              "description": "The height of the palette.",
-              "name": "--palette-height"
-            },
-            {
-              "type": {
-                "text": "<length>"
-              },
-              "description": "The width of the palette.",
-              "name": "--palette-width"
-            },
-            {
-              "type": {
-                "text": "<color>"
-              },
-              "description": "The background color of the palette.",
-              "name": "--palette-background-color"
-            },
-            {
-              "type": {
-                "text": "<color>"
-              },
-              "description": "The color of the palette.",
-              "name": "--palette-color"
-            },
-            {
-              "type": {
-                "text": "<length>"
-              },
-              "description": "The flex size for palette items.",
-              "name": "--palette-column-flex-basis"
-            },
-            {
-              "type": {
-                "text": "<length>"
-              },
-              "description": "The radius of the palette corners.",
-              "name": "--palette-corners"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "editMode",
-              "description": "Whether the palette can be edited.",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "editMode"
-            },
-            {
-              "kind": "field",
-              "name": "colors",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "public",
-              "default": "[]",
-              "description": "The input colors the palette will display.",
-              "attribute": "colors",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "height",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "public",
-              "description": "The height of the palette.",
-              "default": "150",
-              "attribute": "height",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "width",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "public",
-              "description": "The width of the palette.",
-              "default": "700",
-              "attribute": "width",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "Direction"
-              },
-              "privacy": "public",
-              "description": "The direction the palette colors will face.",
-              "default": "column",
-              "attribute": "direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "gradient",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the colors will appear as a gradient.",
-              "attribute": "gradient",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "preventHover",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether hovering over the palette is allowed.",
-              "attribute": "preventHover",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "hideText",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the text on each color is shown.",
-              "attribute": "hideText",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "override",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the input bypasses validation checks.",
-              "attribute": "override",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "aliases",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "public",
-              "default": "[]",
-              "description": "The aliases for each color.",
-              "attribute": "aliases",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "maxWidth",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "public",
-              "default": "0",
-              "description": "The maximum width of the container. (So that the palette doesn't expand past its bounds)",
-              "attribute": "maxWidth"
-            },
-            {
-              "kind": "field",
-              "name": "settings",
-              "privacy": "public",
-              "description": "Helper accessor for settings",
-              "type": {
-                "text": "PaletteSettings"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "status",
-              "type": {
-                "text": "Status"
-              },
-              "privacy": "public",
-              "description": "The current status of the palette."
-            },
-            {
-              "kind": "field",
-              "name": "emitter",
-              "type": {
-                "text": "EventEmitter<EventMap>"
-              },
-              "privacy": "public",
-              "default": "new EventEmitter<EventMap>()",
-              "description": "Public way to subscribe to events."
-            },
-            {
-              "kind": "field",
-              "name": "pluginSettings",
-              "type": {
-                "text": "ColorPaletteSettings"
-              },
-              "default": "defaultSettings",
-              "description": "Extended settings",
-              "attribute": "pluginSettings"
-            },
-            {
-              "kind": "method",
-              "name": "setStatusAndColors",
-              "description": "Sets the current status and parses colors."
-            },
-            {
-              "kind": "method",
-              "name": "getPaletteWidth",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
+              },
+              "description": "The height of the palette.",
+              "name": "--palette-height"
             },
             {
-              "kind": "method",
-              "name": "createPalette",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult | typeof nothing"
-                }
+              "type": {
+                "text": "<length>"
               },
-              "description": "Creates a color palette or gradient palette depending on settings."
+              "description": "The width of the palette.",
+              "name": "--palette-width"
             },
             {
-              "kind": "method",
-              "name": "createColors",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
+              "type": {
+                "text": "<color>"
               },
-              "description": "Create a color palette."
+              "description": "The background color of the palette.",
+              "name": "--palette-background-color"
             },
             {
-              "kind": "method",
-              "name": "createGradient",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
+              "type": {
+                "text": "<color>"
               },
-              "description": "Create a gradient palette."
+              "description": "The color of the palette.",
+              "name": "--palette-color"
             },
             {
-              "kind": "method",
-              "name": "createInvalidPalette",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "Status"
-                  },
-                  "description": "Palette status type"
-                },
-                {
-                  "name": "message",
-                  "default": "''"
-                }
-              ],
-              "description": "Create invalid palette based on palette status."
+              "type": {
+                "text": "<length>"
+              },
+              "description": "The flex size for palette items.",
+              "name": "--palette-column-flex-basis"
+            },
+            {
+              "type": {
+                "text": "<length>"
+              },
+              "description": "The radius of the palette corners.",
+              "name": "--palette-corners"
             }
           ],
-          "attributes": [
+          "members": [
             {
+              "kind": "field",
               "name": "editMode",
               "description": "Whether the palette can be edited.",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "editMode"
+              "attribute": "editMode"
             },
             {
+              "kind": "field",
               "name": "colors",
               "type": {
                 "text": "string[]"
               },
+              "privacy": "public",
               "default": "[]",
               "description": "The input colors the palette will display.",
-              "fieldName": "colors"
+              "attribute": "colors",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "height",
               "type": {
                 "text": "number"
               },
+              "privacy": "public",
               "description": "The height of the palette.",
               "default": "150",
-              "fieldName": "height"
+              "attribute": "height",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "width",
               "type": {
                 "text": "number"
               },
+              "privacy": "public",
               "description": "The width of the palette.",
               "default": "700",
-              "fieldName": "width"
+              "attribute": "width",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "direction",
               "type": {
                 "text": "Direction"
               },
+              "privacy": "public",
               "description": "The direction the palette colors will face.",
               "default": "column",
-              "fieldName": "direction"
+              "attribute": "direction",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "gradient",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "public",
               "default": "false",
               "description": "Whether the colors will appear as a gradient.",
-              "fieldName": "gradient"
+              "attribute": "gradient",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "preventHover",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "public",
               "default": "false",
               "description": "Whether hovering over the palette is allowed.",
-              "fieldName": "preventHover"
+              "attribute": "preventHover",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "hideText",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "public",
               "default": "false",
               "description": "Whether the text on each color is shown.",
-              "fieldName": "hideText"
+              "attribute": "hideText",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "override",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "public",
               "default": "false",
               "description": "Whether the input bypasses validation checks.",
-              "fieldName": "override"
+              "attribute": "override",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "aliases",
               "type": {
                 "text": "string[]"
               },
+              "privacy": "public",
               "default": "[]",
               "description": "The aliases for each color.",
-              "fieldName": "aliases"
+              "attribute": "aliases",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "maxWidth",
               "type": {
                 "text": "number"
               },
+              "privacy": "public",
               "default": "0",
               "description": "The maximum width of the container. (So that the palette doesn't expand past its bounds)",
-              "fieldName": "maxWidth"
-            },
-            {
-              "name": "pluginSettings",
-              "type": {
-                "text": "ColorPaletteSettings"
-              },
-              "default": "defaultSettings",
-              "description": "Extended settings",
-              "fieldName": "pluginSettings"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "color-palette",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ColorPalette",
-          "declaration": {
-            "name": "ColorPalette",
-            "module": "src/components/color-palette/color-palette.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "color-palette",
-          "declaration": {
-            "name": "ColorPalette",
-            "module": "src/components/color-palette/color-palette.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/draw-svg/draw-svg.styles.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/components/draw-svg/draw-svg.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/draw-svg/draw-svg.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Animates the provided SVG paths as if they were being drawn.",
-          "name": "DrawSvg",
-          "members": [
-            {
-              "kind": "field",
-              "name": "isIntersecting",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the SVG is intersecting with the client viewport. Useful for determining when to animate."
-            },
-            {
-              "kind": "method",
-              "name": "svgClasses",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "{}"
-                }
-              },
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "attribute": "maxWidth"
             },
             {
               "kind": "field",
-              "name": "emitter",
-              "type": {
-                "text": "EventEmitter<EventMap>"
-              },
+              "name": "settings",
               "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",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
+              "description": "Helper accessor for settings",
+              "type": {
+                "text": "PaletteSettings"
               }
             },
             {
               "kind": "field",
-              "name": "preserveAspectRatio",
-              "description": "Set whether SVG preserves its aspect ratio alignment or spacing.",
+              "name": "status",
               "type": {
-                "text": "PreserveAspectRatio"
+                "text": "Status"
               },
-              "default": "xMidYMid meet",
-              "attribute": "preserveAspectRatio",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "privacy": "public",
+              "description": "The current status of the palette."
             },
             {
               "kind": "field",
-              "name": "viewBox",
+              "name": "emitter",
               "type": {
-                "text": "ViewBox"
+                "text": "EventEmitter<EventMap>"
               },
-              "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"
-              }
+              "privacy": "public",
+              "default": "new EventEmitter<EventMap>()",
+              "description": "Public way to subscribe to events."
             },
             {
               "kind": "field",
-              "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"
-              }
+              "name": "pluginSettings",
+              "type": {
+                "text": "ColorPaletteSettings"
+              },
+              "default": "defaultSettings",
+              "description": "Extended settings",
+              "attribute": "pluginSettings"
             },
             {
-              "kind": "field",
-              "name": "_heightController",
-              "privacy": "private",
-              "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"
-              }
+              "kind": "method",
+              "name": "setStatusAndColors",
+              "description": "Sets the current status and parses colors."
             },
             {
               "kind": "method",
-              "name": "getViewBoxSize",
+              "name": "getPaletteWidth",
               "privacy": "public",
               "return": {
                 "type": {
                   "text": ""
                 }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "createPalette",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "description": "Creates a color palette or gradient palette depending on settings."
+            },
+            {
+              "kind": "method",
+              "name": "createColors",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "description": "Create a color palette."
+            },
+            {
+              "kind": "method",
+              "name": "createGradient",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
               },
+              "description": "Create a gradient palette."
+            },
+            {
+              "kind": "method",
+              "name": "createInvalidPalette",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "svg",
+                  "name": "type",
                   "type": {
-                    "text": "SVGElement"
+                    "text": "Status"
                   },
-                  "description": "The SVG to get the attribute from."
+                  "description": "Palette status type"
+                },
+                {
+                  "name": "message",
+                  "default": "''"
                 }
               ],
-              "description": "Gets the viewBox dimensions from an SVG element.",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "description": "Create invalid palette based on palette status."
             }
           ],
-          "events": [
+          "attributes": [
             {
+              "name": "editMode",
+              "description": "Whether the palette can be edited.",
               "type": {
                 "text": "boolean"
               },
-              "description": "Emits when the component enters or leaves the viewport.",
-              "name": "intersection"
-            }
-          ],
-          "superclass": {
-            "name": "ResponsiveSvg",
-            "module": "/src/components/responsive-svg/responsive-svg.js"
-          },
-          "tagName": "draw-svg",
-          "customElement": true,
-          "cssParts": [
-            {
-              "description": "Styles the SVG element.",
-              "name": "__svg",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "default": "false",
+              "fieldName": "editMode"
             },
             {
-              "description": "Styles all child path elements of the SVG.",
-              "name": "__path",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
-            }
-          ],
-          "cssProperties": [
+              "name": "colors",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "The input colors the palette will display.",
+              "fieldName": "colors"
+            },
             {
+              "name": "height",
               "type": {
-                "text": "<length> (em)"
+                "text": "number"
               },
-              "description": "Controls the width of the SVG. (Expects em value)",
-              "name": "--svg-width",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "description": "The height of the palette.",
+              "default": "150",
+              "fieldName": "height"
             },
             {
+              "name": "width",
               "type": {
-                "text": "<length> (em)"
+                "text": "number"
               },
-              "description": "Controls the height of the SVG. (Expects em value)",
-              "name": "--svg-height",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "description": "The width of the palette.",
+              "default": "700",
+              "fieldName": "width"
             },
             {
+              "name": "direction",
               "type": {
-                "text": "<length> (em)"
+                "text": "Direction"
               },
-              "description": "Set by the component as a fallback in case --svg-width is not defined.",
-              "name": "--svg-width-fallback",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "description": "The direction the palette colors will face.",
+              "default": "column",
+              "fieldName": "direction"
             },
             {
+              "name": "gradient",
               "type": {
-                "text": "<length> (em)"
+                "text": "boolean"
               },
-              "description": "Set by the component as a fallback in case --svg-height is not defined.",
-              "name": "--svg-height-fallback",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "default": "false",
+              "description": "Whether the colors will appear as a gradient.",
+              "fieldName": "gradient"
             },
             {
+              "name": "preventHover",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "Controls the scale of the SVG when sized relative to font-size.",
-              "name": "--scale",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
-            }
-          ],
-          "attributes": [
+              "default": "false",
+              "description": "Whether hovering over the palette is allowed.",
+              "fieldName": "preventHover"
+            },
             {
-              "name": "autofit",
+              "name": "hideText",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The SVG will attempt to fill its container.",
-              "fieldName": "autofit",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "description": "Whether the text on each color is shown.",
+              "fieldName": "hideText"
             },
             {
-              "name": "svgColors",
+              "name": "override",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Use the colors from the SVG input.",
-              "fieldName": "svgColors",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "description": "Whether the input bypasses validation checks.",
+              "fieldName": "override"
             },
             {
-              "name": "svg",
-              "description": "The SVG to responsively size.\r\nMust use a property expression (.) to set",
+              "name": "aliases",
               "type": {
-                "text": "SVGElement | TemplateResult<2> | string"
+                "text": "string[]"
               },
-              "fieldName": "svg",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "default": "[]",
+              "description": "The aliases for each color.",
+              "fieldName": "aliases"
+            },
+            {
+              "name": "maxWidth",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The maximum width of the container. (So that the palette doesn't expand past its bounds)",
+              "fieldName": "maxWidth"
             },
             {
-              "name": "preserveAspectRatio",
-              "description": "Set whether SVG preserves its aspect ratio alignment or spacing.",
+              "name": "pluginSettings",
               "type": {
-                "text": "PreserveAspectRatio"
+                "text": "ColorPaletteSettings"
               },
-              "default": "xMidYMid meet",
-              "fieldName": "preserveAspectRatio",
-              "inheritedFrom": {
-                "name": "ResponsiveSvg",
-                "module": "src/components/responsive-svg/responsive-svg.ts"
-              }
+              "default": "defaultSettings",
+              "description": "Extended settings",
+              "fieldName": "pluginSettings"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "color-palette",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DrawSvg",
+          "name": "ColorPalette",
           "declaration": {
-            "name": "DrawSvg",
-            "module": "src/components/draw-svg/draw-svg.ts"
+            "name": "ColorPalette",
+            "module": "src/components/color-palette/color-palette.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "draw-svg",
+          "name": "color-palette",
           "declaration": {
-            "name": "DrawSvg",
-            "module": "src/components/draw-svg/draw-svg.ts"
+            "name": "ColorPalette",
+            "module": "src/components/color-palette/color-palette.ts"
           }
         }
       ]
@@ -4524,13 +4524,13 @@
               "kind": "field",
               "name": "_widthController",
               "privacy": "private",
-              "default": "new StyleController(this, '--svg-width', (val) => { this.viewBox = { ...this.viewBox, width: parseFloat(val) || 0 } })"
+              "default": "new StyleController(this, '--svg-width', (val) => { const width = parseFloat(val); if(isNaN(width) || width <= 0) return; this.viewBox = { ...this.viewBox, width: width || 0 }; })"
             },
             {
               "kind": "field",
               "name": "_heightController",
               "privacy": "private",
-              "default": "new StyleController(this, '--svg-height', (val) => { this.viewBox = { ...this.viewBox, height: parseFloat(val) || 0 } })"
+              "default": "new StyleController(this, '--svg-height', (val) => { const height = parseFloat(val); if(isNaN(height) || height <= 0) return; this.viewBox = { ...this.viewBox, height: height || 0 }; })"
             },
             {
               "kind": "method",
@@ -5063,6 +5063,90 @@
         }
       ]
     },
+    {
+      "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": "dist/node_modules/style-observer/src/element-style-observer.js",
@@ -5671,128 +5755,185 @@
     },
     {
       "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); } `"
-        }
-      ],
+      "path": "src/components/color-palette/component/color-palette-component.styles.ts",
+      "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "t",
-            "module": "dist/components/color-palette/menu/color-palette-menu.styles.js"
+            "module": "src/components/color-palette/component/color-palette-component.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/menu/color-palette-reorder.js",
+      "path": "src/components/color-palette/component/color-palette-component.ts",
       "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); } }"
+          "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": "ColorPaletteReorder",
+          "name": "ColorPaletteComponent",
           "declaration": {
-            "name": "o",
-            "module": "dist/components/color-palette/menu/color-palette-reorder.js"
+            "name": "ColorPaletteComponent",
+            "module": "src/components/color-palette/component/color-palette-component.ts"
           }
-        }
-      ]
-    },
-    {
-      "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",
+          "kind": "custom-element-definition",
+          "name": "color-palette-component",
           "declaration": {
-            "name": "n",
-            "module": "dist/components/color-palette/menu/color-palette-reorder.styles.js"
+            "name": "ColorPaletteComponent",
+            "module": "src/components/color-palette/component/color-palette-component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/component/color-palette-component.styles.ts",
+      "path": "src/components/color-palette/editor/color-palette-editor.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/color-palette-editor.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/component/color-palette-component.ts",
+      "path": "src/components/color-palette/editor/color-palette-editor.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "color-palette components combined.",
-          "name": "ColorPaletteComponent",
-          "members": [
+          "description": "An editor which can assist in modifying new or existing color palettes.",
+          "name": "ColorPaletteEditor",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "palette",
               "type": {
-                "text": "ColorPalette"
+                "text": "<color>"
               },
-              "privacy": "public",
-              "description": "The color palette."
-            },
+              "description": "The call to action background color.",
+              "name": "--cta-background"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "absolute",
+              "name": "palette",
               "type": {
-                "text": "AbsoluteContainer"
+                "text": "HTMLDivElement"
               },
               "privacy": "public",
-              "description": "The color-palette-editor wrapper."
+              "description": "The wrapper element."
             },
             {
               "kind": "field",
@@ -5802,7 +5943,7 @@
               },
               "privacy": "public",
               "default": "[]",
-              "description": "The palette colors.",
+              "description": "The palette colors to be edited.",
               "attribute": "colors"
             },
             {
@@ -5813,127 +5954,282 @@
               },
               "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.",
+              "description": "The palette settings to be edited.",
               "attribute": "settings"
             },
             {
               "kind": "field",
-              "name": "editMode",
+              "name": "selectedInput",
               "type": {
-                "text": "boolean"
+                "text": "SelectedInput"
               },
               "privacy": "public",
-              "default": "false",
-              "description": "Whether the palette is in edit mode.",
-              "attribute": "editMode"
+              "description": "The editing input that will be used.",
+              "attribute": "selectedInput",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isMobile",
+              "name": "combination",
               "type": {
-                "text": "boolean"
+                "text": "Combination"
               },
-              "privacy": "protected",
-              "default": "false",
-              "description": "Whether the screen is mobile sized."
+              "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": "ColorPaletteEditor",
+          "declaration": {
+            "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/editor/settings-item.styles.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "src/components/color-palette/editor/settings-item.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/color-palette/editor/settings-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The settings item using inside of the editor.",
+          "name": "SettingItem",
+          "slots": [
+            {
+              "description": "The setting.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "description": "The name of the setting.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "description",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "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"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/editor/color-palette-editor.styles.ts",
+      "path": "src/components/color-palette/menu/color-palette-menu.styles.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/components/color-palette/editor/color-palette-editor.styles.ts"
+            "module": "src/components/color-palette/menu/color-palette-menu.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/editor/color-palette-editor.ts",
+      "path": "src/components/color-palette/menu/color-palette-menu.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"
-            }
-          ],
+          "description": "A context menu for color-palette.",
+          "name": "ColorPaletteMenu",
           "members": [
             {
               "kind": "field",
-              "name": "palette",
+              "name": "absolute",
               "type": {
-                "text": "HTMLDivElement"
+                "text": "AbsoluteContainer"
               },
               "privacy": "public",
-              "description": "The wrapper element."
+              "description": "The absolute-container wrapping the menu."
             },
             {
               "kind": "field",
@@ -5943,50 +6239,49 @@
               },
               "privacy": "public",
               "default": "[]",
-              "description": "The palette colors to be edited.",
+              "description": "The settings palette colors.",
               "attribute": "colors"
             },
             {
               "kind": "field",
               "name": "settings",
               "type": {
-                "text": "PaletteSettings"
+                "text": "Partial<PaletteSettings> | undefined"
               },
               "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.",
+              "description": "The selected palette settings.",
               "attribute": "settings"
             },
             {
               "kind": "field",
-              "name": "selectedInput",
+              "name": "editMode",
               "type": {
-                "text": "SelectedInput"
+                "text": "Boolean"
               },
               "privacy": "public",
-              "description": "The editing input that will be used.",
-              "attribute": "selectedInput",
-              "reflects": true
+              "default": "false",
+              "description": "The selected palette edit mode status.",
+              "attribute": "editMode"
             },
             {
               "kind": "field",
-              "name": "combination",
+              "name": "copyFormat",
               "type": {
-                "text": "Combination"
+                "text": "CopyFormat"
               },
               "privacy": "public",
-              "description": "The color theory combination used when generating colors.",
-              "attribute": "combination"
+              "description": "Determines if copying takes the raw value or just the colors.",
+              "attribute": "copyFormat"
             },
             {
               "kind": "field",
-              "name": "baseColor",
+              "name": "reorder",
               "type": {
-                "text": "ReturnType<typeof colorsea> | undefined"
+                "text": "boolean"
               },
-              "privacy": "public",
-              "description": "The base color used when generating colors.",
-              "attribute": "baseColor"
+              "privacy": "protected",
+              "default": "false",
+              "description": "Whether reorder state is active."
             },
             {
               "kind": "field",
@@ -6000,33 +6295,15 @@
             },
             {
               "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."
+              "name": "menuItems",
+              "privacy": "protected",
+              "description": "Renders the menu items."
             },
             {
               "kind": "method",
-              "name": "urlOption",
-              "privacy": "private",
-              "description": "Renders the URL option."
+              "name": "reorderItems",
+              "privacy": "protected",
+              "description": "Renders the reorder items."
             }
           ],
           "attributes": [
@@ -6036,165 +6313,164 @@
                 "text": "string[]"
               },
               "default": "[]",
-              "description": "The palette colors to be edited.",
+              "description": "The settings palette colors.",
               "fieldName": "colors"
             },
             {
               "name": "settings",
               "type": {
-                "text": "PaletteSettings"
+                "text": "Partial<PaletteSettings> | undefined"
               },
-              "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.",
+              "description": "The selected palette settings.",
               "fieldName": "settings"
             },
             {
-              "name": "selectedInput",
-              "type": {
-                "text": "SelectedInput"
-              },
-              "description": "The editing input that will be used.",
-              "fieldName": "selectedInput"
-            },
-            {
-              "name": "combination",
+              "name": "editMode",
               "type": {
-                "text": "Combination"
+                "text": "Boolean"
               },
-              "description": "The color theory combination used when generating colors.",
-              "fieldName": "combination"
+              "default": "false",
+              "description": "The selected palette edit mode status.",
+              "fieldName": "editMode"
             },
             {
-              "name": "baseColor",
+              "name": "copyFormat",
               "type": {
-                "text": "ReturnType<typeof colorsea> | undefined"
+                "text": "CopyFormat"
               },
-              "description": "The base color used when generating colors.",
-              "fieldName": "baseColor"
+              "description": "Determines if copying takes the raw value or just the colors.",
+              "fieldName": "copyFormat"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "color-palette-editor",
+          "tagName": "color-palette-menu",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorPaletteEditor",
+          "name": "ColorPaletteMenu",
           "declaration": {
-            "name": "ColorPaletteEditor",
-            "module": "src/components/color-palette/editor/color-palette-editor.ts"
+            "name": "ColorPaletteMenu",
+            "module": "src/components/color-palette/menu/color-palette-menu.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "color-palette-editor",
+          "name": "color-palette-menu",
           "declaration": {
-            "name": "ColorPaletteEditor",
-            "module": "src/components/color-palette/editor/color-palette-editor.ts"
+            "name": "ColorPaletteMenu",
+            "module": "src/components/color-palette/menu/color-palette-menu.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/editor/settings-item.styles.ts",
+      "path": "src/components/color-palette/menu/color-palette-reorder.styles.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/components/color-palette/editor/settings-item.styles.ts"
+            "module": "src/components/color-palette/menu/color-palette-reorder.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/color-palette/editor/settings-item.ts",
+      "path": "src/components/color-palette/menu/color-palette-reorder.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "The settings item using inside of the editor.",
-          "name": "SettingItem",
-          "slots": [
-            {
-              "description": "The setting.",
-              "name": ""
-            }
-          ],
+          "description": "A companion UI to color-palette-menu for when the client selects reorder.",
+          "name": "ColorPaletteReorder",
           "members": [
             {
               "kind": "field",
-              "name": "name",
+              "name": "absolute",
               "type": {
-                "text": "string"
+                "text": "AbsoluteContainer"
               },
               "privacy": "public",
-              "default": "''",
-              "description": "The name of the setting.",
-              "attribute": "name"
+              "description": "The absolute container wrapping the reorder component."
             },
             {
               "kind": "field",
-              "name": "description",
+              "name": "colors",
               "type": {
-                "text": "string"
+                "text": "string[]"
               },
               "privacy": "public",
-              "default": "''",
-              "description": "The description of the setting.",
-              "attribute": "description"
-            }
-          ],
-          "attributes": [
+              "default": "[]",
+              "description": "The colors that can be reordered.",
+              "attribute": "colors"
+            },
             {
-              "name": "name",
+              "kind": "field",
+              "name": "emitter",
               "type": {
-                "text": "string"
+                "text": "EventEmitter<EventMap>"
               },
-              "default": "''",
-              "description": "The name of the setting.",
-              "fieldName": "name"
+              "privacy": "public",
+              "default": "new EventEmitter<EventMap>()",
+              "description": "Public way to subscribe to events."
             },
             {
-              "name": "description",
+              "kind": "method",
+              "name": "selectOption",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "Reorder"
+                  }
+                }
+              ],
+              "description": "Reorders the palette colors based on the selected option."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "colors",
               "type": {
-                "text": "string"
+                "text": "string[]"
               },
-              "default": "''",
-              "description": "The description of the setting.",
-              "fieldName": "description"
+              "default": "[]",
+              "description": "The colors that can be reordered.",
+              "fieldName": "colors"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "setting-item",
+          "tagName": "color-palette-reorder",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SettingItem",
+          "name": "ColorPaletteReorder",
           "declaration": {
-            "name": "SettingItem",
-            "module": "src/components/color-palette/editor/settings-item.ts"
+            "name": "ColorPaletteReorder",
+            "module": "src/components/color-palette/menu/color-palette-reorder.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "setting-item",
+          "name": "color-palette-reorder",
           "declaration": {
-            "name": "SettingItem",
-            "module": "src/components/color-palette/editor/settings-item.ts"
+            "name": "ColorPaletteReorder",
+            "module": "src/components/color-palette/menu/color-palette-reorder.ts"
           }
         }
       ]
@@ -6633,308 +6909,100 @@
               "name": "color",
               "type": {
                 "text": "string"
-              },
-              "privacy": "public",
-              "default": "''",
-              "description": "The color the item will display.",
-              "attribute": "color"
-            },
-            {
-              "kind": "field",
-              "name": "alias",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "''",
-              "description": "The alias for the color.",
-              "attribute": "alias"
-            },
-            {
-              "kind": "field",
-              "name": "aliasMode",
-              "type": {
-                "text": "AliasMode"
-              },
-              "privacy": "public",
-              "description": "How the alias will display.",
-              "attribute": "aliasMode"
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "Direction"
-              },
-              "privacy": "public",
-              "description": "The direction the palette wants the item to display.",
-              "attribute": "direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "editMode",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the item is being edited.",
-              "attribute": "editMode",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "height",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "public",
-              "description": "The height of the item.",
-              "attribute": "height"
-            },
-            {
-              "kind": "field",
-              "name": "preventHover",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether hovering over the item is permitted.",
-              "attribute": "preventHover",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "hideText",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the text on the item is hidden.",
-              "attribute": "hideText",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "colorCount",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "public",
-              "default": "0",
-              "description": "The total number of colors the palette expects.",
-              "attribute": "colorCount"
-            },
-            {
-              "kind": "field",
-              "name": "emitter",
-              "type": {
-                "text": "EventEmitter<EventMap>"
-              },
-              "privacy": "public",
-              "default": "new EventEmitter<EventMap>()",
-              "description": "Public way to subscribe to events."
-            },
-            {
-              "kind": "method",
-              "name": "content",
-              "privacy": "protected",
-              "description": "Renders the content"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The color the item will display.",
-              "fieldName": "color"
-            },
-            {
-              "name": "alias",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The alias for the color.",
-              "fieldName": "alias"
-            },
-            {
-              "name": "aliasMode",
-              "type": {
-                "text": "AliasMode"
-              },
-              "description": "How the alias will display.",
-              "fieldName": "aliasMode"
-            },
-            {
-              "name": "direction",
-              "type": {
-                "text": "Direction"
-              },
-              "description": "The direction the palette wants the item to display.",
-              "fieldName": "direction"
-            },
-            {
-              "name": "editMode",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the item is being edited.",
-              "fieldName": "editMode"
-            },
-            {
-              "name": "height",
-              "type": {
-                "text": "number"
-              },
-              "description": "The height of the item.",
-              "fieldName": "height"
-            },
-            {
-              "name": "preventHover",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether hovering over the item is permitted.",
-              "fieldName": "preventHover"
-            },
-            {
-              "name": "hideText",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the text on the item is hidden.",
-              "fieldName": "hideText"
-            },
-            {
-              "name": "colorCount",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The total number of colors the palette expects.",
-              "fieldName": "colorCount"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "color-palette-item",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ColorPaletteItem",
-          "declaration": {
-            "name": "ColorPaletteItem",
-            "module": "src/components/color-palette/item/color-palette-item.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "color-palette-item",
-          "declaration": {
-            "name": "ColorPaletteItem",
-            "module": "src/components/color-palette/item/color-palette-item.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/color-palette/menu/color-palette-menu.styles.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/components/color-palette/menu/color-palette-menu.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/color-palette/menu/color-palette-menu.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A context menu for color-palette.",
-          "name": "ColorPaletteMenu",
-          "members": [
+              },
+              "privacy": "public",
+              "default": "''",
+              "description": "The color the item will display.",
+              "attribute": "color"
+            },
             {
               "kind": "field",
-              "name": "absolute",
+              "name": "alias",
               "type": {
-                "text": "AbsoluteContainer"
+                "text": "string"
               },
               "privacy": "public",
-              "description": "The absolute-container wrapping the menu."
+              "default": "''",
+              "description": "The alias for the color.",
+              "attribute": "alias"
             },
             {
               "kind": "field",
-              "name": "colors",
+              "name": "aliasMode",
               "type": {
-                "text": "string[]"
+                "text": "AliasMode"
               },
               "privacy": "public",
-              "default": "[]",
-              "description": "The settings palette colors.",
-              "attribute": "colors"
+              "description": "How the alias will display.",
+              "attribute": "aliasMode"
             },
             {
               "kind": "field",
-              "name": "settings",
+              "name": "direction",
               "type": {
-                "text": "Partial<PaletteSettings> | undefined"
+                "text": "Direction"
               },
               "privacy": "public",
-              "description": "The selected palette settings.",
-              "attribute": "settings"
+              "description": "The direction the palette wants the item to display.",
+              "attribute": "direction",
+              "reflects": true
             },
             {
               "kind": "field",
               "name": "editMode",
               "type": {
-                "text": "Boolean"
+                "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "The selected palette edit mode status.",
-              "attribute": "editMode"
+              "description": "Whether the item is being edited.",
+              "attribute": "editMode",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "copyFormat",
+              "name": "height",
               "type": {
-                "text": "CopyFormat"
+                "text": "number"
               },
               "privacy": "public",
-              "description": "Determines if copying takes the raw value or just the colors.",
-              "attribute": "copyFormat"
+              "description": "The height of the item.",
+              "attribute": "height"
             },
             {
               "kind": "field",
-              "name": "reorder",
+              "name": "preventHover",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "protected",
+              "privacy": "public",
               "default": "false",
-              "description": "Whether reorder state is active."
+              "description": "Whether hovering over the item is permitted.",
+              "attribute": "preventHover",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hideText",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the text on the item is hidden.",
+              "attribute": "hideText",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "colorCount",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "default": "0",
+              "description": "The total number of colors the palette expects.",
+              "attribute": "colorCount"
             },
             {
               "kind": "field",
@@ -6948,182 +7016,114 @@
             },
             {
               "kind": "method",
-              "name": "menuItems",
-              "privacy": "protected",
-              "description": "Renders the menu items."
-            },
-            {
-              "kind": "method",
-              "name": "reorderItems",
+              "name": "content",
               "privacy": "protected",
-              "description": "Renders the reorder items."
+              "description": "Renders the content"
             }
           ],
           "attributes": [
             {
-              "name": "colors",
+              "name": "color",
               "type": {
-                "text": "string[]"
+                "text": "string"
               },
-              "default": "[]",
-              "description": "The settings palette colors.",
-              "fieldName": "colors"
+              "default": "''",
+              "description": "The color the item will display.",
+              "fieldName": "color"
             },
             {
-              "name": "settings",
+              "name": "alias",
               "type": {
-                "text": "Partial<PaletteSettings> | undefined"
+                "text": "string"
               },
-              "description": "The selected palette settings.",
-              "fieldName": "settings"
+              "default": "''",
+              "description": "The alias for the color.",
+              "fieldName": "alias"
             },
             {
-              "name": "editMode",
+              "name": "aliasMode",
               "type": {
-                "text": "Boolean"
+                "text": "AliasMode"
               },
-              "default": "false",
-              "description": "The selected palette edit mode status.",
-              "fieldName": "editMode"
+              "description": "How the alias will display.",
+              "fieldName": "aliasMode"
             },
             {
-              "name": "copyFormat",
+              "name": "direction",
               "type": {
-                "text": "CopyFormat"
+                "text": "Direction"
               },
-              "description": "Determines if copying takes the raw value or just the colors.",
-              "fieldName": "copyFormat"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "color-palette-menu",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ColorPaletteMenu",
-          "declaration": {
-            "name": "ColorPaletteMenu",
-            "module": "src/components/color-palette/menu/color-palette-menu.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "color-palette-menu",
-          "declaration": {
-            "name": "ColorPaletteMenu",
-            "module": "src/components/color-palette/menu/color-palette-menu.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/color-palette/menu/color-palette-reorder.styles.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/components/color-palette/menu/color-palette-reorder.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/color-palette/menu/color-palette-reorder.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A companion UI to color-palette-menu for when the client selects reorder.",
-          "name": "ColorPaletteReorder",
-          "members": [
+              "description": "The direction the palette wants the item to display.",
+              "fieldName": "direction"
+            },
             {
-              "kind": "field",
-              "name": "absolute",
+              "name": "editMode",
               "type": {
-                "text": "AbsoluteContainer"
+                "text": "boolean"
               },
-              "privacy": "public",
-              "description": "The absolute container wrapping the reorder component."
+              "default": "false",
+              "description": "Whether the item is being edited.",
+              "fieldName": "editMode"
             },
             {
-              "kind": "field",
-              "name": "colors",
+              "name": "height",
               "type": {
-                "text": "string[]"
+                "text": "number"
               },
-              "privacy": "public",
-              "default": "[]",
-              "description": "The colors that can be reordered.",
-              "attribute": "colors"
+              "description": "The height of the item.",
+              "fieldName": "height"
             },
             {
-              "kind": "field",
-              "name": "emitter",
+              "name": "preventHover",
               "type": {
-                "text": "EventEmitter<EventMap>"
+                "text": "boolean"
               },
-              "privacy": "public",
-              "default": "new EventEmitter<EventMap>()",
-              "description": "Public way to subscribe to events."
+              "default": "false",
+              "description": "Whether hovering over the item is permitted.",
+              "fieldName": "preventHover"
             },
             {
-              "kind": "method",
-              "name": "selectOption",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "item",
-                  "type": {
-                    "text": "Reorder"
-                  }
-                }
-              ],
-              "description": "Reorders the palette colors based on the selected option."
-            }
-          ],
-          "attributes": [
+              "name": "hideText",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the text on the item is hidden.",
+              "fieldName": "hideText"
+            },
             {
-              "name": "colors",
+              "name": "colorCount",
               "type": {
-                "text": "string[]"
+                "text": "number"
               },
-              "default": "[]",
-              "description": "The colors that can be reordered.",
-              "fieldName": "colors"
+              "default": "0",
+              "description": "The total number of colors the palette expects.",
+              "fieldName": "colorCount"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "color-palette-reorder",
+          "tagName": "color-palette-item",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorPaletteReorder",
+          "name": "ColorPaletteItem",
           "declaration": {
-            "name": "ColorPaletteReorder",
-            "module": "src/components/color-palette/menu/color-palette-reorder.ts"
+            "name": "ColorPaletteItem",
+            "module": "src/components/color-palette/item/color-palette-item.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "color-palette-reorder",
+          "name": "color-palette-item",
           "declaration": {
-            "name": "ColorPaletteReorder",
-            "module": "src/components/color-palette/menu/color-palette-reorder.ts"
+            "name": "ColorPaletteItem",
+            "module": "src/components/color-palette/item/color-palette-item.ts"
           }
         }
       ]