@alegendstale/holly-components 2.0.8 → 2.0.10

package/custom-elements.json

@@ -2,6 +2,107 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "dist/controllers/ResponsiveController.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "h",
+          "members": [
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "field",
+              "name": "isMobile",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "!1"
+            },
+            {
+              "kind": "field",
+              "name": "mediaQueryList"
+            },
+            {
+              "kind": "field",
+              "name": "handleMediaQueryChange"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ResponsiveController",
+          "declaration": {
+            "name": "h",
+            "module": "dist/controllers/ResponsiveController.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/controllers/StyleController.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "l",
+          "members": [
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "field",
+              "name": "host",
+              "default": "s"
+            },
+            {
+              "kind": "field",
+              "name": "property",
+              "default": "t"
+            },
+            {
+              "kind": "field",
+              "name": "callback",
+              "default": "e"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\""
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "StyleController",
+          "declaration": {
+            "name": "l",
+            "module": "dist/controllers/StyleController.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/decorators/condCustomElement.js",
@@ -27,6 +128,31 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/decorators/ExposeParts.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "l",
+          "parameters": [
+            {
+              "name": "o"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "exposeParts",
+          "declaration": {
+            "name": "l",
+            "module": "dist/decorators/ExposeParts.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/utils/basicUtils.js",
@@ -545,36 +671,121 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/utils/ResponsiveController.js",
+      "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",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "h",
+          "name": "ResponsiveController",
           "members": [
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "kind": "field",
+              "name": "isMobile",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "ReactiveControllerHost"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "isMobile",
+              "name": "mediaQueryList",
               "type": {
-                "text": "boolean"
+                "text": "MediaQueryList"
               },
-              "default": "!1"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "mediaQueryList"
+              "name": "handleMediaQueryChange",
+              "type": {
+                "text": "(event: MediaQueryListEvent) => void"
+              },
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "handleMediaQueryChange"
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             }
           ]
         }
@@ -584,38 +795,56 @@
           "kind": "js",
           "name": "ResponsiveController",
           "declaration": {
-            "name": "h",
-            "module": "dist/utils/ResponsiveController.js"
+            "name": "ResponsiveController",
+            "module": "src/controllers/ResponsiveController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/decorators/condCustomElement.ts",
+      "path": "src/controllers/StyleController.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "condCustomElement",
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "StyleController",
+          "members": [
             {
-              "name": "tagName",
+              "kind": "field",
+              "name": "observer",
+              "type": {
+                "text": "StyleObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "description": "The tag name of the custom element to define."
+              "privacy": "public",
+              "default": "''"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
             }
-          ],
-          "description": "Registers a new custom element if it doesn't already exist."
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "condCustomElement",
+          "name": "StyleController",
           "declaration": {
-            "name": "condCustomElement",
-            "module": "src/decorators/condCustomElement.ts"
+            "name": "StyleController",
+            "module": "src/controllers/StyleController.ts"
           }
         }
       ]
@@ -1294,80 +1523,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/utils/ResponsiveController.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ResponsiveController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "isMobile",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "host",
-              "type": {
-                "text": "ReactiveControllerHost"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "mediaQueryList",
-              "type": {
-                "text": "MediaQueryList"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleMediaQueryChange",
-              "type": {
-                "text": "(event: MediaQueryListEvent) => void"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ResponsiveController",
-          "declaration": {
-            "name": "ResponsiveController",
-            "module": "src/utils/ResponsiveController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/absolute-container/absolute-container.js",
+      "path": "dist/components/absolute-container/absolute-container.js",
       "declarations": [
         {
           "kind": "variable",
@@ -1407,48 +1563,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/bottom-sheet/bottom-sheet.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "o",
-          "default": "class extends c { constructor() { super(...arguments), this.open = !1, this.nonmodal = !1, this.dragging = !1, this.scrolling = !1, this.snapPoints = [], this.defaultSnap = NaN, this.emitter = new d(), this.startY = 0, this.startHeight = 0, this.previousTouch = null, this.lastScrollTop = 0; } set height(t) { const e = Math.min(Math.max(t, 0), 100); this.emitter.emit(\"snapped\", this.isSnapped(e), this.shadowRoot?.activeElement), isFinite(t) ? this.style.setProperty(\"--height\", `${Math.round(e)}dvh`) : this.style.setProperty(\"--height\", \"fit-content\"); } get height() { return parseInt(this.style.getPropertyValue(\"--height\")); } connectedCallback() { super.connectedCallback(); const t = this.snapPoints.length === 2 ? 0 : 1; this.defaultSnap = this.snapPoints.length > 0 ? isNaN(this.defaultSnap) ? this.snapPoints[Math.round(this.snapPoints.length / 2) - t] : this.defaultSnap : NaN, this.emitter.on(\"snapped\", this.onSnapped.bind(this)), requestAnimationFrame(() => { this.showSheet(this.open); }); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return requestAnimationFrame(() => { this.setDialog(this.open); }), g` <dialog @click=${(t) => { t.stopPropagation(), this.toggleSheet(); }} > <button id=\"handle\" part=\"__handle\" @pointerdown=${this.pointerDown} @pointermove=${this.pointerMove} @pointerup=${this.pointerUp} @click=${(t) => { t.stopPropagation(); }} > ⸻ </button> <div id='content' part=\"__content\" tabindex='0' @touchstart=${this.touchDown} @touchend=${this.touchUp} @touchmove=${this.touchMove} @scroll=${this.contentScroll} @touchcancel=${(t) => { console.warn(\"User Agent touchcancelled the event.\", t.target); }} @dragstart=${(t) => { t.preventDefault(); }} @click=${(t) => { t.stopPropagation(); }} > <slot></slot> </div> </dialog> `; } /** * Find closest point index to target in array */ closestSnapPointIndex(t, e) { return t.reduce((i, n, s) => Math.abs(n - e) < Math.abs(t[i] - e) ? s : i, 0); } /** * Sets sheet height to the closest snap * @param height percentage */ setSnap(t) { if (this.snapPoints.length === 0) return; const e = this.snapPoints[this.closestSnapPointIndex(this.snapPoints, t)]; e === this.snapPoints[0] && this.showSheet(!1), this.height = e; } /** * @returns Whether sheet is snapped to a snap point */ isSnapped(t) { return this.snapPoints.some((e) => e === Math.round(t)); } /** * Sets the display state of the sheet */ showSheet(t) { this.open = t, this.height = isNaN(this.defaultSnap) ? 1 / 0 : this.defaultSnap, this.setOverscroll(t), this.setDialog(t); } /** * Toggles the display state of the sheet */ toggleSheet() { this.showSheet(!this.open); } /** * Remove overscroll to prevent mobile browsers from refreshing during drag */ setOverscroll(t) { const e = document.querySelector(\"html\"), i = document.querySelector(\"body\"), n = t ? \"none\" : \"unset\"; e && e.style.setProperty(\"overscroll-behavior-block\", n), i && i.style.setProperty(\"overscroll-behavior-block\", n); } setDialog(t) { t && !this.dialog.open ? this.nonmodal ? this.dialog.show() : this.dialog.showModal() : t && this.dialog.open ? this.nonmodal && this.modalDialog ? (this.dialog.close(), this.dialog.show()) : !this.nonmodal && this.nonModalDialog && (this.dialog.close(), this.dialog.showModal()) : this.dialog.close(); } touchDown(t) { t.target instanceof HTMLElement && (this.startY = t.touches[0].pageY, this.startHeight = this.height); } touchMove(t) { if (!(t.target instanceof HTMLElement)) return; const e = t.touches[0]; let i = NaN; this.previousTouch && (i = e.pageY - this.previousTouch.pageY), this.previousTouch = e; let n = this.startY - t.touches[0].pageY; const s = this.startHeight + n / window.innerHeight * 100; !this.scrolling && this.dragging ? this.height = s : this.scrolling && this.dragging || this.scrolling && !this.dragging ? t.target.focus({ preventScroll: !0 }) : !this.scrolling && !this.dragging && (i >= 0 ? this.height = Math.min(s, this.defaultSnap || this.snapPoints[this.snapPoints.length - 1]) : t.target.focus({ preventScroll: !0 })); } touchUp(t) { t.target instanceof HTMLElement && (this.previousTouch = null, this.setSnap(this.height)); } pointerDown(t) { t.target instanceof HTMLElement && (t.target.setPointerCapture(t.pointerId), this.startY = t.pageY, this.startHeight = this.height); } pointerMove(t) { if (!(t.target instanceof HTMLElement && t.target.hasPointerCapture(t.pointerId)) || !t.isPrimary) return; t.preventDefault(); let e = this.startY - t.pageY; const i = this.startHeight + e / window.innerHeight * 100; t.target.id === \"handle\" && (this.height = i); } pointerUp(t) { t.target instanceof HTMLElement && (t.target.releasePointerCapture(t.pointerId), this.setSnap(this.height)); } onSnapped(t, e) { this.dragging = !t; } contentScroll(t) { if (!(t.target instanceof HTMLElement && t.target.id === \"content\")) return; const e = t.target.scrollTop; this.scrolling = e !== this.lastScrollTop, this.lastScrollTop = e, e === 0 && (this.scrolling = !1); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BottomSheet",
-          "declaration": {
-            "name": "o",
-            "module": "dist/components/bottom-sheet/bottom-sheet.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/bottom-sheet/bottom-sheet.styles.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "e",
-          "default": "o` :host { contain: content; overscroll-behavior-block: none; --height: fit-content; } :host([dragging]) dialog { #content { cursor: grabbing; /* Important! Prevents mobile browsers from reclaiming PointerMove event on touch devices */ touch-action: none; /* Prevent weird scrollbar movement on mobile when dragging */ overflow-y: hidden; } } :host(:not([dragging])) dialog { /* Only animate if not dragging */ transition-property: overlay opacity display; transition-duration: 0.25s; transition-behavior: allow-discrete; &::backdrop { transition-property: overlay opacity display; transition-duration: 0.25s; transition-behavior: allow-discrete; } #content { /* Allow scroll */ touch-action: pan-y; } } dialog { display: none; opacity: 0; translate: 0 var(--height); height: var(--height); min-height: 0; max-height: 100%; min-width: 100%; max-width: 100%; flex-direction: column; box-sizing: border-box; padding: 0; border: 0; background-color: light-dark(#d9d9d9, #1c1c1c); /* Important! Removes default browser styling, allowing bottom to work */ inset: unset; bottom: 0; left: 0; overflow-y: hidden; /* Important! Prevents mobile browsers from reclaiming PointerMove event on touch devices */ touch-action: none; /* Prevent weird scrollbar movement on mobile when dragging */ overflow-y: hidden; &[open] { display: flex; opacity: 1; translate: 0 0; &::backdrop { opacity: 0.8; } } &::backdrop { background: black; opacity: 0; } } @starting-style { dialog[open] { opacity: 0; translate: 0 var(--height); &::backdrop { opacity: 0; } } } #handle { display: block; position: sticky; top: 0; background: transparent; border: 0; cursor: grabbing; min-height: 35px; user-select: none; touch-action: none; } div { /* display: contents; */ overflow-y: auto; scrollbar-width: none; box-sizing: border-box; min-height: 100%; min-width: 100%; } ::slotted(*) { /* Prevent slotted items from taking pointer events */ /* pointer-events: none; */ } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "e",
-            "module": "dist/components/bottom-sheet/bottom-sheet.styles.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/components/canvas/canvas-base.js",
@@ -1533,48 +1647,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/carousel-scroller/carousel-scroller.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "i",
-          "default": "class extends c { constructor() { super(), this.slotChildren = [], this.emitter = new m(), this._currentSlide = 0, this.debouncers = /* @__PURE__ */ new WeakMap(), this.emitter.on(\"slotsLoaded\", (e) => { this.slotChildren = e; }); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return d` <div class=\"container\"> <button @click=${this.scrollToPrevSlide}><</button> <button @click=${this.scrollToNextSlide}>></button> <div> <slot @slotchange=${this.slotChange}></slot> </div> </div> `; } /** Gets the current slide. * @returns HTMLElement */ getCurrentSlide() { return this.slotChildren[this._currentSlide - 1]; } /** Scrolls to the slide before the current slide. */ scrollToPrevSlide() { this._currentSlide = this._currentSlide === 0 ? this._currentSlide = this.slotChildren.length - 1 : this._currentSlide - 1, this.slotChildren.at(this._currentSlide)?.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" }); } /** Scrolls to the slide after the current slide. */ scrollToNextSlide() { this._currentSlide = this._currentSlide === this.slotChildren.length - 1 ? 0 : this._currentSlide + 1, this.slotChildren.at(this._currentSlide)?.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" }); } /** @internal */ slotChange() { const e = Array.from( this.slotEl.assignedElements().map((r) => r) ); clearTimeout(this.debouncers.get(this.slotEl)); const s = setTimeout( () => this.emitter.emit(\"slotsLoaded\", e), 100 ); this.debouncers.set(this.slotEl, s); } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "CarouselScroller",
-          "declaration": {
-            "name": "i",
-            "module": "dist/components/carousel-scroller/carousel-scroller.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/carousel-scroller/carousel-scroller.styles.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "o",
-          "default": "r` :host { --padding: 40px; --margin: 80px; } .container { width: 600px; height: 400px; margin: 20px; border-radius: 20px; overflow: hidden; position: relative; & > button { position: absolute; width: var(--padding); height: calc(var(--padding) * 2); z-index: 1; background-color: #00000080; border: none; bottom: calc(50% - var(--padding)); font-size: 32px; &:hover { background-color: #6352b880; } &:nth-child(1) { left: 0; border-top-right-radius: 314px; border-bottom-right-radius: 314px; } &:nth-child(2) { right: 0; border-top-left-radius: 314px; border-bottom-left-radius: 314px; } } & > div { display: flex; overflow-x: scroll; position: relative; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--padding); } ::slotted(*) { display: flex; flex-direction: column; justify-content: center; min-height: calc(400px - var(--margin)); min-width: calc(600px - var(--margin)); max-height: calc(400px - var(--margin)); max-width: calc(600px - var(--margin)); background: white; scroll-snap-align: center; padding: calc(var(--margin) / 2); } } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "o",
-            "module": "dist/components/carousel-scroller/carousel-scroller.styles.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/components/color-palette/color-palette-utils.js",
@@ -1783,6 +1855,90 @@
         }
       ]
     },
+    {
+      "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",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "i",
+          "default": "class extends c { constructor() { super(), this.slotChildren = [], this.emitter = new m(), this._currentSlide = 0, this.debouncers = /* @__PURE__ */ new WeakMap(), this.emitter.on(\"slotsLoaded\", (e) => { this.slotChildren = e; }); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return d` <div class=\"container\"> <button @click=${this.scrollToPrevSlide}><</button> <button @click=${this.scrollToNextSlide}>></button> <div> <slot @slotchange=${this.slotChange}></slot> </div> </div> `; } /** Gets the current slide. * @returns HTMLElement */ getCurrentSlide() { return this.slotChildren[this._currentSlide - 1]; } /** Scrolls to the slide before the current slide. */ scrollToPrevSlide() { this._currentSlide = this._currentSlide === 0 ? this._currentSlide = this.slotChildren.length - 1 : this._currentSlide - 1, this.slotChildren.at(this._currentSlide)?.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" }); } /** Scrolls to the slide after the current slide. */ scrollToNextSlide() { this._currentSlide = this._currentSlide === this.slotChildren.length - 1 ? 0 : this._currentSlide + 1, this.slotChildren.at(this._currentSlide)?.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" }); } /** @internal */ slotChange() { const e = Array.from( this.slotEl.assignedElements().map((r) => r) ); clearTimeout(this.debouncers.get(this.slotEl)); const s = setTimeout( () => this.emitter.emit(\"slotsLoaded\", e), 100 ); this.debouncers.set(this.slotEl, s); } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CarouselScroller",
+          "declaration": {
+            "name": "i",
+            "module": "dist/components/carousel-scroller/carousel-scroller.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/carousel-scroller/carousel-scroller.styles.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "o",
+          "default": "r` :host { --padding: 40px; --margin: 80px; } .container { width: 600px; height: 400px; margin: 20px; border-radius: 20px; overflow: hidden; position: relative; & > button { position: absolute; width: var(--padding); height: calc(var(--padding) * 2); z-index: 1; background-color: #00000080; border: none; bottom: calc(50% - var(--padding)); font-size: 32px; &:hover { background-color: #6352b880; } &:nth-child(1) { left: 0; border-top-right-radius: 314px; border-bottom-right-radius: 314px; } &:nth-child(2) { right: 0; border-top-left-radius: 314px; border-bottom-left-radius: 314px; } } & > div { display: flex; overflow-x: scroll; position: relative; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--padding); } ::slotted(*) { display: flex; flex-direction: column; justify-content: center; min-height: calc(400px - var(--margin)); min-width: calc(600px - var(--margin)); max-height: calc(400px - var(--margin)); max-width: calc(600px - var(--margin)); background: white; scroll-snap-align: center; padding: calc(var(--margin) / 2); } } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "o",
+            "module": "dist/components/carousel-scroller/carousel-scroller.styles.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/components/draw-svg/draw-svg.js",
@@ -1831,7 +1987,7 @@
       "declarations": [
         {
           "kind": "variable",
-          "name": "l",
+          "name": "v",
           "type": {
             "text": "array"
           },
@@ -1839,7 +1995,7 @@
         },
         {
           "kind": "variable",
-          "name": "A",
+          "name": "S",
           "type": {
             "text": "array"
           },
@@ -1847,16 +2003,16 @@
         },
         {
           "kind": "variable",
-          "name": "M",
+          "name": "R",
           "type": {
             "text": "array"
           },
-          "default": "[ ...l, ...l.flatMap((t) => A.map((e) => `${t} ${e}`)) ]"
+          "default": "[ ...v, ...v.flatMap((t) => S.map((e) => `${t} ${e}`)) ]"
         },
         {
           "kind": "variable",
-          "name": "p",
-          "default": "class extends g { constructor() { super(...arguments), this.autofit = !1, this.svgColors = !1, this.viewBox = { x: 0, y: 0, width: 0, height: 0 }; } set svg(t) { const e = t instanceof SVGElement || x(t) ? t : u(t); e instanceof Element && !(e instanceof SVGElement) || (this._svg = e); } get svg() { return this._svg ?? \"\"; } set preserveAspectRatio(t) { this._preserveAspectRatio = t; } get preserveAspectRatio() { if (this._preserveAspectRatio == null && this.svg instanceof SVGElement) { const t = this.svg.getAttribute(\"preserveAspectRatio\") || \"\"; if (R(t)) return t; } return this._preserveAspectRatio || \"xMidYMid meet\"; } // For classes inheriting from responsive-svg (e.g. draw-svg) svgClasses() { return {}; } willUpdate(t) { if (super.willUpdate(t), this.svg instanceof SVGElement) { const e = this.getViewBoxSize(this.svg), i = this.svg.getAttribute(\"width\"), o = this.svg.getAttribute(\"height\"); this.viewBox = e ?? { x: 0, y: 0, width: Number(i) || 0, height: Number(o) || 0 }; } else { const e = this.style.getPropertyValue(\"--svg-width\"), i = this.style.getPropertyValue(\"--svg-height\"); this.viewBox = { x: 0, y: 0, width: parseFloat(e) || 0, height: parseFloat(i) || 0 }; } } render() { const t = this.viewBox, e = this.preserveAspectRatio, i = this.svgClasses(); if (typeof this.svg == \"string\") return c`<p style=\"font-size: initial;\">⚠️ SVG Error</p>`; if (this.svg instanceof SVGElement) { const s = this.svg.cloneNode(!0); return this.applyPartToPaths(s, \"__path\"), o(Array.from(s.children), t); } else return o(this.svg, t); function o(s, r) { if (s) return c` <svg part=\"__svg\" class=${m(i)} style=${f({ \"--svg-width-fallback\": `${r.width}em`, \"--svg-height-fallback\": `${r.height}em` })} viewBox=\"${r.x} ${r.y} ${r.width} ${r.height}\" preserveAspectRatio=${e} xmlns=\"http://www.w3.org/2000/svg\" > ${s} </svg> `; } } /** Applies a part name to all paths in the given element. */ applyPartToPaths(t, e) { if (t instanceof Element) { t.tagName.toLowerCase() === \"path\" && t.setAttribute(\"part\", e); for (const i of Array.from(t.children)) this.applyPartToPaths(i, e); } } /** * Gets the viewBox dimensions from an SVG element. * @param svg The SVG to get the attribute from. * @returns The SVG viewBox x, y, width, and height */ getViewBoxSize(t) { const e = t.getAttribute(\"viewBox\")?.split(\" \"); return e ? { x: +e[0], y: +e[1], width: +e[2], height: +e[3] } : null; } }"
+          "name": "n",
+          "default": "class extends g { constructor() { super(...arguments), this.autofit = !1, this.svgColors = !1, this.viewBox = { x: 0, y: 0, width: 0, height: 0 }, this._widthController = new c(this, \"--svg-width\", (t) => { this.viewBox = { ...this.viewBox, width: parseFloat(t) || 0 }; }), this._heightController = new c(this, \"--svg-height\", (t) => { this.viewBox = { ...this.viewBox, height: parseFloat(t) || 0 }; }); } set svg(t) { const e = t instanceof SVGElement || w(t) ? t : x(t); e instanceof Element && !(e instanceof SVGElement) || (this._svg = e); } get svg() { return this._svg ?? \"\"; } set preserveAspectRatio(t) { this._preserveAspectRatio = t; } get preserveAspectRatio() { if (this._preserveAspectRatio == null && this.svg instanceof SVGElement) { const t = this.svg.getAttribute(\"preserveAspectRatio\") || \"\"; if (B(t)) return t; } return this._preserveAspectRatio || \"xMidYMid meet\"; } // For classes inheriting from responsive-svg (e.g. draw-svg) svgClasses() { return {}; } connectedCallback() { if (super.connectedCallback(), this.svg instanceof SVGElement) { const t = this.getViewBoxSize(this.svg), e = parseFloat(this.svg.getAttribute(\"width\") || \"0\"), r = parseFloat(this.svg.getAttribute(\"height\") || \"0\"); this.viewBox = { x: t?.x ?? 0, y: t?.y ?? 0, width: this.viewBox.width || (t?.width ?? e), height: this.viewBox.height || (t?.height ?? r) }; } } render() { const t = this.viewBox, e = this.preserveAspectRatio, r = this.svgClasses(); if (t.height === 0 || t.width === 0) return l`<p style=\"font-size: initial;\">⚠️ SVG ViewBox</p>`; if (typeof this.svg == \"string\") return l`<p style=\"font-size: initial;\">⚠️ SVG Error</p>`; if (this.svg instanceof SVGElement) { const s = this.svg.cloneNode(!0); return o(Array.from(s.children), t); } else return o(this.svg, t); function o(s, i) { if (s) return l` <svg class=${u(r)} style=${m({ \"--svg-width-fallback\": `${i.width}em`, \"--svg-height-fallback\": `${i.height}em` })} viewBox=\"${i.x} ${i.y} ${i.width} ${i.height}\" preserveAspectRatio=${e} xmlns=\"http://www.w3.org/2000/svg\" > ${s} </svg> `; } } /** * Gets the viewBox dimensions from an SVG element. * @param svg The SVG to get the attribute from. * @returns The SVG viewBox x, y, width, and height */ getViewBoxSize(t) { const e = t.getAttribute(\"viewBox\")?.split(\" \"); return e ? { x: +e[0], y: +e[1], width: +e[2], height: +e[3] } : null; } }"
         }
       ],
       "exports": [
@@ -1864,7 +2020,7 @@
           "kind": "js",
           "name": "ResponsiveSvg",
           "declaration": {
-            "name": "p",
+            "name": "n",
             "module": "dist/components/responsive-svg/responsive-svg.js"
           }
         },
@@ -1872,7 +2028,7 @@
           "kind": "js",
           "name": "preserveAspectRatioAlignOptions",
           "declaration": {
-            "name": "l",
+            "name": "v",
             "module": "dist/components/responsive-svg/responsive-svg.js"
           }
         },
@@ -1880,7 +2036,7 @@
           "kind": "js",
           "name": "preserveAspectRatioOptions",
           "declaration": {
-            "name": "M",
+            "name": "R",
             "module": "dist/components/responsive-svg/responsive-svg.js"
           }
         },
@@ -1888,7 +2044,7 @@
           "kind": "js",
           "name": "preserveAspectRatioSpacingOptions",
           "declaration": {
-            "name": "A",
+            "name": "S",
             "module": "dist/components/responsive-svg/responsive-svg.js"
           }
         }
@@ -1995,6 +2151,12 @@
           "kind": "class",
           "description": "A container component which can serve as a modal or popup wrapper.",
           "name": "AbsoluteContainer",
+          "cssParts": [
+            {
+              "description": "Styles the dialog element.",
+              "name": "__dialog"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -2148,6 +2310,16 @@
               "name": "--height"
             }
           ],
+          "cssParts": [
+            {
+              "description": "Styles handle element..",
+              "name": "__handle"
+            },
+            {
+              "description": "Styles the content wrapper element.",
+              "name": "__content"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -3989,24 +4161,20 @@
               }
             },
             {
-              "kind": "method",
-              "name": "applyPartToPaths",
+              "kind": "field",
+              "name": "_widthController",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "Element"
-                  }
-                },
-                {
-                  "name": "partValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Applies a part name to all paths in the given element.",
+              "default": "new StyleController(this, '--svg-width', (val) => { this.viewBox = { ...this.viewBox, width: parseFloat(val) || 0 } })",
+              "inheritedFrom": {
+                "name": "ResponsiveSvg",
+                "module": "src/components/responsive-svg/responsive-svg.ts"
+              }
+            },
+            {
+              "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"
@@ -4353,24 +4521,16 @@
               "privacy": "protected"
             },
             {
-              "kind": "method",
-              "name": "applyPartToPaths",
+              "kind": "field",
+              "name": "_widthController",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "Element"
-                  }
-                },
-                {
-                  "name": "partValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Applies a part name to all paths in the given element."
+              "default": "new StyleController(this, '--svg-width', (val) => { this.viewBox = { ...this.viewBox, width: parseFloat(val) || 0 } })"
+            },
+            {
+              "kind": "field",
+              "name": "_heightController",
+              "privacy": "private",
+              "default": "new StyleController(this, '--svg-height', (val) => { this.viewBox = { ...this.viewBox, height: parseFloat(val) || 0 } })"
             },
             {
               "kind": "method",
@@ -4853,52 +5013,658 @@
       "exports": [
         {
           "kind": "js",
-          "name": "default",
+          "name": "default",
+          "declaration": {
+            "name": "e",
+            "module": "dist/components/color-palette/item/color-palette-item-edit.styles.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/color-palette/item/color-palette-item.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "t",
+          "default": "class extends y { constructor() { super(...arguments), this.color = \"\", this.alias = \"\", this.aliasMode = h.aliasMode, this.direction = h.direction, this.editMode = !1, this.height = h.height, this.preventHover = !1, this.hideText = !1, this.colorCount = 0, this.emitter = new g(); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return this.style.setProperty(\"--palette-item-background-color\", this.color), this.style.setProperty(\"--palette-item-color\", v(this.color)), this.style.setProperty(\"--palette-item-font-size\", `${C(this.colorCount)}px`), p` <div id='container' @click=${(i) => this.emitter.emit(\"click\", i)} > ${this.content()} </div> `; } /** Renders the content */ content() { const i = this.aliasMode === f.Both || this.alias == null || this.alias.trim() === \"\"; return p` ${i ? p`<span id='text'>${this.color.trim().toUpperCase()}</span>` : m} ${this.alias !== \"\" ? p` <span id=\"alias\">${this.alias}</span> ` : m} `; } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ColorPaletteItem",
+          "declaration": {
+            "name": "t",
+            "module": "dist/components/color-palette/item/color-palette-item.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/components/color-palette/item/color-palette-item.styles.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "o",
+          "default": "e` :host { --palette-item-background-color: #000000; --palette-item-color: #ffffff; --palette-item-font-size: 16px; display: flex; flex: 1; transition: all 0.1s ease-in-out; background-color: var(--palette-item-background-color); color: var(--palette-item-color); } /* Animation Size */ :host(:not([preventHover]):hover) { flex-basis: var(--palette-column-flex-basis); } :host([direction='column']:not([preventHover]):hover) { flex-basis: 80px; } /* Hover States */ :host(:not([preventHover])) #container > span { display: none; } :host(:not([preventHover]):hover) #container > span { display: block; } :host([hideText]) #container > span { display: none; } :host([hideText]:hover) #container > span { display: none; } /* Container Directions */ :host([direction='column']) > #container { display: flex; flex-direction: column; justify-content: center; } :host([direction='row']) > #container { display: flex; justify-content: center; } :host([direction='row'][editMode]) > #container { display: grid; grid-template-columns: 1fr 1fr; } #container { flex: 1; gap: 3%; *:first-child { justify-self: flex-end; align-self: center; } *:last-child { justify-self: flex-start; align-self: center; } span { display: block; text-align: center; font-size: 100%; font-weight: bold; user-select: none; } } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "o",
+            "module": "dist/components/color-palette/item/color-palette-item.styles.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/element-style-observer.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "O",
+          "members": [
+            {
+              "kind": "field",
+              "name": "propertyNames",
+              "description": "Get the names of all properties currently being observed.",
+              "type": {
+                "text": "string[]"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "description": "The element being observed.",
+              "type": {
+                "text": "Element"
+              },
+              "default": "t"
+            },
+            {
+              "kind": "field",
+              "name": "callback",
+              "description": "The callback to call when the element's style changes.",
+              "type": {
+                "text": "StyleObserverCallback"
+              },
+              "default": "r"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "description": "The observer options.",
+              "type": {
+                "text": "StyleObserverOptions"
+              },
+              "default": "{ properties: [], ...s }"
+            },
+            {
+              "kind": "field",
+              "name": "#t",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "!1",
+              "description": "Whether the observer has been initialized."
+            },
+            {
+              "kind": "method",
+              "name": "#s",
+              "privacy": "private",
+              "description": "Called the first time observe() is called to initialize the target."
+            },
+            {
+              "kind": "method",
+              "name": "resolveOptions",
+              "parameters": [
+                {
+                  "name": "t"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleEvent",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "name": "event",
+                  "optional": true,
+                  "type": {
+                    "text": "TransitionEvent"
+                  }
+                }
+              ],
+              "description": "Handle a potential property change",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "observe",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "name": "properties",
+                  "type": {
+                    "text": "string | string[]"
+                  }
+                }
+              ],
+              "description": "Observe the target for changes to one or more CSS properties.",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateTransitionProperties",
+              "description": "Update the `--style-observer-transition` property to include all observed properties."
+            },
+            {
+              "kind": "field",
+              "name": "#e",
+              "privacy": "private",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateTransition",
+              "parameters": [
+                {
+                  "name": "{ firstTime: t }",
+                  "default": "{}"
+                },
+                {
+                  "name": "options",
+                  "type": {
+                    "text": "@param {boolean} [options.firstTime] - Whether this is the first time the transition is being set.\n   "
+                  }
+                }
+              ],
+              "description": "Update the target's transition property or refresh it if it was overwritten."
+            },
+            {
+              "kind": "field",
+              "name": "_isHost",
+              "description": "Whether the target has an open shadow root (and the modern adoptedStyleSheets API is supported).",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_shadowSheet",
+              "description": "Shadow style sheet. Only used if _isHost is true.",
+              "type": {
+                "text": "CSSStyleSheet | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_styles",
+              "type": {
+                "text": "Record<string, string>"
+              },
+              "default": "{}",
+              "description": "Any styles we've set on the target, for any reason.",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setProperty",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "name": "r"
+                },
+                {
+                  "name": "s"
+                },
+                {
+                  "name": "property",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "priority",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Set a CSS property on the target.",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getProperty",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "name": "property",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Get a CSS property from the target.",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "unobserve",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "description": "Properties to stop observing. Defaults to all observed properties.",
+                  "name": "properties",
+                  "optional": true,
+                  "type": {
+                    "text": "string | string[]"
+                  }
+                }
+              ],
+              "description": "Stop observing a target for changes to one or more CSS properties.",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "all",
+              "static": true,
+              "default": "new d()",
+              "description": "All instances ever observed by this class."
+            },
+            {
+              "kind": "field",
+              "name": "renderedObserver",
+              "default": "new g((i) => { this.propertyNames.length > 0 && this.handleEvent(); })"
+            },
+            {
+              "kind": "field"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "c",
+          "parameters": [
+            {
+              "name": "o"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "O",
+            "module": "dist/node_modules/style-observer/src/element-style-observer.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "resolveOptions",
+          "declaration": {
+            "name": "c",
+            "module": "dist/node_modules/style-observer/src/element-style-observer.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/rendered-observer.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "c",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#e",
+              "privacy": "private",
+              "default": "new Set()",
+              "description": "All currently observed targets",
+              "type": {
+                "text": "WeakSet<Element>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#t",
+              "privacy": "private",
+              "default": "new WeakMap()",
+              "description": "Documents to IntersectionObserver instances",
+              "type": {
+                "text": "WeakMap<Document, IntersectionObserver>"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "observe",
+              "parameters": [
+                {
+                  "name": "e"
+                },
+                {
+                  "description": "The element to observe.",
+                  "name": "element",
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ],
+              "description": "Begin observing the presence of an element."
+            },
+            {
+              "kind": "method",
+              "name": "unobserve",
+              "parameters": [
+                {
+                  "name": "e"
+                },
+                {
+                  "description": "The element to stop observing. If not provided, all targets will be unobserved.",
+                  "name": "element",
+                  "optional": true,
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ],
+              "description": "Stop observing the presence of an element."
+            },
+            {
+              "kind": "field",
+              "name": "callback",
+              "default": "e"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "c",
+            "module": "dist/node_modules/style-observer/src/rendered-observer.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/style-observer.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "p",
+          "members": [
+            {
+              "kind": "field",
+              "name": "elementObservers",
+              "default": "new WeakMap()",
+              "type": {
+                "text": "WeakMap<Element, ElementStyleObserver>"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "changed",
+              "parameters": [
+                {
+                  "name": "t"
+                }
+              ],
+              "type": {
+                "text": "StyleObserverCallback"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "observe",
+              "parameters": [
+                {
+                  "name": "t"
+                }
+              ],
+              "description": "Observe one or more targets for changes to one or more CSS properties."
+            },
+            {
+              "kind": "method",
+              "name": "unobserve",
+              "parameters": [
+                {
+                  "name": "t"
+                }
+              ],
+              "description": "Stop observing one or more targets for changes to one or more CSS properties."
+            },
+            {
+              "kind": "method",
+              "name": "updateTransition",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "name": "targets",
+                  "type": {
+                    "text": "Element | Element[]"
+                  }
+                }
+              ],
+              "description": "Update the transition for one or more targets.",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "callback",
+              "default": "t"
+            },
+            {
+              "kind": "field"
+            },
+            {
+              "kind": "field",
+              "name": "targets",
+              "type": {
+                "text": "array"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "target"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "default": "[...n(o), ...n(t)]",
+              "type": {
+                "text": "array"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "p",
+            "module": "dist/node_modules/style-observer/src/style-observer.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "c",
+          "parameters": [
+            {
+              "name": "e"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "h",
+          "parameters": [
+            {
+              "name": "e"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "m",
+          "parameters": [
+            {
+              "name": "e"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "u",
+          "parameters": [
+            {
+              "name": "e"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "d",
+          "parameters": [
+            {
+              "name": "e"
+            },
+            {
+              "name": "t"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "a",
+          "parameters": [
+            {
+              "name": "e"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "getLonghands",
+          "declaration": {
+            "name": "m",
+            "module": "dist/node_modules/style-observer/src/util.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getTimesFor",
           "declaration": {
-            "name": "e",
-            "module": "dist/components/color-palette/item/color-palette-item-edit.styles.js"
+            "name": "d",
+            "module": "dist/node_modules/style-observer/src/util.js"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/color-palette/item/color-palette-item.js",
-      "declarations": [
+        },
         {
-          "kind": "variable",
-          "name": "t",
-          "default": "class extends y { constructor() { super(...arguments), this.color = \"\", this.alias = \"\", this.aliasMode = h.aliasMode, this.direction = h.direction, this.editMode = !1, this.height = h.height, this.preventHover = !1, this.hideText = !1, this.colorCount = 0, this.emitter = new g(); } disconnectedCallback() { super.disconnectedCallback(), this.emitter.clear(); } render() { return this.style.setProperty(\"--palette-item-background-color\", this.color), this.style.setProperty(\"--palette-item-color\", v(this.color)), this.style.setProperty(\"--palette-item-font-size\", `${C(this.colorCount)}px`), p` <div id='container' @click=${(i) => this.emitter.emit(\"click\", i)} > ${this.content()} </div> `; } /** Renders the content */ content() { const i = this.aliasMode === f.Both || this.alias == null || this.alias.trim() === \"\"; return p` ${i ? p`<span id='text'>${this.color.trim().toUpperCase()}</span>` : m} ${this.alias !== \"\" ? p` <span id=\"alias\">${this.alias}</span> ` : m} `; } }"
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "parseTimes",
+          "declaration": {
+            "name": "u",
+            "module": "dist/node_modules/style-observer/src/util.js"
+          }
+        },
         {
           "kind": "js",
-          "name": "ColorPaletteItem",
+          "name": "splitCommas",
           "declaration": {
-            "name": "t",
-            "module": "dist/components/color-palette/item/color-palette-item.js"
+            "name": "a",
+            "module": "dist/node_modules/style-observer/src/util.js"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/components/color-palette/item/color-palette-item.styles.js",
-      "declarations": [
+        },
         {
-          "kind": "variable",
-          "name": "o",
-          "default": "e` :host { --palette-item-background-color: #000000; --palette-item-color: #ffffff; --palette-item-font-size: 16px; display: flex; flex: 1; transition: all 0.1s ease-in-out; background-color: var(--palette-item-background-color); color: var(--palette-item-color); } /* Animation Size */ :host(:not([preventHover]):hover) { flex-basis: var(--palette-column-flex-basis); } :host([direction='column']:not([preventHover]):hover) { flex-basis: 80px; } /* Hover States */ :host(:not([preventHover])) #container > span { display: none; } :host(:not([preventHover]):hover) #container > span { display: block; } :host([hideText]) #container > span { display: none; } :host([hideText]:hover) #container > span { display: none; } /* Container Directions */ :host([direction='column']) > #container { display: flex; flex-direction: column; justify-content: center; } :host([direction='row']) > #container { display: flex; justify-content: center; } :host([direction='row'][editMode]) > #container { display: grid; grid-template-columns: 1fr 1fr; } #container { flex: 1; gap: 3%; *:first-child { justify-self: flex-end; align-self: center; } *:last-child { justify-self: flex-start; align-self: center; } span { display: block; text-align: center; font-size: 100%; font-weight: bold; user-select: none; } } `"
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "toArray",
+          "declaration": {
+            "name": "c",
+            "module": "dist/node_modules/style-observer/src/util.js"
+          }
+        },
         {
           "kind": "js",
-          "name": "default",
+          "name": "wait",
           "declaration": {
-            "name": "o",
-            "module": "dist/components/color-palette/item/color-palette-item.styles.js"
+            "name": "h",
+            "module": "dist/node_modules/style-observer/src/util.js"
           }
         }
       ]
@@ -6361,6 +7127,255 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util/adopt-css.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "n",
+          "parameters": [
+            {
+              "name": "l"
+            },
+            {
+              "name": "e",
+              "default": "globalThis.document"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "n",
+            "module": "dist/node_modules/style-observer/src/util/adopt-css.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util/Bug.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "t",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#t",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#e",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "valuePending",
+              "description": "Get whether the bug is present or not, or a promise that will resolve to this value when detection is complete.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "description": "Synchronously get either whether the bug is present (if already detected or detection is sync)\nor kick off detection and return the initial value if detection is async",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "all",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{}"
+            },
+            {
+              "kind": "method",
+              "name": "detectAll",
+              "static": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "default": "e"
+            },
+            {
+              "kind": "field",
+              "name": "initialValue"
+            },
+            {
+              "kind": "field",
+              "name": "detect",
+              "default": "s"
+            },
+            {
+              "kind": "field",
+              "default": "this"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "t",
+            "module": "dist/node_modules/style-observer/src/util/Bug.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util/gentle-register-property.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "f",
+          "parameters": [
+            {
+              "name": "t"
+            },
+            {
+              "name": "n",
+              "default": "{}"
+            },
+            {
+              "name": "r",
+              "default": "globalThis.document"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "f",
+            "module": "dist/node_modules/style-observer/src/util/gentle-register-property.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util/is-registered-property.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "n",
+          "parameters": [
+            {
+              "name": "t"
+            },
+            {
+              "name": "l",
+              "default": "globalThis.document"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "n",
+            "module": "dist/node_modules/style-observer/src/util/is-registered-property.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util/MultiWeakMap.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "r",
+          "members": [
+            {
+              "kind": "method",
+              "name": "has",
+              "parameters": [
+                {
+                  "name": "e"
+                },
+                {
+                  "name": "s"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "add",
+              "parameters": [
+                {
+                  "name": "e"
+                },
+                {
+                  "name": "s"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "delete",
+              "parameters": [
+                {
+                  "name": "e"
+                },
+                {
+                  "name": "s"
+                }
+              ]
+            }
+          ],
+          "superclass": {
+            "name": "WeakMap",
+            "module": "dist/node_modules/style-observer/src/util/MultiWeakMap.js"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "r",
+            "module": "dist/node_modules/style-observer/src/util/MultiWeakMap.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util/bugs/adopted-style-sheet.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util/bugs/transitionrun-loop.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/node_modules/style-observer/src/util/bugs/unregistered-transition.js",
+      "declarations": [],
+      "exports": []
     }
   ]
 }