@alegendstale/holly-components 1.4.0 → 2.0.2

package/dist/components/color-palette/item/color-palette-item.js

@@ -4,26 +4,44 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, css, nothing } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
 import { AliasMode, defaultSettings } from '../color-palette-utils.js';
 import { EventEmitter } from '../../../utils/EventEmitter.js';
 import { getAdjustedFontSize, getForegroundColor } from '../../../utils/basicUtils.js';
-import { condCustomElement } from '../../../decorators/condCustomElement.js';
+import styles from './color-palette-item.styles.js';
+/**
+ * A color item meant to be used with color-palette.
+ *
+ * @cssprop {<color>} --palette-item-background-color - The background color of the item.
+ * @cssprop {<color>} --palette-item-color - The color of the item.
+ * @cssprop {<length>} --palette-item-font-size - The font-size the item will use.
+ */
 let ColorPaletteItem = class ColorPaletteItem extends LitElement {
     constructor() {
         super(...arguments);
+        /** The color the item will display. */
         this.color = '';
+        /** The alias for the color. */
         this.alias = '';
+        /** How the alias will display. */
         this.aliasMode = defaultSettings.aliasMode;
+        /** The direction the palette wants the item to display.  */
         this.direction = defaultSettings.direction;
+        /** Whether the item is being edited. */
         this.editMode = false;
+        /** The height of the item. */
         this.height = defaultSettings.height;
+        /** Whether hovering over the item is permitted. */
         this.preventHover = false;
+        /** Whether the text on the item is hidden. */
         this.hideText = false;
+        /** The total number of colors the palette expects. */
         this.colorCount = 0;
+        /** Public way to subscribe to events. */
         this.emitter = new EventEmitter();
     }
+    static { this.styles = [styles]; }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.emitter.clear();
@@ -41,6 +59,7 @@ let ColorPaletteItem = class ColorPaletteItem extends LitElement {
 			</div>
 		`;
     }
+    /** Renders the content */
     content() {
         // Display hex if alias mode is set to both OR if alias is not set
         const showText = this.aliasMode === AliasMode.Both || this.alias == null || this.alias.trim() === '';
@@ -53,94 +72,9 @@ let ColorPaletteItem = class ColorPaletteItem extends LitElement {
 					<span id="alias">${this.alias}</span>
 				`
             : nothing}
-			
 		`;
     }
 };
-ColorPaletteItem.styles = [
-    css `
-			: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;
-				}
-			}
-		`
-];
 __decorate([
     query('#container')
 ], ColorPaletteItem.prototype, "container", void 0);
@@ -172,6 +106,6 @@ __decorate([
     property({ type: Number })
 ], ColorPaletteItem.prototype, "colorCount", void 0);
 ColorPaletteItem = __decorate([
-    condCustomElement('color-palette-item')
+    customElement('color-palette-item')
 ], ColorPaletteItem);
 export { ColorPaletteItem };

package/dist/components/color-palette/item/color-palette-item.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=color-palette-item.styles.d.ts.map

package/dist/components/color-palette/item/color-palette-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/item/color-palette-item.styles.ts"],"names":[],"mappings":";AAEA,wBAiFE"}

package/dist/components/color-palette/item/color-palette-item.styles.js

@@ -0,0 +1,83 @@
+import { css } from 'lit';
+export default css `
+	: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;
+		}
+	}
+`;

package/dist/components/color-palette/menu/color-palette-menu.d.ts

@@ -7,19 +7,31 @@ type EventMap = {
     editMode: [val: boolean];
     openEditor: [];
 };
+/**
+ * A context menu for color-palette.
+ */
 export declare class ColorPaletteMenu extends LitElement {
     static styles: import("lit").CSSResult[];
+    /** The absolute-container wrapping the menu. */
     absolute: AbsoluteContainer;
+    /** The settings palette colors. */
     colors: string[];
+    /** The selected palette settings. */
     settings?: Partial<PaletteSettings>;
+    /** The selected palette edit mode status. */
     editMode: Boolean;
+    /** Determines if copying takes the raw value or just the colors. */
     copyFormat: CopyFormat;
-    reorder: boolean;
+    /** Whether reorder state is active. */
+    protected reorder: boolean;
+    /** Public way to subscribe to events. */
     emitter: EventEmitter<EventMap>;
     disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
-    menuItems(): import("lit-html").TemplateResult<1>;
-    reorderItems(): import("lit-html").TemplateResult<1>;
+    /** Renders the menu items. */
+    protected menuItems(): import("lit-html").TemplateResult<1>;
+    /** Renders the reorder items. */
+    protected reorderItems(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/color-palette/menu/color-palette-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-palette-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/menu/color-palette-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAmB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAIzF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAKnF,KAAK,QAAQ,GAAG;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,CAAA;IACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;IACxB,UAAU,EAAE,EAAE,CAAA;CACd,CAAA;AAED,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,MAAM,CAAC,MAAM,4BAiDX;IAGF,QAAQ,EAAG,iBAAiB,CAAC;IAG7B,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,QAAQ,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAGpC,QAAQ,EAAE,OAAO,CAAS;IAG1B,UAAU,EAAE,UAAU,CAA8B;IAGpD,OAAO,EAAE,OAAO,CAAS;IAEzB,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAE/D,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAkBN,SAAS;IAuHT,YAAY;CAmBZ;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}
+{"version":3,"file":"color-palette-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/menu/color-palette-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAmB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAIzF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAKnF,KAAK,QAAQ,GAAG;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,CAAA;IACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;IACxB,UAAU,EAAE,EAAE,CAAA;CACd,CAAA;AAED;;GAEG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,MAAM,CAAC,MAAM,4BAAY;IAEzB,gDAAgD;IAEzC,QAAQ,EAAG,iBAAiB,CAAC;IAEpC,mCAAmC;IAE5B,MAAM,EAAE,MAAM,EAAE,CAAM;IAE7B,qCAAqC;IAE9B,QAAQ,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAE3C,6CAA6C;IAEtC,QAAQ,EAAE,OAAO,CAAS;IAEjC,oEAAoE;IAE7D,UAAU,EAAE,UAAU,CAA8B;IAE3D,uCAAuC;IAEvC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAS;IAEnC,yCAAyC;IAClC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAkBN,8BAA8B;IAC9B,SAAS,CAAC,SAAS;IAuHnB,iCAAiC;IACjC,SAAS,CAAC,YAAY;CAmBtB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}

package/dist/components/color-palette/menu/color-palette-menu.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, css, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { EventEmitter } from '../../../utils/EventEmitter.js';
 import { defaultSettings } from '../color-palette-utils.js';
 import { ArrowLeftRight, Brush, Check, Copy, createElement, Droplets, Palette, Scissors } from 'lucide';
@@ -14,16 +14,25 @@ import colorsea from '../../../utils/colorsea-wrapper.js';
 import { AbsoluteContainer } from '../../absolute-container/absolute-container.js';
 import { ref } from 'lit/directives/ref.js';
 import { ColorPaletteReorder } from './color-palette-reorder.js';
-import { condCustomElement } from '../../../decorators/condCustomElement.js';
+import styles from './color-palette-menu.styles.js';
+/**
+ * A context menu for color-palette.
+ */
 let ColorPaletteMenu = class ColorPaletteMenu extends LitElement {
     constructor() {
         super(...arguments);
+        /** The settings palette colors. */
         this.colors = [];
+        /** The selected palette edit mode status. */
         this.editMode = false;
+        /** Determines if copying takes the raw value or just the colors. */
         this.copyFormat = defaultSettings.copyFormat;
+        /** Whether reorder state is active. */
         this.reorder = false;
+        /** Public way to subscribe to events. */
         this.emitter = new EventEmitter();
     }
+    static { this.styles = [styles]; }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.emitter.clear();
@@ -42,6 +51,7 @@ let ColorPaletteMenu = class ColorPaletteMenu extends LitElement {
             : this.menuItems()}
 		`;
     }
+    /** Renders the menu items. */
     menuItems() {
         const palette = {
             colors: this.colors,
@@ -158,6 +168,7 @@ let ColorPaletteMenu = class ColorPaletteMenu extends LitElement {
 			</menu>
 		`;
     }
+    /** Renders the reorder items. */
     reorderItems() {
         const reorderRef = (reorder) => {
             if (!(reorder instanceof ColorPaletteReorder))
@@ -177,56 +188,6 @@ let ColorPaletteMenu = class ColorPaletteMenu extends LitElement {
 		`;
     }
 };
-ColorPaletteMenu.styles = [
-    css `
-			:host {
-				display: block;
-			}
-
-			menu {
-				display: grid;
-				grid-template-columns: 1fr;
-				padding: .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: .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);
-			}
-		`
-];
 __decorate([
     query('absolute-container')
 ], ColorPaletteMenu.prototype, "absolute", void 0);
@@ -246,6 +207,6 @@ __decorate([
     state()
 ], ColorPaletteMenu.prototype, "reorder", void 0);
 ColorPaletteMenu = __decorate([
-    condCustomElement('color-palette-menu')
+    customElement('color-palette-menu')
 ], ColorPaletteMenu);
 export { ColorPaletteMenu };

package/dist/components/color-palette/menu/color-palette-menu.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=color-palette-menu.styles.d.ts.map

package/dist/components/color-palette/menu/color-palette-menu.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette-menu.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/menu/color-palette-menu.styles.ts"],"names":[],"mappings":";AAEA,wBA+CE"}

package/dist/components/color-palette/menu/color-palette-menu.styles.js

@@ -0,0 +1,49 @@
+import { css } from 'lit';
+export default css `
+	: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);
+	}
+`;

package/dist/components/color-palette/menu/color-palette-reorder.d.ts

@@ -13,14 +13,21 @@ declare enum Reorder {
 type EventMap = {
     submit: [colors: string[]];
 };
+/**
+ * A companion UI to color-palette-menu for when the client selects reorder.
+ */
 export declare class ColorPaletteReorder extends LitElement {
     static styles: import("lit").CSSResult[];
+    /** The absolute container wrapping the reorder component. */
     absolute: AbsoluteContainer;
+    /** The colors that can be reordered. */
     colors: string[];
+    /** Public way to subscribe to events. */
     emitter: EventEmitter<EventMap>;
     disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
-    selectOption(item: Reorder): void;
+    /** Reorders the palette colors based on the selected option. */
+    protected selectOption(item: Reorder): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/color-palette/menu/color-palette-reorder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-palette-reorder.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/menu/color-palette-reorder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAGnF,aAAK,OAAO;IACX,GAAG,QAAQ;IACX,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,IAAI,SAAS;IACb,KAAK,UAAU;CACf;AAED,KAAK,QAAQ,GAAG;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAA;CAC1B,CAAA;AAED,qBACa,mBAAoB,SAAQ,UAAU;IAClD,MAAM,CAAC,MAAM,4BA+BX;IAGF,QAAQ,EAAG,iBAAiB,CAAC;IAG7B,MAAM,EAAE,MAAM,EAAE,CAAM;IAEf,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,oBAAoB,IAAI,IAAI;IAM5B,MAAM;IAuBN,YAAY,CAAC,IAAI,EAAE,OAAO;CAiC1B;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,uBAAuB,EAAE,mBAAmB,CAAC;KAC7C;CACD"}
+{"version":3,"file":"color-palette-reorder.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/menu/color-palette-reorder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAGnF,aAAK,OAAO;IACX,GAAG,QAAQ;IACX,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,IAAI,SAAS;IACb,KAAK,UAAU;CACf;AAED,KAAK,QAAQ,GAAG;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAA;CAC1B,CAAA;AAED;;GAEG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IAClD,MAAM,CAAC,MAAM,4BAAY;IAEzB,6DAA6D;IAEtD,QAAQ,EAAG,iBAAiB,CAAC;IAEpC,wCAAwC;IAEjC,MAAM,EAAE,MAAM,EAAE,CAAM;IAE7B,yCAAyC;IAClC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,oBAAoB,IAAI,IAAI;IAM5B,MAAM;IAuBN,gEAAgE;IAChE,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO;CAiCpC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,uBAAuB,EAAE,mBAAmB,CAAC;KAC7C;CACD"}

package/dist/components/color-palette/menu/color-palette-reorder.js

@@ -5,11 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import colorsea from '../../../utils/colorsea-wrapper.js';
-import { LitElement, html, css } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { EventEmitter } from '../../../utils/EventEmitter.js';
-import { condCustomElement } from '../../../decorators/condCustomElement.js';
+import styles from './color-palette-reorder.styles.js';
 var Reorder;
 (function (Reorder) {
     Reorder["Hue"] = "Hue";
@@ -20,12 +20,18 @@ var Reorder;
     Reorder["Blue"] = "Blue";
     Reorder["Alpha"] = "Alpha";
 })(Reorder || (Reorder = {}));
+/**
+ * A companion UI to color-palette-menu for when the client selects reorder.
+ */
 let ColorPaletteReorder = class ColorPaletteReorder extends LitElement {
     constructor() {
         super(...arguments);
+        /** The colors that can be reordered. */
         this.colors = [];
+        /** Public way to subscribe to events. */
         this.emitter = new EventEmitter();
     }
+    static { this.styles = [styles]; }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.emitter.clear();
@@ -47,6 +53,7 @@ let ColorPaletteReorder = class ColorPaletteReorder extends LitElement {
 			</menu>
 		`;
     }
+    /** Reorders the palette colors based on the selected option. */
     selectOption(item) {
         // Create colorsea array
         const csColors = this.colors.map((color) => {
@@ -79,38 +86,6 @@ let ColorPaletteReorder = class ColorPaletteReorder extends LitElement {
         this.emitter.emit('submit', colors);
     }
 };
-ColorPaletteReorder.styles = [
-    css `
-			:host {
-				display: block;
-			}
-			
-			menu {
-				display: flex;
-				flex-direction: column;
-				gap: .5rem;
-				background-color: rgb(27, 27, 27);
-				padding: .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;
-					}
-				}
-			}
-		`
-];
 __decorate([
     query('absolute-container')
 ], ColorPaletteReorder.prototype, "absolute", void 0);
@@ -118,6 +93,6 @@ __decorate([
     property({ type: Array })
 ], ColorPaletteReorder.prototype, "colors", void 0);
 ColorPaletteReorder = __decorate([
-    condCustomElement('color-palette-reorder')
+    customElement('color-palette-reorder')
 ], ColorPaletteReorder);
 export { ColorPaletteReorder };

package/dist/components/color-palette/menu/color-palette-reorder.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=color-palette-reorder.styles.d.ts.map

package/dist/components/color-palette/menu/color-palette-reorder.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette-reorder.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/menu/color-palette-reorder.styles.ts"],"names":[],"mappings":";AAEA,wBA6BE"}

package/dist/components/color-palette/menu/color-palette-reorder.styles.js

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+export default css `
+	: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;
+			}
+		}
+	}
+`;

package/dist/components/color-palette/storybook/color-palette-invalid.stories.d.ts

@@ -1,11 +1,29 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import { PaletteSettings } from '../color-palette-utils.js';
-declare const meta: Meta;
-export default meta;
-type Props = {
-    colors: string[];
-} & PaletteSettings;
-type Story = StoryObj<Props>;
+import { Story } from './color-palette.stories.js';
+declare const _default: {
+    title: string;
+    tags: string[];
+    id?: import("storybook/internal/csf").ComponentId;
+    includeStories?: RegExp | string[];
+    excludeStories?: RegExp | string[];
+    component?: string | undefined;
+    subcomponents?: Record<string, string> | undefined;
+    play?: import("storybook/internal/csf").PlayFunction<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args> | undefined;
+    globals?: import("storybook/internal/csf").Globals | undefined;
+    decorators?: import("storybook/internal/csf").DecoratorFunction<import("@storybook/web-components").WebComponentsRenderer, {
+        [x: string]: any;
+    }> | import("storybook/internal/csf").DecoratorFunction<import("@storybook/web-components").WebComponentsRenderer, {
+        [x: string]: any;
+    }>[] | undefined;
+    parameters?: import("@storybook/web-components-vite").Parameters | undefined;
+    args?: Partial<import("@storybook/web-components-vite").Args> | undefined;
+    argTypes?: Partial<import("@storybook/web-components-vite").ArgTypes<import("@storybook/web-components-vite").Args>> | undefined;
+    loaders?: import("storybook/internal/csf").LoaderFunction<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args> | import("storybook/internal/csf").LoaderFunction<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args>[] | undefined;
+    beforeEach?: import("storybook/internal/csf").BeforeEach<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args> | import("storybook/internal/csf").BeforeEach<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args>[] | undefined;
+    afterEach?: import("storybook/internal/csf").AfterEach<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args> | import("storybook/internal/csf").AfterEach<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args>[] | undefined;
+    render?: import("storybook/internal/csf").ArgsStoryFn<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args> | undefined;
+    mount?: ((context: import("storybook/internal/csf").StoryContext<import("@storybook/web-components").WebComponentsRenderer, import("@storybook/web-components-vite").Args>) => () => Promise<import("storybook/internal/csf").Canvas>) | undefined;
+};
+export default _default;
 export declare const InvalidColors: Story;
 export declare const OneColorGradient: Story;
 export declare const NonOverriddenPalette: Story;

package/dist/components/color-palette/storybook/color-palette-invalid.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-palette-invalid.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/storybook/color-palette-invalid.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAAmB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE7E,QAAA,MAAM,IAAI,EAAE,IAaX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,GAAG,eAAe,CAAC;AAEpD,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAqB7B,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KASnC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAS/B,CAAA"}
+{"version":3,"file":"color-palette-invalid.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/storybook/color-palette-invalid.stories.ts"],"names":[],"mappings":"AACA,OAA0B,EAAE,KAAK,EAAgB,MAAM,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAEpF,wBAIgB;AAEhB,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KASnC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAS/B,CAAA"}