@alegendstale/holly-components 2.0.6 → 2.0.7

package/custom-elements.json

@@ -2,6 +2,37 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/decorators/condCustomElement.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "o",
+          "parameters": [
+            {
+              "name": "t"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "condCustomElement",
+          "declaration": {
+            "name": "o",
+            "module": "dist/decorators/condCustomElement.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/utils/basicUtils.js",
@@ -565,31 +596,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/decorators/condCustomElement.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "o",
-          "parameters": [
-            {
-              "name": "t"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "condCustomElement",
-          "declaration": {
-            "name": "o",
-            "module": "dist/decorators/condCustomElement.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/decorators/condCustomElement.ts",
@@ -1575,48 +1581,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/draw-svg/draw-svg.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "i",
-          "default": "class extends l { constructor() { super(...arguments), this.isIntersecting = !1, this.intersectionObserver = new IntersectionObserver(([s]) => { this.isIntersecting = s.isIntersecting, this.emitter.emit(\"intersection\", s.isIntersecting); }), this.emitter = new m(); } svgClasses() { return super.svgClasses(), { animation: this.isIntersecting }; } connectedCallback() { super.connectedCallback(), this.intersectionObserver.observe(this); } disconnectedCallback() { super.disconnectedCallback(), this.intersectionObserver.disconnect(); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DrawSvg",
-          "declaration": {
-            "name": "i",
-            "module": "dist/components/draw-svg/draw-svg.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/draw-svg/draw-svg.styles.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "e",
-          "default": "t` :host { stroke: white; fill: white; } /* Override responsive-svg path fill */ :host(:not([svgColors])) path { fill: transparent; } path { stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: 1000; } .animation { path { animation: textAnimation 2s ease-in-out 1 forwards; will-change: fill, stroke-width, stroke-dashoffset; } } @keyframes textAnimation { 0% { stroke-dashoffset: 1000; } 60% { fill: transparent; } 100% { fill: inherit; stroke-dashoffset: 0; stroke-width: 1; } } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "e",
-            "module": "dist/components/draw-svg/draw-svg.styles.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/components/color-palette/color-palette-utils.js",
@@ -1915,6 +1879,48 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/draw-svg/draw-svg.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "i",
+          "default": "class extends l { constructor() { super(...arguments), this.isIntersecting = !1, this.intersectionObserver = new IntersectionObserver(([s]) => { this.isIntersecting = s.isIntersecting, this.emitter.emit(\"intersection\", s.isIntersecting); }), this.emitter = new m(); } svgClasses() { return super.svgClasses(), { animation: this.isIntersecting }; } connectedCallback() { super.connectedCallback(), this.intersectionObserver.observe(this); } disconnectedCallback() { super.disconnectedCallback(), this.intersectionObserver.disconnect(); } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DrawSvg",
+          "declaration": {
+            "name": "i",
+            "module": "dist/components/draw-svg/draw-svg.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/draw-svg/draw-svg.styles.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "e",
+          "default": "t` :host { stroke: white; fill: white; } /* Override responsive-svg path fill */ :host(:not([svgColors])) path { fill: transparent; } path { stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: 1000; } .animation { path { animation: textAnimation 2s ease-in-out 1 forwards; will-change: fill, stroke-width, stroke-dashoffset; } } @keyframes textAnimation { 0% { stroke-dashoffset: 1000; } 60% { fill: transparent; } 100% { fill: inherit; stroke-dashoffset: 0; stroke-width: 1; } } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "e",
+            "module": "dist/components/draw-svg/draw-svg.styles.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/components/tool-tip/tool-tip.js",
@@ -1975,289 +1981,145 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/absolute-container/absolute-container.styles.ts",
+      "path": "src/components/bottom-sheet/bottom-sheet.styles.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "module": "src/components/absolute-container/absolute-container.styles.ts"
+            "module": "src/components/bottom-sheet/bottom-sheet.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/absolute-container/absolute-container.ts",
+      "path": "src/components/bottom-sheet/bottom-sheet.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A container component which can serve as a modal or popup wrapper.",
-          "name": "AbsoluteContainer",
+          "description": "A container component primarily for mobile devices which slides up and down from the bottom of the screen.",
+          "name": "BottomSheet",
+          "cssProperties": [
+            {
+              "type": {
+                "text": "<length> (dvh)"
+              },
+              "description": "The height of the sheet.",
+              "name": "--height"
+            }
+          ],
           "members": [
             {
               "kind": "field",
               "name": "open",
-              "description": "Whether the container is open (visible) or not.",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "public",
               "default": "false",
+              "description": "Whether the sheet is open or closed.",
               "attribute": "open",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "emitter",
+              "name": "nonmodal",
               "type": {
-                "text": "EventEmitter<EventMap>"
+                "text": "boolean"
               },
               "privacy": "public",
-              "default": "new EventEmitter<EventMap>()",
-              "description": "Public way to subscribe to events."
+              "default": "false",
+              "description": "Whether the sheet is nonmodal.",
+              "attribute": "nonmodal",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disableContextEvent",
+              "name": "dragging",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "Disables the ContextEvent (right click, or long touch)\r\nUseful for context menus",
-              "attribute": "disableContextEvent",
+              "description": "Whether the sheet can be dragged.",
+              "attribute": "dragging",
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "toggle",
+              "kind": "field",
+              "name": "scrolling",
+              "type": {
+                "text": "boolean"
+              },
               "privacy": "public",
-              "description": "Toggle whether container is open."
+              "default": "false",
+              "description": "Whether the sheet can be scrolled.",
+              "attribute": "scrolling",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "setOpen",
+              "kind": "field",
+              "name": "snapPoints",
+              "type": {
+                "text": "number[]"
+              },
               "privacy": "public",
-              "parameters": [
-                {
-                  "name": "val",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ],
-              "description": "Set whether the container is open."
+              "default": "[]",
+              "description": "An array of percentages that the sheet will stop at or be drawn to after being released.",
+              "attribute": "snapPoints"
             },
             {
-              "kind": "method",
-              "name": "setPosition",
+              "kind": "field",
+              "name": "defaultSnap",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "default": "NaN",
+              "description": "The default percentage that the sheet will open to.",
+              "attribute": "defaultSnap"
+            },
+            {
+              "kind": "field",
+              "name": "height",
+              "description": "Sets the height of the sheet.\r\nInfinity can be used to fit content automatically.",
+              "type": {
+                "text": "number"
+              },
+              "default": "fit-content",
+              "attribute": "height",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "emitter",
+              "type": {
+                "text": "EventEmitter<EventMap>"
+              },
               "privacy": "public",
+              "default": "new EventEmitter<EventMap>()",
+              "description": "Public way to subscribe to events."
+            },
+            {
+              "kind": "method",
+              "name": "closestSnapPointIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
               "parameters": [
                 {
-                  "name": "left",
+                  "name": "snapPoints",
                   "type": {
-                    "text": "number"
+                    "text": "number[]"
                   }
                 },
                 {
-                  "name": "top",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ],
-              "description": "Set the x and y position of the container."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "open",
-              "description": "Whether the container is open (visible) or not.",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "open"
-            },
-            {
-              "name": "disableContextEvent",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the ContextEvent (right click, or long touch)\r\nUseful for context menus",
-              "fieldName": "disableContextEvent"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "absolute-container",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "AbsoluteContainer",
-          "declaration": {
-            "name": "AbsoluteContainer",
-            "module": "src/components/absolute-container/absolute-container.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "absolute-container",
-          "declaration": {
-            "name": "AbsoluteContainer",
-            "module": "src/components/absolute-container/absolute-container.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/bottom-sheet/bottom-sheet.styles.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/components/bottom-sheet/bottom-sheet.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/bottom-sheet/bottom-sheet.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A container component primarily for mobile devices which slides up and down from the bottom of the screen.",
-          "name": "BottomSheet",
-          "cssProperties": [
-            {
-              "type": {
-                "text": "<length> (dvh)"
-              },
-              "description": "The height of the sheet.",
-              "name": "--height"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the sheet is open or closed.",
-              "attribute": "open",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "nonmodal",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the sheet is nonmodal.",
-              "attribute": "nonmodal",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dragging",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the sheet can be dragged.",
-              "attribute": "dragging",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "scrolling",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the sheet can be scrolled.",
-              "attribute": "scrolling",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "snapPoints",
-              "type": {
-                "text": "number[]"
-              },
-              "privacy": "public",
-              "default": "[]",
-              "description": "An array of percentages that the sheet will stop at or be drawn to after being released.",
-              "attribute": "snapPoints"
-            },
-            {
-              "kind": "field",
-              "name": "defaultSnap",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "public",
-              "default": "NaN",
-              "description": "The default percentage that the sheet will open to.",
-              "attribute": "defaultSnap"
-            },
-            {
-              "kind": "field",
-              "name": "height",
-              "description": "Sets the height of the sheet.\r\nInfinity can be used to fit content automatically.",
-              "type": {
-                "text": "number"
-              },
-              "default": "fit-content",
-              "attribute": "height",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "emitter",
-              "type": {
-                "text": "EventEmitter<EventMap>"
-              },
-              "privacy": "public",
-              "default": "new EventEmitter<EventMap>()",
-              "description": "Public way to subscribe to events."
-            },
-            {
-              "kind": "method",
-              "name": "closestSnapPointIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "snapPoints",
-                  "type": {
-                    "text": "number[]"
-                  }
-                },
-                {
-                  "name": "target",
+                  "name": "target",
                   "type": {
                     "text": "number"
                   }
@@ -2512,38 +2374,301 @@
               "fieldName": "defaultSnap"
             },
             {
-              "name": "height",
-              "description": "Sets the height of the sheet.\r\nInfinity can be used to fit content automatically.",
-              "type": {
-                "text": "number"
-              },
-              "default": "fit-content",
-              "fieldName": "height"
+              "name": "height",
+              "description": "Sets the height of the sheet.\r\nInfinity can be used to fit content automatically.",
+              "type": {
+                "text": "number"
+              },
+              "default": "fit-content",
+              "fieldName": "height"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "bottom-sheet",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BottomSheet",
+          "declaration": {
+            "name": "BottomSheet",
+            "module": "src/components/bottom-sheet/bottom-sheet.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bottom-sheet",
+          "declaration": {
+            "name": "BottomSheet",
+            "module": "src/components/bottom-sheet/bottom-sheet.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/absolute-container/absolute-container.styles.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "src/components/absolute-container/absolute-container.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/absolute-container/absolute-container.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A container component which can serve as a modal or popup wrapper.",
+          "name": "AbsoluteContainer",
+          "members": [
+            {
+              "kind": "field",
+              "name": "open",
+              "description": "Whether the container is open (visible) or not.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "emitter",
+              "type": {
+                "text": "EventEmitter<EventMap>"
+              },
+              "privacy": "public",
+              "default": "new EventEmitter<EventMap>()",
+              "description": "Public way to subscribe to events."
+            },
+            {
+              "kind": "field",
+              "name": "disableContextEvent",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Disables the ContextEvent (right click, or long touch)\r\nUseful for context menus",
+              "attribute": "disableContextEvent",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "toggle",
+              "privacy": "public",
+              "description": "Toggle whether container is open."
+            },
+            {
+              "kind": "method",
+              "name": "setOpen",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "val",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Set whether the container is open."
+            },
+            {
+              "kind": "method",
+              "name": "setPosition",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "left",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "top",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Set the x and y position of the container."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Whether the container is open (visible) or not.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "open"
+            },
+            {
+              "name": "disableContextEvent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the ContextEvent (right click, or long touch)\r\nUseful for context menus",
+              "fieldName": "disableContextEvent"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "absolute-container",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AbsoluteContainer",
+          "declaration": {
+            "name": "AbsoluteContainer",
+            "module": "src/components/absolute-container/absolute-container.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "absolute-container",
+          "declaration": {
+            "name": "AbsoluteContainer",
+            "module": "src/components/absolute-container/absolute-container.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/carousel-scroller/carousel-scroller.styles.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "src/components/carousel-scroller/carousel-scroller.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/carousel-scroller/carousel-scroller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A carousel which can have any number of slides, and rotates circularly.",
+          "name": "CarouselScroller",
+          "cssProperties": [
+            {
+              "type": {
+                "text": "<length>"
+              },
+              "description": "The size of the scroller padding.",
+              "name": "--padding"
+            },
+            {
+              "type": {
+                "text": "<length>"
+              },
+              "description": "The size of the scroller margin.",
+              "name": "--margin"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "slotEl",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "protected",
+              "description": "The items that will be used as slides."
+            },
+            {
+              "kind": "field",
+              "name": "slotChildren",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "privacy": "protected",
+              "default": "[]",
+              "description": "The slides being used."
+            },
+            {
+              "kind": "field",
+              "name": "emitter",
+              "type": {
+                "text": "EventEmitter<EventMap>"
+              },
+              "privacy": "public",
+              "default": "new EventEmitter<EventMap>()",
+              "description": "Public way to subscribe to events."
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentSlide",
+              "privacy": "public",
+              "description": "Gets the current slide.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "scrollToPrevSlide",
+              "privacy": "public",
+              "description": "Scrolls to the slide before the current slide."
+            },
+            {
+              "kind": "method",
+              "name": "scrollToNextSlide",
+              "privacy": "public",
+              "description": "Scrolls to the slide after the current slide."
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "bottom-sheet",
+          "tagName": "carousel-scroller",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BottomSheet",
+          "name": "CarouselScroller",
           "declaration": {
-            "name": "BottomSheet",
-            "module": "src/components/bottom-sheet/bottom-sheet.ts"
+            "name": "CarouselScroller",
+            "module": "src/components/carousel-scroller/carousel-scroller.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bottom-sheet",
+          "name": "carousel-scroller",
           "declaration": {
-            "name": "BottomSheet",
-            "module": "src/components/bottom-sheet/bottom-sheet.ts"
+            "name": "CarouselScroller",
+            "module": "src/components/carousel-scroller/carousel-scroller.ts"
           }
         }
       ]
@@ -3150,125 +3275,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/carousel-scroller/carousel-scroller.styles.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "module": "src/components/carousel-scroller/carousel-scroller.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/carousel-scroller/carousel-scroller.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A carousel which can have any number of slides, and rotates circularly.",
-          "name": "CarouselScroller",
-          "cssProperties": [
-            {
-              "type": {
-                "text": "<length>"
-              },
-              "description": "The size of the scroller padding.",
-              "name": "--padding"
-            },
-            {
-              "type": {
-                "text": "<length>"
-              },
-              "description": "The size of the scroller margin.",
-              "name": "--margin"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "slotEl",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "privacy": "protected",
-              "description": "The items that will be used as slides."
-            },
-            {
-              "kind": "field",
-              "name": "slotChildren",
-              "type": {
-                "text": "HTMLElement[]"
-              },
-              "privacy": "protected",
-              "default": "[]",
-              "description": "The slides being used."
-            },
-            {
-              "kind": "field",
-              "name": "emitter",
-              "type": {
-                "text": "EventEmitter<EventMap>"
-              },
-              "privacy": "public",
-              "default": "new EventEmitter<EventMap>()",
-              "description": "Public way to subscribe to events."
-            },
-            {
-              "kind": "method",
-              "name": "getCurrentSlide",
-              "privacy": "public",
-              "description": "Gets the current slide.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "scrollToPrevSlide",
-              "privacy": "public",
-              "description": "Scrolls to the slide before the current slide."
-            },
-            {
-              "kind": "method",
-              "name": "scrollToNextSlide",
-              "privacy": "public",
-              "description": "Scrolls to the slide after the current slide."
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "carousel-scroller",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "CarouselScroller",
-          "declaration": {
-            "name": "CarouselScroller",
-            "module": "src/components/carousel-scroller/carousel-scroller.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "carousel-scroller",
-          "declaration": {
-            "name": "CarouselScroller",
-            "module": "src/components/carousel-scroller/carousel-scroller.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/color-palette/color-palette-utils.ts",
@@ -4725,33 +4731,45 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/menu/color-palette-menu.js",
+      "path": "dist/components/color-palette/editor/color-palette-editor.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> `; } }"
+          "name": "X"
+        },
+        {
+          "kind": "variable",
+          "name": "a",
+          "default": "class extends x { constructor() { super(...arguments), this.colors = [], this.settings = { height: u.height, width: u.width, direction: u.direction, gradient: u.gradient, preventHover: u.preventHover, hideText: u.hideText, override: u.override, aliases: [] }, this.selectedInput = \"Color Picker\", this.combination = f.Random, this.colorPickerDisabled = !1, this.emitter = new A(); } disconnectedCallback() { this.emitter.clear(); } render() { const t = () => { switch (this.selectedInput) { case \"Color Picker\": return this.pickerOption(); case \"Generate\": return this.generateOption(); case \"Image\": return this.imageOption(); case \"URL\": return this.urlOption(); } }, n = (s) => { s instanceof B && s.emitter.on(\"changed\", (o, r) => { this.colors = o, this.settings = r; }); }; return l` <div id=\"color-palette-editor\"> <h1>Editor</h1> <section id='colors'> <h3>Colors</h3> <div id=\"control-container\"> <button title=\"Color Picker\" @click=${() => this.selectedInput = \"Color Picker\"} > ${p(U)} </button> <button title=\"Generate\" @click=${() => this.selectedInput = \"Generate\"} > ${p(C)} </button> <button title=\"Image\" @click=${() => this.selectedInput = \"Image\"} > ${p(O)} </button> <button title=\"URL\" @click=${() => this.selectedInput = \"URL\"} > ${p(R)} </button> </div> <div id='colors-container'> ${t()} </div> </section> <section id='preview'> <color-palette .colors=${this.colors} height=${this.settings.height} width=${this.settings.width} direction=${this.settings.direction} ?gradient=${this.settings.gradient} ?preventHover=${this.settings.preventHover} ?hideText=${this.settings.hideText} ?override=${this.settings.override} .aliases=${this.settings.aliases} ?editMode=${!0} maxWidth=${560} ${m(n)} > </color-palette> </section> <section id='settings'> <h3>Settings</h3> ${this.renderSettings()} <button id='create-btn' @click=${() => { try { this.colors.length === 0 && (this.colors = L(f.Random).colors), this.emitter.emit(\"submit\", this.colors, this.settings); } catch { } }} > Create </button> </section> </div> `; } /** Renders the settings fields. */ renderSettings() { return l` <setting-item name='Height' > <input type='number' value=${this.settings.height} step=${5} @input=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, height: +t.target.value }); }} > </setting-item> <setting-item name='Width' description='Caution - Might cause palette to display incorrectly.' > <input type='number' value=${this.settings.width} step=${10} @input=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, width: +t.target.value }); }} > </setting-item> <setting-item name='Direction' > <select @change=${(t) => { t.target instanceof HTMLSelectElement && (this.settings = { ...this.settings, direction: t.target.value }); }} > ${Object.values(M).map((t) => l`<option ?selected=${this.settings.direction === t}>${t}</option>`)} </select> </setting-item> <setting-item name='Gradient' > <input type='checkbox' ?checked=${this.settings.gradient} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, gradient: t.target.checked }); }} > </setting-item> <setting-item name='Prevent Hover' description='Toggles whether palettes can be hovered' > <input type='checkbox' ?checked=${this.settings.preventHover} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, preventHover: t.target.checked }); }} > </setting-item> <setting-item name='Hide Text' description='Disables color and alias visibility' > <input type='checkbox' ?checked=${this.settings.hideText} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, hideText: t.target.checked }); }} > </setting-item> <setting-item name='Override' description='Disables color validation for full control (advanced)' > <input type='checkbox' ?checked=${this.settings.override} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, override: t.target.checked }); }} > </setting-item> `; } /** Renders the picker option. */ pickerOption() { return l` <setting-item name='Color Picker' description='Use handpicked colors' > <input type='color' @change=${(t) => { t.target instanceof HTMLInputElement && (this.colors = [...this.colors, t.target.value], this.settings.aliases.push(\"\")); }} > </setting-item> `; } /** Renders the generate option. */ generateOption() { return this.colorPickerDisabled = this.combination === f.Random, l` <setting-item name='Generate' description='Generate colors based on color theory' > <select @change=${(t) => { t.target instanceof HTMLSelectElement && (this.combination = t.target.value, this.colorPickerDisabled = this.combination === f.Random); }} > ${Object.values(f).map((t) => l`<option ?selected=${this.combination === t}>${t}</option>`)} </select> <input type='color' ?disabled=${this.colorPickerDisabled} @change=${(t) => { t.target instanceof HTMLInputElement && (this.baseColor = b(t.target.value)); }} @contextmenu=${(t) => { t.preventDefault(), t.target instanceof HTMLInputElement && (t.target.value = b(\"#000\").hex(), this.baseColor = void 0); }} > <button title='Loads the generated colors' @click=${(t) => { const n = L(this.combination, { baseColor: this.baseColor, settings: this.settings }); this.colors = n.colors, n.settings && (this.settings = n.settings); }} > ${p(C)} </button> </setting-item> `; } /** Renders the image option. */ imageOption() { let t = \"\", n = $(), s = $(), o = $(), r = n.value?.value || \"\", c, h = $(), I = (e) => { e instanceof w && (c = e, e.emitter.clear(), e.emitter.on(\"click\", async (i) => await j(i.toUpperCase(), S.Raw)), e.emitter.on(\"move\", (i) => { if (!h.value) return; let d = h.value; d.text = e.getCanvasHex(i.x, i.y).toUpperCase(), d.setClampedPosition(i, e.getBoundingClientRect()); })); }; const E = async () => { if (!s.value || !c) return; const e = s.value; return await c.getPalette(+e.value); }, y = async () => { const e = await E(); e && (this.colors = e.map((i) => b(i).hex(0)), this.settings.aliases = []); }, k = async (e) => { if (!URL.canParse(e) || !c) return; const i = c; i.imageURL = e, await y(); }; return l` <setting-item name='Image' description='Convert image into palette' > <input type='url' placeholder='Enter URL or select file' ${m(n)} > <button title='Right click to clear URL' @click=${async (e) => { try { if (!o.value) return; let i = o.value; if (r !== \"\") if (URL.canParse(r)) await k(r); else throw new Error(\"URL provided is not valid.\"); else i.click(); } catch { } }} @contextmenu=${(e) => { if (e.preventDefault(), !n.value) return; const i = n.value; i.value = \"\"; }} > ${p(D)} </button> <input type ='file' accept = 'image/*' @change=${(e) => { try { const i = new FileReader(), d = e.target.files?.[0]; d && i.readAsDataURL(d), i.addEventListener(\"load\", async () => { typeof i.result == \"string\" && (r = i.result, await k(r)); }), i.addEventListener(\"error\", () => { throw new Error(\"Error processing image\"); }); } catch { } }} ${m(o)} > </setting-item> <setting-item name='Count' description='Set the number of colors to generate from the image' > <input id='range-slider' type='range' min='4' max='12' value='8' @change=${async () => { await y(); }} ${m(s)} > </setting-item> <tool-tip trigger='hover' ${m(h)} > <canvas-image width=${this.palette.getBoundingClientRect().width} height=${this.palette.getBoundingClientRect().height} @mousemove=${(e) => { e.target instanceof w && (t = e.target.getCanvasHex(e.clientX, e.clientY)); }} @click=${(e) => { t && (this.colors = [...this.colors, t], this.settings.aliases = [...this.settings.aliases, \"\"]); }} ${m(I)} > </canvas-image> </tool-tip> `; } /** Renders the URL option. */ urlOption() { let t; return l` <setting-item name='URL' description='Only coolors.co & colorhunt.co are currently supported' > <input type='url' placeholder='Enter URL' @change=${(n) => { n.target instanceof HTMLInputElement && (t = n.target); }} > <button title='Right click to clear URL' @click=${(n) => { try { if (!t.value.match(G)) throw new Error(\"URL provided is not valid.\"); this.colors = _(t.value), this.settings.aliases = []; } catch { } }} @contextmenu=${(n) => { n.preventDefault(), t && (t.value = \"\"); }} > ${p(R)} </button> </setting-item> `; } }"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorPaletteMenu",
+          "name": "ColorPaletteEditor",
           "declaration": {
-            "name": "s",
-            "module": "dist/components/color-palette/menu/color-palette-menu.js"
+            "name": "a",
+            "module": "dist/components/color-palette/editor/color-palette-editor.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SelectedInput",
+          "declaration": {
+            "name": "X",
+            "module": "dist/components/color-palette/editor/color-palette-editor.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/menu/color-palette-menu.styles.js",
+      "path": "dist/components/color-palette/editor/color-palette-editor.styles.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "t",
-          "default": "r` :host { display: block; } menu { display: grid; grid-template-columns: 1fr; padding: 0.5rem; margin: 0; border-radius: 5px; color: rgb(245, 245, 245); background-color: #222222; } li { display: grid; grid-template-columns: subgrid; list-style: none; } button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: flex-start; column-gap: 0.5rem; background-color: inherit; color: inherit; border: none; cursor: pointer; padding: 4px 8px; text-wrap: nowrap; &:hover { background-color: #323232; } span { font-size: 14px; } } hr { width: 95%; border-color: rgb(45, 45, 45); } `"
+          "name": "r",
+          "default": "o` :host { display: block; contain: content; width: 560px; padding: 16px; background-color: rgb(27, 27, 27); color: rgba(245, 245, 245, 0.9); border-radius: 5px; --cta-background: hsl(262, 83%, 69%); } input[type='file'] { display: none; } :host([selectedInput='Color Picker']) { #color-palette-editor #colors { div:nth-of-type(1) { button[title='Color Picker'] { background-color: var(--cta-background); } } div:nth-of-type(2) { canvas { max-width: 100%; max-height: fit-content; object-fit: cover; } } } } :host([selectedInput='Generate']) { #color-palette-editor #colors div { button[title='Generate'] { background-color: var(--cta-background); } } } :host([selectedInput='Image']) { #color-palette-editor #colors div { button[title='Image'] { background-color: var(--cta-background); } } } :host([selectedInput='URL']) { #color-palette-editor #colors div { button[title='URL'] { background-color: var(--cta-background); } } } #color-palette-editor { display: flex; flex-direction: column; gap: 0.5rem; h1 { font-size: 2.25rem; } button { cursor: pointer; } #colors { div { input:not([type='color']) { color: rgb(245, 245, 245); background-color: rgb(38, 38, 38); border: none; border-radius: 5px; height: fit-content; width: fit-content; padding: 0.5rem; } select { color: rgb(245, 245, 245); background-color: rgb(38, 38, 38); border: none; border-radius: 5px; height: fit-content; width: fit-content; padding: 0.5rem; } button { color: rgb(245, 245, 245); background-color: rgb(38, 38, 38); border: none; border-radius: 5px; height: fit-content; width: fit-content; padding: 4px 12px; } } } #settings { display: flex; flex-direction: column; input { color: rgb(245, 245, 245); background-color: rgb(38, 38, 38); border: none; border-radius: 5px; height: fit-content; width: fit-content; padding: 0.5rem; } select { color: rgb(245, 245, 245); background-color: rgb(38, 38, 38); border: none; border-radius: 5px; height: fit-content; width: fit-content; padding: 0.5rem; } #create-btn { background-color: var(--cta-background); color: white; border-radius: 5px; padding: 4px 12px; user-select: none; border: none; width: fit-content; align-self: flex-end; &:hover { background-color: hsl(calc(262 - 3), calc(83% * 1.02), calc(69% * 1.15)); } } } } `"
         }
       ],
       "exports": [
@@ -4759,41 +4777,41 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "t",
-            "module": "dist/components/color-palette/menu/color-palette-menu.styles.js"
+            "name": "r",
+            "module": "dist/components/color-palette/editor/color-palette-editor.styles.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/menu/color-palette-reorder.js",
+      "path": "dist/components/color-palette/editor/settings-item.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); } }"
+          "name": "e",
+          "default": "class extends c { constructor() { super(...arguments), this.name = \"\", this.description = \"\"; } render() { return f` <div> <h3>${this.name}</h3> <p>${this.description}</p> </div> <slot></slot> `; } }"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ColorPaletteReorder",
+          "name": "SettingItem",
           "declaration": {
-            "name": "o",
-            "module": "dist/components/color-palette/menu/color-palette-reorder.js"
+            "name": "e",
+            "module": "dist/components/color-palette/editor/settings-item.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/menu/color-palette-reorder.styles.js",
+      "path": "dist/components/color-palette/editor/settings-item.styles.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "n",
-          "default": "o` :host { display: block; } menu { display: flex; flex-direction: column; gap: 0.5rem; background-color: rgb(27, 27, 27); padding: 0.5rem; border-radius: 5px; button { color: rgb(245, 245, 245); background-color: transparent; border: none; padding: 4px 12px; cursor: pointer; &:hover { background-color: rgb(75, 75, 75); } span { font-size: 14px; } } } `"
+          "name": "o",
+          "default": "t` :host { display: grid; grid-template-columns: 1fr 1fr; padding-block: 2%; } :host(:not([description])) p { display: none; } h3 { margin: 0; font-size: 15px; } p { margin: 0; padding-top: 4px; font-size: 12px; } slot { display: flex; justify-self: flex-end; align-items: center; gap: 5%; } ::slotted(input[type='color']) { border: none; } `"
         }
       ],
       "exports": [
@@ -4801,8 +4819,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "n",
-            "module": "dist/components/color-palette/menu/color-palette-reorder.styles.js"
+            "name": "o",
+            "module": "dist/components/color-palette/editor/settings-item.styles.js"
           }
         }
       ]
@@ -4893,45 +4911,33 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/editor/color-palette-editor.js",
+      "path": "dist/components/color-palette/menu/color-palette-menu.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "X"
-        },
-        {
-          "kind": "variable",
-          "name": "a",
-          "default": "class extends x { constructor() { super(...arguments), this.colors = [], this.settings = { height: u.height, width: u.width, direction: u.direction, gradient: u.gradient, preventHover: u.preventHover, hideText: u.hideText, override: u.override, aliases: [] }, this.selectedInput = \"Color Picker\", this.combination = f.Random, this.colorPickerDisabled = !1, this.emitter = new A(); } disconnectedCallback() { this.emitter.clear(); } render() { const t = () => { switch (this.selectedInput) { case \"Color Picker\": return this.pickerOption(); case \"Generate\": return this.generateOption(); case \"Image\": return this.imageOption(); case \"URL\": return this.urlOption(); } }, n = (s) => { s instanceof B && s.emitter.on(\"changed\", (o, r) => { this.colors = o, this.settings = r; }); }; return l` <div id=\"color-palette-editor\"> <h1>Editor</h1> <section id='colors'> <h3>Colors</h3> <div id=\"control-container\"> <button title=\"Color Picker\" @click=${() => this.selectedInput = \"Color Picker\"} > ${p(U)} </button> <button title=\"Generate\" @click=${() => this.selectedInput = \"Generate\"} > ${p(C)} </button> <button title=\"Image\" @click=${() => this.selectedInput = \"Image\"} > ${p(O)} </button> <button title=\"URL\" @click=${() => this.selectedInput = \"URL\"} > ${p(R)} </button> </div> <div id='colors-container'> ${t()} </div> </section> <section id='preview'> <color-palette .colors=${this.colors} height=${this.settings.height} width=${this.settings.width} direction=${this.settings.direction} ?gradient=${this.settings.gradient} ?preventHover=${this.settings.preventHover} ?hideText=${this.settings.hideText} ?override=${this.settings.override} .aliases=${this.settings.aliases} ?editMode=${!0} maxWidth=${560} ${m(n)} > </color-palette> </section> <section id='settings'> <h3>Settings</h3> ${this.renderSettings()} <button id='create-btn' @click=${() => { try { this.colors.length === 0 && (this.colors = L(f.Random).colors), this.emitter.emit(\"submit\", this.colors, this.settings); } catch { } }} > Create </button> </section> </div> `; } /** Renders the settings fields. */ renderSettings() { return l` <setting-item name='Height' > <input type='number' value=${this.settings.height} step=${5} @input=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, height: +t.target.value }); }} > </setting-item> <setting-item name='Width' description='Caution - Might cause palette to display incorrectly.' > <input type='number' value=${this.settings.width} step=${10} @input=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, width: +t.target.value }); }} > </setting-item> <setting-item name='Direction' > <select @change=${(t) => { t.target instanceof HTMLSelectElement && (this.settings = { ...this.settings, direction: t.target.value }); }} > ${Object.values(M).map((t) => l`<option ?selected=${this.settings.direction === t}>${t}</option>`)} </select> </setting-item> <setting-item name='Gradient' > <input type='checkbox' ?checked=${this.settings.gradient} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, gradient: t.target.checked }); }} > </setting-item> <setting-item name='Prevent Hover' description='Toggles whether palettes can be hovered' > <input type='checkbox' ?checked=${this.settings.preventHover} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, preventHover: t.target.checked }); }} > </setting-item> <setting-item name='Hide Text' description='Disables color and alias visibility' > <input type='checkbox' ?checked=${this.settings.hideText} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, hideText: t.target.checked }); }} > </setting-item> <setting-item name='Override' description='Disables color validation for full control (advanced)' > <input type='checkbox' ?checked=${this.settings.override} @change=${(t) => { t.target instanceof HTMLInputElement && (this.settings = { ...this.settings, override: t.target.checked }); }} > </setting-item> `; } /** Renders the picker option. */ pickerOption() { return l` <setting-item name='Color Picker' description='Use handpicked colors' > <input type='color' @change=${(t) => { t.target instanceof HTMLInputElement && (this.colors = [...this.colors, t.target.value], this.settings.aliases.push(\"\")); }} > </setting-item> `; } /** Renders the generate option. */ generateOption() { return this.colorPickerDisabled = this.combination === f.Random, l` <setting-item name='Generate' description='Generate colors based on color theory' > <select @change=${(t) => { t.target instanceof HTMLSelectElement && (this.combination = t.target.value, this.colorPickerDisabled = this.combination === f.Random); }} > ${Object.values(f).map((t) => l`<option ?selected=${this.combination === t}>${t}</option>`)} </select> <input type='color' ?disabled=${this.colorPickerDisabled} @change=${(t) => { t.target instanceof HTMLInputElement && (this.baseColor = b(t.target.value)); }} @contextmenu=${(t) => { t.preventDefault(), t.target instanceof HTMLInputElement && (t.target.value = b(\"#000\").hex(), this.baseColor = void 0); }} > <button title='Loads the generated colors' @click=${(t) => { const n = L(this.combination, { baseColor: this.baseColor, settings: this.settings }); this.colors = n.colors, n.settings && (this.settings = n.settings); }} > ${p(C)} </button> </setting-item> `; } /** Renders the image option. */ imageOption() { let t = \"\", n = $(), s = $(), o = $(), r = n.value?.value || \"\", c, h = $(), I = (e) => { e instanceof w && (c = e, e.emitter.clear(), e.emitter.on(\"click\", async (i) => await j(i.toUpperCase(), S.Raw)), e.emitter.on(\"move\", (i) => { if (!h.value) return; let d = h.value; d.text = e.getCanvasHex(i.x, i.y).toUpperCase(), d.setClampedPosition(i, e.getBoundingClientRect()); })); }; const E = async () => { if (!s.value || !c) return; const e = s.value; return await c.getPalette(+e.value); }, y = async () => { const e = await E(); e && (this.colors = e.map((i) => b(i).hex(0)), this.settings.aliases = []); }, k = async (e) => { if (!URL.canParse(e) || !c) return; const i = c; i.imageURL = e, await y(); }; return l` <setting-item name='Image' description='Convert image into palette' > <input type='url' placeholder='Enter URL or select file' ${m(n)} > <button title='Right click to clear URL' @click=${async (e) => { try { if (!o.value) return; let i = o.value; if (r !== \"\") if (URL.canParse(r)) await k(r); else throw new Error(\"URL provided is not valid.\"); else i.click(); } catch { } }} @contextmenu=${(e) => { if (e.preventDefault(), !n.value) return; const i = n.value; i.value = \"\"; }} > ${p(D)} </button> <input type ='file' accept = 'image/*' @change=${(e) => { try { const i = new FileReader(), d = e.target.files?.[0]; d && i.readAsDataURL(d), i.addEventListener(\"load\", async () => { typeof i.result == \"string\" && (r = i.result, await k(r)); }), i.addEventListener(\"error\", () => { throw new Error(\"Error processing image\"); }); } catch { } }} ${m(o)} > </setting-item> <setting-item name='Count' description='Set the number of colors to generate from the image' > <input id='range-slider' type='range' min='4' max='12' value='8' @change=${async () => { await y(); }} ${m(s)} > </setting-item> <tool-tip trigger='hover' ${m(h)} > <canvas-image width=${this.palette.getBoundingClientRect().width} height=${this.palette.getBoundingClientRect().height} @mousemove=${(e) => { e.target instanceof w && (t = e.target.getCanvasHex(e.clientX, e.clientY)); }} @click=${(e) => { t && (this.colors = [...this.colors, t], this.settings.aliases = [...this.settings.aliases, \"\"]); }} ${m(I)} > </canvas-image> </tool-tip> `; } /** Renders the URL option. */ urlOption() { let t; return l` <setting-item name='URL' description='Only coolors.co & colorhunt.co are currently supported' > <input type='url' placeholder='Enter URL' @change=${(n) => { n.target instanceof HTMLInputElement && (t = n.target); }} > <button title='Right click to clear URL' @click=${(n) => { try { if (!t.value.match(G)) throw new Error(\"URL provided is not valid.\"); this.colors = _(t.value), this.settings.aliases = []; } catch { } }} @contextmenu=${(n) => { n.preventDefault(), t && (t.value = \"\"); }} > ${p(R)} </button> </setting-item> `; } }"
+          "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": "ColorPaletteEditor",
-          "declaration": {
-            "name": "a",
-            "module": "dist/components/color-palette/editor/color-palette-editor.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SelectedInput",
+          "name": "ColorPaletteMenu",
           "declaration": {
-            "name": "X",
-            "module": "dist/components/color-palette/editor/color-palette-editor.js"
+            "name": "s",
+            "module": "dist/components/color-palette/menu/color-palette-menu.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/editor/color-palette-editor.styles.js",
+      "path": "dist/components/color-palette/menu/color-palette-menu.styles.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "r",
-          "default": "o` :host { display: block; contain: content; width: 560px; padding: 16px; background-color: rgb(27, 27, 27); color: rgba(245, 245, 245, 0.9); border-radius: 5px; --cta-background: hsl(262, 83%, 69%); } input[type='file'] { display: none; } :host([selectedInput='Color Picker']) { #color-palette-editor #colors { div:nth-of-type(1) { button[title='Color Picker'] { background-color: var(--cta-background); } } div:nth-of-type(2) { canvas { max-width: 100%; max-height: fit-content; object-fit: cover; } } } } :host([selectedInput='Generate']) { #color-palette-editor #colors div { button[title='Generate'] { background-color: var(--cta-background); } } } :host([selectedInput='Image']) { #color-palette-editor #colors div { button[title='Image'] { background-color: var(--cta-background); } } } :host([selectedInput='URL']) { #color-palette-editor #colors div { button[title='URL'] { background-color: var(--cta-background); } } } #color-palette-editor { display: flex; flex-direction: column; gap: 0.5rem; h1 { font-size: 2.25rem; } button { cursor: pointer; } #colors { div { input:not([type='color']) { color: rgb(245, 245, 245); background-color: rgb(38, 38, 38); border: none; border-radius: 5px; height: fit-content; width: fit-content; padding: 0.5rem; } select { color: rgb(245, 245, 245); background-color: rgb(38, 38, 38); border: none; border-radius: 5px; height: fit-content; width: fit-content; padding: 0.5rem; } button { color: rgb(245, 245, 245); background-color: rgb(38, 38, 38); border: none; border-radius: 5px; height: fit-content; width: fit-content; padding: 4px 12px; } } } #settings { display: flex; flex-direction: column; input { color: rgb(245, 245, 245); background-color: rgb(38, 38, 38); border: none; border-radius: 5px; height: fit-content; width: fit-content; padding: 0.5rem; } select { color: rgb(245, 245, 245); background-color: rgb(38, 38, 38); border: none; border-radius: 5px; height: fit-content; width: fit-content; padding: 0.5rem; } #create-btn { background-color: var(--cta-background); color: white; border-radius: 5px; padding: 4px 12px; user-select: none; border: none; width: fit-content; align-self: flex-end; &:hover { background-color: hsl(calc(262 - 3), calc(83% * 1.02), calc(69% * 1.15)); } } } } `"
+          "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": [
@@ -4939,41 +4945,41 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "r",
-            "module": "dist/components/color-palette/editor/color-palette-editor.styles.js"
+            "name": "t",
+            "module": "dist/components/color-palette/menu/color-palette-menu.styles.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/editor/settings-item.js",
+      "path": "dist/components/color-palette/menu/color-palette-reorder.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "e",
-          "default": "class extends c { constructor() { super(...arguments), this.name = \"\", this.description = \"\"; } render() { return f` <div> <h3>${this.name}</h3> <p>${this.description}</p> </div> <slot></slot> `; } }"
+          "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": "SettingItem",
+          "name": "ColorPaletteReorder",
           "declaration": {
-            "name": "e",
-            "module": "dist/components/color-palette/editor/settings-item.js"
+            "name": "o",
+            "module": "dist/components/color-palette/menu/color-palette-reorder.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/components/color-palette/editor/settings-item.styles.js",
+      "path": "dist/components/color-palette/menu/color-palette-reorder.styles.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "o",
-          "default": "t` :host { display: grid; grid-template-columns: 1fr 1fr; padding-block: 2%; } :host(:not([description])) p { display: none; } h3 { margin: 0; font-size: 15px; } p { margin: 0; padding-top: 4px; font-size: 12px; } slot { display: flex; justify-self: flex-end; align-items: center; gap: 5%; } ::slotted(input[type='color']) { border: none; } `"
+          "name": "n",
+          "default": "o` :host { display: block; } menu { display: flex; flex-direction: column; gap: 0.5rem; background-color: rgb(27, 27, 27); padding: 0.5rem; border-radius: 5px; button { color: rgb(245, 245, 245); background-color: transparent; border: none; padding: 4px 12px; cursor: pointer; &:hover { background-color: rgb(75, 75, 75); } span { font-size: 14px; } } } `"
         }
       ],
       "exports": [
@@ -4981,8 +4987,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "o",
-            "module": "dist/components/color-palette/editor/settings-item.styles.js"
+            "name": "n",
+            "module": "dist/components/color-palette/menu/color-palette-reorder.styles.js"
           }
         }
       ]

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}

package/dist/index.js

@@ -0,0 +1 @@
+

package/package.json

@@ -2,12 +2,13 @@
 	"private": false,
 	"name": "@alegendstale/holly-components",
 	"description": "Reusable UI components created using lit",
-	"version": "2.0.6",
+	"version": "2.0.7",
 	"author": "ALegendsTale",
 	"license": "GPL-3.0",
 	"customElements": "custom-elements.json",
 	"type": "module",
 	"exports": {
+		".": "./dist/index.js",
 		"./dist/components": "./dist/components",
 		"./dist/components/*": "./dist/components/*",
 		"./dist/decorators": "./dist/decorators",