@alegendstale/holly-components 1.4.0 → 2.0.2

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

@@ -4,18 +4,29 @@ 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 } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { ColorPalette } from '../color-palette.js';
 import { ColorPaletteMenu } from '../menu/color-palette-menu.js';
 import { defaultSettings } from '../color-palette-utils.js';
 import { ColorPaletteEditor } from '../editor/color-palette-editor.js';
-import { condCustomElement } from '../../../decorators/condCustomElement.js';
+import styles from './color-palette-component.styles.js';
+/**
+ * color-palette components combined.
+ *
+ * @dependency color-palette
+ * @dependency bottom-sheet
+ * @dependency color-palette-menu
+ * @dependency absolute-container
+ * @dependency color-palette-editor
+ */
 let ColorPaletteComponent = class ColorPaletteComponent extends LitElement {
     constructor() {
         super(...arguments);
+        /** The palette colors. */
         this.colors = [];
+        /** The palette settings. */
         this.settings = {
             height: defaultSettings.height,
             width: defaultSettings.width,
@@ -26,10 +37,12 @@ let ColorPaletteComponent = class ColorPaletteComponent extends LitElement {
             override: defaultSettings.override,
             aliases: []
         };
+        /** Whether the palette is in edit mode. */
         this.editMode = false;
+        /** Whether the screen is mobile sized. */
         this.isMobile = false;
-        this.edit = false;
     }
+    static { this.styles = [styles]; }
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
         const observer = new ResizeObserver((entries) => {
@@ -155,17 +168,6 @@ let ColorPaletteComponent = class ColorPaletteComponent extends LitElement {
 		`;
     }
 };
-ColorPaletteComponent.styles = [
-    css `
-			:host {
-				display: block;
-			}
-
-			absolute-container::part(dialog)::backdrop {
-				background-color: rgba(0, 0, 0, .8);
-			}
-		`
-];
 __decorate([
     query('color-palette')
 ], ColorPaletteComponent.prototype, "palette", void 0);
@@ -184,10 +186,7 @@ __decorate([
 __decorate([
     state()
 ], ColorPaletteComponent.prototype, "isMobile", void 0);
-__decorate([
-    state()
-], ColorPaletteComponent.prototype, "edit", void 0);
 ColorPaletteComponent = __decorate([
-    condCustomElement('color-palette-component')
+    customElement('color-palette-component')
 ], ColorPaletteComponent);
 export { ColorPaletteComponent };

package/dist/components/color-palette/component/color-palette-component.stories.d.ts

@@ -1,10 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { PaletteSettings } from '../color-palette-utils.js';
 declare const meta: Meta;
 export default meta;
 type Props = {
     colors: string[];
-} & PaletteSettings;
+    settings: PaletteSettings;
+    editMode: boolean;
+};
 type Story = StoryObj<Props>;
 export declare const ManyItems: Story;
 export declare const Gradient: Story;

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

@@ -1 +1 @@
-{"version":3,"file":"color-palette-component.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/component/color-palette-component.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAAa,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEvE,QAAA,MAAM,IAAI,EAAE,IAiBX,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;AAiC7B,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC"}
+{"version":3,"file":"color-palette-component.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/component/color-palette-component.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/E,OAAO,EAAa,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAWvE,QAAA,MAAM,IAAI,EAAE,IAUX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IACZ,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,eAAe,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAA;CACjB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAuB7B,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAC"}

package/dist/components/color-palette/component/color-palette-component.stories.js

@@ -1,22 +1,23 @@
 import { html } from 'lit';
 import { Direction } from '../color-palette-utils.js';
+const argTypes = {
+    palette: { control: false },
+    absolute: { control: false },
+    isMobile: { control: false },
+    colors: { control: 'object' },
+    settings: { control: 'object' },
+    editMode: { control: 'boolean' }
+};
 const meta = {
     title: 'Color Palette/Component',
     tags: ['autodocs'],
     component: 'color-palette-component',
     subcomponents: {
-        ColorPaletteComponent: 'color-palette-component',
+        ColorPalette: 'color-palette',
         ColorPaletteMenu: 'color-palette-menu',
         ColorPaletteEditor: 'color-palette-editor'
     },
-    argTypes: {
-        direction: {
-            options: ['row', 'column'],
-            control: {
-                type: 'select',
-            }
-        },
-    }
+    argTypes
 };
 export default meta;
 const colors = [
@@ -27,21 +28,12 @@ const colors = [
     '#7F5D18'
 ];
 const ColorPaletteTemplate = {
-    render: ({ colors, height, width, direction, gradient, preventHover, hideText, override, aliases }) => {
-        const settings = {
-            height,
-            width,
-            direction,
-            gradient,
-            preventHover,
-            hideText,
-            override,
-            aliases
-        };
+    render: ({ colors, settings, editMode }) => {
         return html `
 			<color-palette-component
 				.colors=${colors}
 				.settings=${settings}
+				?editMode=${editMode}
 			>
 			</color-palette-component>
 		`;
@@ -51,27 +43,33 @@ export const ManyItems = {
     ...ColorPaletteTemplate,
     args: {
         colors,
-        height: 150,
-        width: 700,
-        direction: Direction.Column,
-        gradient: false,
-        preventHover: false,
-        hideText: false,
-        override: false,
-        aliases: ['', '', 'test', '', '']
+        settings: {
+            height: 150,
+            width: 700,
+            direction: Direction.Column,
+            gradient: false,
+            preventHover: false,
+            hideText: false,
+            override: false,
+            aliases: ['', '', 'test', '', '']
+        },
+        editMode: false
     },
 };
 export const Gradient = {
     ...ColorPaletteTemplate,
     args: {
         colors,
-        height: 150,
-        width: 700,
-        direction: Direction.Column,
-        gradient: true,
-        preventHover: false,
-        hideText: false,
-        override: false,
-        aliases: ['', '', 'test', '', '']
+        settings: {
+            height: 150,
+            width: 700,
+            direction: Direction.Column,
+            gradient: true,
+            preventHover: false,
+            hideText: false,
+            override: false,
+            aliases: ['', '', 'test', '', '']
+        },
+        editMode: false
     },
 };

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { css } from 'lit';
+export default css `
+	:host {
+		display: block;
+	}
+
+	absolute-container::part(dialog)::backdrop {
+		background-color: rgba(0, 0, 0, 0.8);
+	}
+`;

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

@@ -3,7 +3,8 @@ import { PaletteSettings } from '../color-palette-utils.js';
 import { Combination } from '../../../utils/generateUtils.js';
 import colorsea from '../../../utils/colorsea-wrapper.js';
 import { EventEmitter } from '../../../utils/EventEmitter.js';
-declare enum SelectedInput {
+import './settings-item.js';
+export declare enum SelectedInput {
     Color_Picker = "Color Picker",
     Generate = "Generate",
     Image = "Image",
@@ -12,34 +13,47 @@ declare enum SelectedInput {
 type EventMap = {
     submit: [colors: string[], settings: PaletteSettings];
 };
+/**
+ * An editor which can assist in modifying new or existing color palettes.
+ *
+ * @dependency setting-item
+ *
+ * @cssprop {<color>} --cta-background - The call to action background color.
+ */
 export declare class ColorPaletteEditor extends LitElement {
     static styles: import("lit").CSSResult[];
+    /** The wrapper element. */
     palette: HTMLDivElement;
+    /** The palette colors to be edited. */
     colors: string[];
+    /** The palette settings to be edited. */
     settings: PaletteSettings;
+    /** The editing input that will be used. */
     selectedInput: SelectedInput;
+    /** The color theory combination used when generating colors. */
     combination: Combination;
+    /** The base color used when generating colors. */
     baseColor?: ReturnType<typeof colorsea>;
-    colorPickerDisabled: boolean;
+    /** @internal Whether the color input is enabled. */
+    private colorPickerDisabled;
+    /** Public way to subscribe to events. */
     emitter: EventEmitter<EventMap>;
     disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
-    renderSettings(): import("lit-html").TemplateResult<1>;
-    pickerOption(): import("lit-html").TemplateResult<1>;
-    generateOption(): import("lit-html").TemplateResult<1>;
-    imageOption(): import("lit-html").TemplateResult<1>;
-    urlOption(): import("lit-html").TemplateResult<1>;
-}
-export declare class SettingItem extends LitElement {
-    static styles: import("lit").CSSResult[];
-    name: string;
-    description: string;
-    render(): import("lit-html").TemplateResult<1>;
+    /** Renders the settings fields. */
+    private renderSettings;
+    /** Renders the picker option. */
+    private pickerOption;
+    /** Renders the generate option. */
+    private generateOption;
+    /** Renders the image option. */
+    private imageOption;
+    /** Renders the URL option. */
+    private urlOption;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'color-palette-editor': ColorPaletteEditor;
-        'setting-item': SettingItem;
     }
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"color-palette-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/editor/color-palette-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EAA8B,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAE,WAAW,EAAkB,MAAM,iCAAiC,CAAC;AAC9E,OAAO,QAAQ,MAAM,oCAAoC,CAAC;AAK1D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAK9D,aAAK,aAAa;IACjB,YAAY,iBAAiB;IAC7B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,GAAG,QAAQ;CACX;AAED,KAAK,QAAQ,GAAG;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;CACtD,CAAC;AAEF,qBACa,kBAAmB,SAAQ,UAAU;IACjD,MAAM,CAAC,MAAM,4BAmJX;IAGF,OAAO,EAAG,cAAc,CAAC;IAGzB,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,QAAQ,EAAE,eAAe,CASvB;IAGF,aAAa,EAAE,aAAa,CAA8B;IAG1D,WAAW,EAAE,WAAW,CAAsB;IAG9C,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;IAGxC,mBAAmB,EAAE,OAAO,CAAS;IAE9B,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,oBAAoB,IAAI,IAAI;IAI5B,MAAM;IAkGN,cAAc;IAmGd,YAAY;IAkBZ,cAAc;IAiDd,WAAW;IA0JX,SAAS;CAsCT;AAED,qBACa,WAAY,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,4BAkCX;IAGF,IAAI,EAAE,MAAM,CAAM;IAGlB,WAAW,EAAE,MAAM,CAAM;IAEzB,MAAM;CASN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,kBAAkB,CAAC;QAC3C,cAAc,EAAE,WAAW,CAAA;KAC3B;CACD"}
+{"version":3,"file":"color-palette-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/editor/color-palette-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAA8B,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAE,WAAW,EAAkB,MAAM,iCAAiC,CAAC;AAC9E,OAAO,QAAQ,MAAM,oCAAoC,CAAC;AAK1D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAI9D,OAAO,oBAAoB,CAAC;AAE5B,oBAAY,aAAa;IACxB,YAAY,iBAAiB;IAC7B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,GAAG,QAAQ;CACX;AAED,KAAK,QAAQ,GAAG;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;CACtD,CAAC;AAEF;;;;;;GAMG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IACjD,MAAM,CAAC,MAAM,4BAAY;IAEzB,2BAA2B;IAEpB,OAAO,EAAG,cAAc,CAAC;IAEhC,uCAAuC;IAEhC,MAAM,EAAE,MAAM,EAAE,CAAM;IAE7B,yCAAyC;IAElC,QAAQ,EAAE,eAAe,CAS9B;IAEF,2CAA2C;IAEpC,aAAa,EAAE,aAAa,CAA8B;IAEjE,gEAAgE;IAEzD,WAAW,EAAE,WAAW,CAAsB;IAErD,kDAAkD;IAE3C,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;IAE/C,oDAAoD;IAEpD,OAAO,CAAC,mBAAmB,CAAkB;IAE7C,yCAAyC;IAClC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,oBAAoB,IAAI,IAAI;IAI5B,MAAM;IAkGN,mCAAmC;IACnC,OAAO,CAAC,cAAc;IAmGtB,iCAAiC;IACjC,OAAO,CAAC,YAAY;IAkBpB,mCAAmC;IACnC,OAAO,CAAC,cAAc;IAiDtB,gCAAgC;IAChC,OAAO,CAAC,WAAW;IA6JnB,8BAA8B;IAC9B,OAAO,CAAC,SAAS;CAsCjB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,kBAAkB,CAAC;KAC3C;CACD"}

package/dist/components/color-palette/editor/color-palette-editor.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 } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { ArrowUpToLine, createElement, Image, Link, Pipette, Shuffle } from 'lucide';
 import { defaultSettings, Direction } from '../color-palette-utils.js';
 import { Combination, generateColors } from '../../../utils/generateUtils.js';
@@ -16,18 +16,28 @@ import { CanvasImage } from '../../canvas/canvas-image.js';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { EventEmitter } from '../../../utils/EventEmitter.js';
 import { ColorPalette } from '../color-palette.js';
-import { condCustomElement } from '../../../decorators/condCustomElement.js';
-var SelectedInput;
+import styles from './color-palette-editor.styles.js';
+import './settings-item.js';
+export var SelectedInput;
 (function (SelectedInput) {
     SelectedInput["Color_Picker"] = "Color Picker";
     SelectedInput["Generate"] = "Generate";
     SelectedInput["Image"] = "Image";
     SelectedInput["URL"] = "URL";
 })(SelectedInput || (SelectedInput = {}));
+/**
+ * An editor which can assist in modifying new or existing color palettes.
+ *
+ * @dependency setting-item
+ *
+ * @cssprop {<color>} --cta-background - The call to action background color.
+ */
 let ColorPaletteEditor = class ColorPaletteEditor extends LitElement {
     constructor() {
         super(...arguments);
+        /** The palette colors to be edited. */
         this.colors = [];
+        /** The palette settings to be edited. */
         this.settings = {
             height: defaultSettings.height,
             width: defaultSettings.width,
@@ -38,11 +48,16 @@ let ColorPaletteEditor = class ColorPaletteEditor extends LitElement {
             override: defaultSettings.override,
             aliases: []
         };
+        /** The editing input that will be used. */
         this.selectedInput = SelectedInput.Color_Picker;
+        /** The color theory combination used when generating colors. */
         this.combination = Combination.Random;
+        /** @internal Whether the color input is enabled. */
         this.colorPickerDisabled = false;
+        /** Public way to subscribe to events. */
         this.emitter = new EventEmitter();
     }
+    static { this.styles = [styles]; }
     disconnectedCallback() {
         this.emitter.clear();
     }
@@ -142,6 +157,7 @@ let ColorPaletteEditor = class ColorPaletteEditor extends LitElement {
 			</div>
 		`;
     }
+    /** Renders the settings fields. */
     renderSettings() {
         return html `
 			<setting-item
@@ -245,6 +261,7 @@ let ColorPaletteEditor = class ColorPaletteEditor extends LitElement {
 			</setting-item>
 		`;
     }
+    /** Renders the picker option. */
     pickerOption() {
         return html `
 			<setting-item
@@ -263,6 +280,7 @@ let ColorPaletteEditor = class ColorPaletteEditor extends LitElement {
 			</setting-item>
 		`;
     }
+    /** Renders the generate option. */
     generateOption() {
         this.colorPickerDisabled = this.combination === Combination.Random;
         return html `
@@ -312,6 +330,7 @@ let ColorPaletteEditor = class ColorPaletteEditor extends LitElement {
 			</setting-item>
 		`;
     }
+    /** Renders the image option. */
     imageOption() {
         let hex = '';
         let urlRef = createRef();
@@ -354,7 +373,7 @@ let ColorPaletteEditor = class ColorPaletteEditor extends LitElement {
             if (!URL.canParse(url) || !canvasEl)
                 return;
             const canvasImage = canvasEl;
-            canvasImage.updateImage(url, this.palette.getBoundingClientRect().width, this.palette.getBoundingClientRect().height);
+            canvasImage.imageURL = url;
             await updateColors();
         };
         return html `
@@ -389,7 +408,8 @@ let ColorPaletteEditor = class ColorPaletteEditor extends LitElement {
                 // new Notice(e);
             }
         }}
-					@contextmenu=${() => {
+					@contextmenu=${(e) => {
+            e.preventDefault();
             if (!urlRef.value)
                 return;
             const urlInput = urlRef.value;
@@ -445,6 +465,8 @@ let ColorPaletteEditor = class ColorPaletteEditor extends LitElement {
 				${ref(tooltipRef)}
 			>
 				<canvas-image
+					width=${this.palette.getBoundingClientRect().width}
+					height=${this.palette.getBoundingClientRect().height}
 					@mousemove=${(e) => {
             if (!(e.target instanceof CanvasImage))
                 return;
@@ -462,6 +484,7 @@ let ColorPaletteEditor = class ColorPaletteEditor extends LitElement {
 			</tool-tip>
 		`;
     }
+    /** Renders the URL option. */
     urlOption() {
         let input;
         return html `
@@ -503,154 +526,6 @@ let ColorPaletteEditor = class ColorPaletteEditor extends LitElement {
 		`;
     }
 };
-ColorPaletteEditor.styles = [
-    css `
-			:host {
-				display: block;
-				contain: content;
-				width: 560px;
-				padding: 16px;
-				background-color: rgb(27, 27, 27);
-				color: rgba(245, 245, 245, .9);
-				border-radius: 5px;
-				
-				--cta-background: hsl(262, 83%, 69%);
-			}
-
-			input[type='file'] {
-				display: none;
-			}
-
-			:host([selectedInput="Color Picker"]) {
-				#color-palette-editor #colors {
-					div:nth-of-type(1) {
-						button[title="Color Picker"] {
-							background-color: var(--cta-background);
-						}
-					}
-					div:nth-of-type(2) {
-						canvas {
-							max-width: 100%;
-							max-height: fit-content;
-							object-fit: cover;
-						}
-					}
-				}
-			}
-
-			:host([selectedInput="Generate"]) {
-				#color-palette-editor #colors div {
-					button[title="Generate"] {
-						background-color: var(--cta-background);
-					}
-				}
-			}
-
-			:host([selectedInput="Image"]) {
-				#color-palette-editor #colors div {
-					button[title="Image"] {
-						background-color: var(--cta-background);
-					}
-				}
-			}
-
-			:host([selectedInput="URL"]) {
-				#color-palette-editor #colors div {
-					button[title="URL"] {
-						background-color: var(--cta-background);
-					}
-				}
-			}
-
-			#color-palette-editor {
-				display: flex;
-				flex-direction: column;
-				gap: .5rem;
-
-				h1 {
-					font-size: 2.25rem;
-				}
-
-				button {
-					cursor: pointer;
-				}
-
-				#colors {
-					div {
-						input:not([type='color']) {
-							color: rgb(245, 245, 245);
-							background-color: rgb(38, 38, 38);
-							border: none;
-							border-radius: 5px;
-							height: fit-content;
-							width: fit-content;
-							padding: .5rem;
-						}
-
-						select {
-							color: rgb(245, 245, 245);
-							background-color: rgb(38, 38, 38);
-							border: none;
-							border-radius: 5px;
-							height: fit-content;
-							width: fit-content;
-							padding: .5rem;
-						}
-
-						button {
-							color: rgb(245, 245, 245);
-							background-color: rgb(38, 38, 38);
-							border: none;
-							border-radius: 5px;
-							height: fit-content;
-							width: fit-content;
-							padding: 4px 12px;
-						}
-					}
-				}
-
-				#settings {
-					display: flex;
-					flex-direction: column;
-
-					input {
-						color: rgb(245, 245, 245);
-						background-color: rgb(38, 38, 38);
-						border: none;
-						border-radius: 5px;
-						height: fit-content;
-						width: fit-content;
-						padding: .5rem;
-					}
-
-					select {
-						color: rgb(245, 245, 245);
-						background-color: rgb(38, 38, 38);
-						border: none;
-						border-radius: 5px;
-						height: fit-content;
-						width: fit-content;
-						padding: .5rem;
-					}
-
-					#create-btn {
-						background-color: var(--cta-background);
-						color: white;
-						border-radius: 5px;
-						padding: 4px 12px;
-						user-select: none;
-						border: none;
-						width: fit-content;
-						align-self: flex-end;
-
-						&:hover {
-							background-color: hsl(calc( 262 - 3), calc( 83% * 1.02), calc( 69% * 1.15));
-						}
-					}
-				}
-			}
-		`,
-];
 __decorate([
     query('#color-palette-editor')
 ], ColorPaletteEditor.prototype, "palette", void 0);
@@ -673,67 +548,6 @@ __decorate([
     state()
 ], ColorPaletteEditor.prototype, "colorPickerDisabled", void 0);
 ColorPaletteEditor = __decorate([
-    condCustomElement('color-palette-editor')
+    customElement('color-palette-editor')
 ], ColorPaletteEditor);
 export { ColorPaletteEditor };
-let SettingItem = class SettingItem extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.name = '';
-        this.description = '';
-    }
-    render() {
-        return html `
-			<div>
-				<h3>${this.name}</h3>
-				<p>${this.description}</p>
-			</div>
-			<slot></slot>
-		`;
-    }
-};
-SettingItem.styles = [
-    css `
-			:host {
-				display: grid;
-				grid-template-columns: 1fr 1fr;
-				padding-block: 2%;
-			}
-
-			:host(:not([description])) p {
-				display: none;
-			}
-
-			h3 {
-				margin: 0;
-				font-size: 15px;
-			}
-
-			p {
-				margin: 0;
-				padding-top: 4px;
-				font-size: 12px;
-			}
-			
-			slot {
-				display: flex;
-				justify-self: flex-end;
-				align-items: center;
-				gap: 5%;
-			}
-
-			::slotted(input[type="color"]) {
-				border: none;
-			}
-		`
-];
-__decorate([
-    property({ type: String })
-], SettingItem.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], SettingItem.prototype, "description", void 0);
-SettingItem = __decorate([
-    condCustomElement('setting-item')
-], SettingItem);
-export { SettingItem };

package/dist/components/color-palette/editor/color-palette-editor.stories.d.ts

@@ -1,11 +1,18 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { Combination } from '../../../utils/generateUtils.js';
+import { SelectedInput } from './color-palette-editor.js';
 import { PaletteSettings } from '../color-palette-utils.js';
+import colorsea from '../../../utils/colorsea-wrapper.js';
 declare const meta: Meta;
 export default meta;
 type Props = {
     colors: string[];
     settings: PaletteSettings;
+    selectedInput: SelectedInput;
+    combination: Combination;
+    baseColor: ReturnType<typeof colorsea>;
+    '--cta-background': string;
 };
 type Story = StoryObj<Props>;
-export declare const Default: Story;
+export declare const Example: Story;
 //# sourceMappingURL=color-palette-editor.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-palette-editor.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/editor/color-palette-editor.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAMhE,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAG5D,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,MAAM,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,EAAE,eAAe,CAAA;CAAE,CAAC;AAE7D,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAwB7B,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}
+{"version":3,"file":"color-palette-editor.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/editor/color-palette-editor.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/E,OAAO,EAAE,WAAW,EAAkB,MAAM,iCAAiC,CAAC;AAE9E,OAAO,EAAsB,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE9E,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,OAAO,QAAQ,MAAM,oCAAoC,CAAC;AAkB1D,QAAA,MAAM,IAAI,EAAE,IAUX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IACZ,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,eAAe,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;IACvC,kBAAkB,EAAE,MAAM,CAAA;CAC1B,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AA4B7B,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}