@alegendstale/holly-components 1.4.0 → 2.0.2

package/dist/components/color-palette/storybook/color-palette-invalid.stories.js

@@ -1,40 +1,11 @@
-import { html } from 'lit';
-import { defaultSettings } from '../color-palette-utils.js';
-const meta = {
+import ColorPaletteStory, { htmlTemplate } from './color-palette.stories.js';
+export default {
+    ...ColorPaletteStory,
     title: 'Color Palette/Palette/Invalid',
-    tags: ['autodocs'],
-    component: 'color-palette',
-    subcomponents: { ColorPaletteItem: 'color-palette-item' },
-    argTypes: {
-        direction: {
-            options: ['row', 'column'],
-            control: {
-                type: 'select',
-            }
-        },
-    }
-};
-export default meta;
-const Template = {
-    render: ({ colors, height, width, direction, gradient, preventHover, hideText, override, aliases }) => {
-        return html `
-			<color-palette
-				.colors=${colors}
-				height=${height || defaultSettings.height}
-				width=${width || defaultSettings.width}
-				direction=${direction || defaultSettings.direction}
-				?gradient=${gradient || defaultSettings.gradient}
-				?preventHover=${preventHover || defaultSettings.preventHover}
-				?hideText=${hideText || defaultSettings.hideText}
-				?override=${override || defaultSettings.override}
-				.aliases=${aliases}
-			>
-			</color-palette>
-		`;
-    },
+    tags: ['autodocs']
 };
 export const InvalidColors = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#444;',
@@ -43,7 +14,7 @@ export const InvalidColors = {
     },
 };
 export const OneColorGradient = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#444'
@@ -52,7 +23,7 @@ export const OneColorGradient = {
     }
 };
 export const NonOverriddenPalette = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             'rgb(var(--ctp-peach))'
@@ -60,7 +31,7 @@ export const NonOverriddenPalette = {
     }
 };
 export const InvalidSettings = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#555'
@@ -70,7 +41,7 @@ export const InvalidSettings = {
     }
 };
 export const InvalidColorsSettings = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#5'
@@ -80,7 +51,7 @@ export const InvalidColorsSettings = {
     }
 };
 export const InvalidDirections = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#555'

package/dist/components/color-palette/storybook/color-palette-valid.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 Hex: Story;
 export declare const HSL: Story;
 export declare const RGB: Story;

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

@@ -1 +1 @@
-{"version":3,"file":"color-palette-valid.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/storybook/color-palette-valid.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAA8B,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAExF,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,GAAG,EAAE,KAQjB,CAAA;AAED,eAAO,MAAM,GAAG,EAAE,KAQjB,CAAA;AAED,eAAO,MAAM,GAAG,EAAE,KAQjB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAA;AAED,eAAO,MAAM,yBAAyB,EAAE,KAavC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AACD,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAYnB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAQ/B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KASpB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KASvB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAA;AAED,eAAO,MAAM,GAAG,EAAE,KAOjB,CAAA"}
+{"version":3,"file":"color-palette-valid.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/storybook/color-palette-valid.stories.ts"],"names":[],"mappings":"AAEA,OAA0B,EAAE,KAAK,EAAgB,MAAM,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAEpF,wBAIgB;AAEhB,eAAO,MAAM,GAAG,EAAE,KAQjB,CAAA;AAED,eAAO,MAAM,GAAG,EAAE,KAQjB,CAAA;AAED,eAAO,MAAM,GAAG,EAAE,KAQjB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAA;AAED,eAAO,MAAM,yBAAyB,EAAE,KAavC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AACD,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAYnB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAQ/B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KASpB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KASvB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAA;AAED,eAAO,MAAM,GAAG,EAAE,KAOjB,CAAA"}

package/dist/components/color-palette/storybook/color-palette-valid.stories.js

@@ -1,40 +1,12 @@
-import { html } from 'lit';
-import { defaultSettings, Direction } from '../color-palette-utils.js';
-const meta = {
+import { Direction } from '../color-palette-utils.js';
+import ColorPaletteStory, { htmlTemplate } from './color-palette.stories.js';
+export default {
+    ...ColorPaletteStory,
     title: 'Color Palette/Palette/Valid',
-    tags: ['autodocs'],
-    component: 'color-palette',
-    subcomponents: { ColorPaletteItem: 'color-palette-item' },
-    argTypes: {
-        direction: {
-            options: ['row', 'column'],
-            control: {
-                type: 'select',
-            }
-        },
-    }
-};
-export default meta;
-const Template = {
-    render: ({ colors, height, width, direction, gradient, preventHover, hideText, override, aliases }) => {
-        return html `
-			<color-palette
-				.colors=${colors}
-				height=${height || defaultSettings.height}
-				width=${width || defaultSettings.width}
-				direction=${direction || defaultSettings.direction}
-				?gradient=${gradient || defaultSettings.gradient}
-				?preventHover=${preventHover || defaultSettings.preventHover}
-				?hideText=${hideText || defaultSettings.hideText}
-				?override=${override || defaultSettings.override}
-				.aliases=${aliases}
-			>
-			</color-palette>
-		`;
-    },
+    tags: ['autodocs']
 };
 export const Hex = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#434',
@@ -43,7 +15,7 @@ export const Hex = {
     },
 };
 export const HSL = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             'hsl(5, 20%, 70%);',
@@ -52,7 +24,7 @@ export const HSL = {
     },
 };
 export const RGB = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             'rgb(123, 555, 777);',
@@ -61,7 +33,7 @@ export const RGB = {
     },
 };
 export const NamedColors = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             'grey',
@@ -70,7 +42,7 @@ export const NamedColors = {
     },
 };
 export const URLWithSettings = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             'https://colorhunt.co/palette/3ec1d3f6f7d7ff9a00ff165d',
@@ -79,7 +51,7 @@ export const URLWithSettings = {
     },
 };
 export const HexHorizontalWithSettings = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#434',
@@ -93,7 +65,7 @@ export const HexHorizontalWithSettings = {
     },
 };
 export const Semicolon = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#111;',
@@ -102,7 +74,7 @@ export const Semicolon = {
     },
 };
 export const EightCharacterHex = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#00444555',
@@ -110,7 +82,7 @@ export const EightCharacterHex = {
     },
 };
 export const Black = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#000',
@@ -118,7 +90,7 @@ export const Black = {
     },
 };
 export const Hex_RGB_HSL = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#667',
@@ -128,7 +100,7 @@ export const Hex_RGB_HSL = {
     },
 };
 export const HeightDirection = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#434',
@@ -143,7 +115,7 @@ export const HeightDirection = {
     },
 };
 export const HorizontalGradient = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#444',
@@ -153,7 +125,7 @@ export const HorizontalGradient = {
     },
 };
 export const VerticalGradient = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#afc',
@@ -165,7 +137,7 @@ export const VerticalGradient = {
     },
 };
 export const Aliases = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#444',
@@ -181,7 +153,7 @@ export const Aliases = {
     },
 };
 export const AliasesSkipColor = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             'https://coolors.co/palette/606c38-283618-fefae0-dda15e-bc6c25',
@@ -193,7 +165,7 @@ export const AliasesSkipColor = {
     },
 };
 export const Width = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#999',
@@ -206,7 +178,7 @@ export const Width = {
     },
 };
 export const PreventHover = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#8ec178',
@@ -218,7 +190,7 @@ export const PreventHover = {
     },
 };
 export const Override = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             'var(--color-orange)',
@@ -227,7 +199,7 @@ export const Override = {
     },
 };
 export const RGBA_CSS_Variable = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             'rgba(var(--color-green-rgb), .5)',
@@ -236,7 +208,7 @@ export const RGBA_CSS_Variable = {
     },
 };
 export const RGBSettings = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             'rgb(123, 555, 777);',
@@ -246,7 +218,7 @@ export const RGBSettings = {
     },
 };
 export const Others = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             'https://colorhunt.co/palette/3ec1d3f6f7d7ff9a00ff165d',
@@ -256,7 +228,7 @@ export const Others = {
     },
 };
 export const WhiteBlue = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#fff',
@@ -266,7 +238,7 @@ export const WhiteBlue = {
     },
 };
 export const OrangeBlue = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             'https://colorhunt.co/palette/3ec1d3f6f7d7ff9a00ff165d',
@@ -275,7 +247,7 @@ export const OrangeBlue = {
     },
 };
 export const GreyGradient = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             '#444',
@@ -287,7 +259,7 @@ export const GreyGradient = {
     },
 };
 export const URL = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [
             'https://coolors.co/2c2423-1e5f7b-839199-64abbb-88cc67-a0713e-dc6bad-bd93f9-f2647c-edcb79'

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

@@ -1,11 +1,25 @@
-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 = {
+type Props = PaletteSettings & {
     colors: string[];
-} & PaletteSettings;
-type Story = StoryObj<Props>;
+    editMode: boolean;
+    maxWidth: number;
+    '--palette-height': string;
+    '--palette-width': string;
+    '--palette-background-color': string;
+    '--palette-color': string;
+    '--palette-column-flex-basis': string;
+    '--palette-corners': string;
+};
+export type Story = StoryObj<Props>;
+export declare const htmlTemplate: {
+    render: ({ colors, height, width, direction, gradient, preventHover, hideText, override, aliases, editMode, maxWidth, "--palette-background-color": backgroundColor, "--palette-color": color, "--palette-column-flex-basis": columnFlexBasis, "--palette-corners": corners }: Props) => import("lit-html").TemplateResult<1>;
+};
+export declare const tsTemplate: {
+    render: ({ colors, height, width, direction, gradient, preventHover, hideText, override, aliases, editMode, maxWidth, "--palette-background-color": backgroundColor, "--palette-color": color, "--palette-column-flex-basis": columnFlexBasis, "--palette-corners": corners }: Props) => import("lit-html").TemplateResult<1>;
+};
 export declare const Empty: Story;
 export declare const OneItem: Story;
 export declare const ManyItems: Story;

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

@@ -1 +1 @@
-{"version":3,"file":"color-palette.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/storybook/color-palette.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAA8B,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGxF,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;AAuB7B,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC"}
+{"version":3,"file":"color-palette.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/storybook/color-palette.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/E,OAAO,EAA8B,eAAe,EAAE,MAAM,2BAA2B,CAAC;AA8BxF,QAAA,MAAM,IAAI,EAAE,IAOX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,eAAe,GAAG;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,4BAA4B,EAAE,MAAM,CAAC;IACrC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,6BAA6B,EAAE,MAAM,CAAC;IACtC,mBAAmB,EAAE,MAAM,CAAA;CAC3B,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAYpC,eAAO,MAAM,YAAY;mRACsP,KAAK;CAyBnR,CAAC;AAEF,eAAO,MAAM,UAAU;mRACwP,KAAK;CAanR,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC"}

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

@@ -1,19 +1,39 @@
 import { html } from 'lit';
 import { defaultSettings, Direction } from '../color-palette-utils.js';
 import { pluginToPaletteSettings } from '../../../utils/basicUtils.js';
+import { styleMap } from 'lit/directives/style-map.js';
+const argTypes = {
+    colors: { control: 'object' },
+    height: { control: 'number' },
+    width: { control: 'number' },
+    direction: {
+        control: { type: 'select' },
+        options: Object.values(Direction),
+    },
+    preventHover: { control: 'boolean' },
+    hideText: { control: 'boolean' },
+    override: { control: 'boolean' },
+    aliases: { control: 'object' },
+    editMode: { control: 'boolean' },
+    maxWidth: { control: 'number' },
+    pluginSettings: { control: false },
+    settings: { control: false },
+    status: { control: false },
+    emitter: { control: false },
+    '--palette-height': { control: false },
+    '--palette-width': { control: false },
+    '--palette-background-color': { control: 'color' },
+    '--palette-color': { control: 'color' },
+    '--palette-column-flex-basis': { control: 'text' },
+    '--palette-corners': { control: 'text' }
+};
 const meta = {
     title: 'Color Palette/Palette',
     tags: ['autodocs'],
     component: 'color-palette',
     subcomponents: { ColorPaletteItem: 'color-palette-item' },
-    argTypes: {
-        direction: {
-            options: ['row', 'column'],
-            control: {
-                type: 'select',
-            }
-        },
-    }
+    excludeStories: ['htmlTemplate', 'tsTemplate'],
+    argTypes
 };
 export default meta;
 const colors = [
@@ -24,32 +44,63 @@ const colors = [
     '#7F5D18'
 ];
 const settings = { ...pluginToPaletteSettings(defaultSettings), aliases: ['', '', 'test', '', ''] };
-const Template = {
-    render: ({ colors, height, width, direction, gradient, preventHover, hideText, override, aliases }) => {
+export const htmlTemplate = {
+    render: ({ colors, height, width, direction, gradient, preventHover, hideText, override, aliases, editMode, maxWidth, "--palette-background-color": backgroundColor, "--palette-color": color, "--palette-column-flex-basis": columnFlexBasis, "--palette-corners": corners }) => {
+        const styles = {
+            "--palette-background-color": backgroundColor,
+            "--palette-color": color,
+            "--palette-column-flex-basis": columnFlexBasis,
+            "--palette-corner": corners
+        };
+        return html `
+			<color-palette
+				.colors=${colors}
+				height=${height || defaultSettings.height}
+				width=${width || defaultSettings.width}
+				direction=${direction || defaultSettings.direction}
+				?gradient=${gradient || defaultSettings.gradient}
+				?preventHover=${preventHover || defaultSettings.preventHover}
+				?hideText=${hideText || defaultSettings.hideText}
+				?override=${override || defaultSettings.override}
+				.aliases=${aliases}
+				?editMode=${editMode}
+				style=${styleMap(styles)}
+			>
+			</color-palette>
+		`;
+    },
+};
+export const tsTemplate = {
+    render: ({ colors, height, width, direction, gradient, preventHover, hideText, override, aliases, editMode, maxWidth, "--palette-background-color": backgroundColor, "--palette-color": color, "--palette-column-flex-basis": columnFlexBasis, "--palette-corners": corners }) => {
         const palette = document.createElement('color-palette');
         palette.colors = colors;
         palette.settings = { height, width, direction, gradient, preventHover, hideText, override, aliases };
+        palette.editMode = editMode;
+        palette.style.setProperty('--palette-background-color', backgroundColor);
+        palette.style.setProperty('--palette-color', color);
+        palette.style.setProperty('--palette-column-flex-basis', columnFlexBasis);
+        palette.style.setProperty('--palette-corner', corners);
         return html `
 			${palette}
 		`;
     },
 };
 export const Empty = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [],
         ...settings
     },
 };
 export const OneItem = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors: [colors[0]],
         ...settings
     },
 };
 export const ManyItems = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors,
         height: 150,
@@ -63,7 +114,7 @@ export const ManyItems = {
     },
 };
 export const Gradient = {
-    ...Template,
+    ...htmlTemplate,
     args: {
         colors,
         height: 150,

package/dist/components/draw-svg/draw-svg.d.ts

@@ -3,11 +3,22 @@ import { EventEmitter } from '../../utils/EventEmitter.js';
 type EventMap = {
     intersection: [intersecting: boolean];
 };
+/**
+ * Animates the provided SVG paths as if they were being drawn.
+ *
+ * @dependency responsive-svg
+ *
+ * @event {boolean} intersection - Emits when the component enters or leaves the viewport.
+ * @prop emitter
+ */
 export declare class DrawSvg extends ResponsiveSvg {
     static styles: import("lit").CSSResult[];
+    /** Whether the SVG is intersecting with the client viewport. Useful for determining when to animate. */
     isIntersecting: boolean;
     protected svgClasses(): {};
+    /** @internal */
     protected intersectionObserver: IntersectionObserver;
+    /** Public way to subscribe to events. */
     emitter: EventEmitter<EventMap>;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/components/draw-svg/draw-svg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"draw-svg.d.ts","sourceRoot":"","sources":["../../../src/components/draw-svg/draw-svg.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D,KAAK,QAAQ,GAAG;IACf,YAAY,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAA;CACrC,CAAA;AAED,qBACa,OAAQ,SAAQ,aAAa;IACzC,MAAM,CAAC,MAAM,4BAwCX;IAGF,cAAc,EAAE,OAAO,CAAS;IAEhC,SAAS,CAAC,UAAU,IAAI,EAAE;IAQ1B,SAAS,CAAC,oBAAoB,uBAG5B;IAEK,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAsB;IAE5D,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;CAK5B;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
+{"version":3,"file":"draw-svg.d.ts","sourceRoot":"","sources":["../../../src/components/draw-svg/draw-svg.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D,KAAK,QAAQ,GAAG;IACf,YAAY,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAA;CACrC,CAAA;AAED;;;;;;;GAOG;AACH,qBACa,OAAQ,SAAQ,aAAa;IACzC,MAAM,CAAC,MAAM,4BAAqC;IAElD,wGAAwG;IAEjG,cAAc,EAAE,OAAO,CAAS;IAEvC,SAAS,CAAC,UAAU,IAAI,EAAE;IAQ1B,gBAAgB;IAChB,SAAS,CAAC,oBAAoB,uBAG5B;IAEF,yCAAyC;IAClC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAsB;IAE5D,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;CAK5B;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

package/dist/components/draw-svg/draw-svg.js

@@ -4,21 +4,32 @@ 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 { css } from 'lit';
-import { state } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { ResponsiveSvg } from '../responsive-svg/responsive-svg.js';
 import { EventEmitter } from '../../utils/EventEmitter.js';
-import { condCustomElement } from '../../decorators/condCustomElement.js';
+import styles from './draw-svg.styles.js';
+/**
+ * Animates the provided SVG paths as if they were being drawn.
+ *
+ * @dependency responsive-svg
+ *
+ * @event {boolean} intersection - Emits when the component enters or leaves the viewport.
+ * @prop emitter
+ */
 let DrawSvg = class DrawSvg extends ResponsiveSvg {
     constructor() {
         super(...arguments);
+        /** Whether the SVG is intersecting with the client viewport. Useful for determining when to animate. */
         this.isIntersecting = false;
+        /** @internal */
         this.intersectionObserver = new IntersectionObserver(([entry]) => {
             this.isIntersecting = entry.isIntersecting;
             this.emitter.emit('intersection', entry.isIntersecting);
         });
+        /** Public way to subscribe to events. */
         this.emitter = new EventEmitter();
     }
+    static { this.styles = [...ResponsiveSvg.styles, styles]; }
     svgClasses() {
         super.svgClasses();
         return {
@@ -34,51 +45,10 @@ let DrawSvg = class DrawSvg extends ResponsiveSvg {
         this.intersectionObserver.disconnect();
     }
 };
-DrawSvg.styles = [
-    ...ResponsiveSvg.styles,
-    css `
-			:host {
-				stroke: white;
-				fill: white;
-			}
-
-			/* Override responsive-svg path fill */
-			:host(:not([svgColors])) path {
-				fill: transparent;
-			}
-
-			path {
-				stroke-width: 2;
-				stroke-dasharray: 1000;
-				stroke-dashoffset: 1000;
-			}
-			
-			.animation {
-				path {
-					animation: textAnimation 2s ease-in-out 1 forwards;
-					will-change: fill, stroke-width, stroke-dashoffset;
-				}
-			}
-
-			@keyframes textAnimation {
-				0% {
-					stroke-dashoffset: 1000;
-				}
-				60% {
-					fill: transparent;
-				}
-				100% {
-					fill: inherit;
-					stroke-dashoffset: 0;
-					stroke-width: 1;
-				}
-			}
-		`,
-];
 __decorate([
     state()
 ], DrawSvg.prototype, "isIntersecting", void 0);
 DrawSvg = __decorate([
-    condCustomElement('draw-svg')
+    customElement('draw-svg')
 ], DrawSvg);
 export { DrawSvg };