@alegendstale/holly-components 1.4.0 → 2.0.2

package/dist/components/responsive-svg/responsive-svg.stories.js

@@ -5,111 +5,90 @@ import ServicesBottomRaw from '../../assets/services-bottom.svg?raw';
 import GotLeakz from '../../assets/GotLeakz.svg?raw';
 import ComicBackground from '../../assets/comic-background.svg?raw';
 import { preserveAspectRatioOptions } from './responsive-svg.js';
-const meta = {
-    title: 'Responsive SVG',
-    tags: ['autodocs'],
-    component: 'responsive-svg',
-    argTypes: {
-        fontSize: {
-            control: {
-                type: 'number',
-                step: 8
-            },
-            description: 'Set the font size in pixels the SVG will scale to (provided autofit is not being used)',
-            table: {
-                defaultValue: { summary: '128' }
-            }
+import { expect } from 'storybook/test';
+const argTypes = {
+    fontSize: {
+        control: {
+            type: 'number',
+            step: 8,
         },
-        stroke: {
-            control: {
-                type: 'color',
-                presetColors: [
-                    'rebeccapurple', 'black'
-                ]
-            },
-            description: 'Set the Path stroke color',
-            table: {
-                defaultValue: { summary: 'rebeccapurple' }
-            }
+        description: 'Set the font size in pixels the SVG will scale to (provided autofit is not being used)',
+        table: {
+            defaultValue: { summary: '128' },
         },
-        fill: {
-            control: {
-                type: 'color',
-                presetColors: [
-                    'rebeccapurple', 'black'
-                ]
-            },
-            description: 'Set the SVG and Path fill color',
-            table: {
-                defaultValue: { summary: 'black' }
-            }
+    },
+    stroke: {
+        control: {
+            type: 'color',
+            presetColors: ['rebeccapurple', 'black'],
         },
-        autofit: {
-            control: {
-                type: 'boolean'
-            },
-            description: 'Set whether the SVG will fill the container or available space',
-            table: {
-                defaultValue: { summary: 'false' }
-            },
+        description: 'Set the Path stroke color',
+        table: {
+            defaultValue: { summary: 'rebeccapurple' },
         },
-        svgColors: {
-            control: {
-                type: 'boolean',
-            },
-            description: 'Uses the colors from the SVG input',
-            table: {
-                defaultValue: { summary: 'false' }
-            }
+    },
+    fill: {
+        control: {
+            type: 'color',
+            presetColors: ['rebeccapurple', 'black'],
         },
-        height: {
-            control: {
-                type: 'number',
-            },
-            description: 'Set the SVG height',
-            table: {
-                defaultValue: { summary: '0' }
-            }
+        description: 'Set the SVG and Path fill color',
+        table: {
+            defaultValue: { summary: 'black' },
         },
-        width: {
-            control: {
-                type: 'number',
-            },
-            description: 'Set the SVG width',
-            table: {
-                defaultValue: { summary: '0' }
-            }
+    },
+    autofit: { control: 'boolean' },
+    svgColors: { control: 'boolean' },
+    preserveAspectRatio: {
+        control: 'select',
+        options: preserveAspectRatioOptions,
+    },
+    viewBox: { control: false },
+    '--svg-height': {
+        control: 'text',
+        table: {
+            defaultValue: { summary: '0em' },
         },
-        svg: {
-            control: {
-                type: 'text',
-            },
-            description: 'Input a string representing an SVG'
+    },
+    '--svg-width': {
+        control: 'text',
+        table: {
+            defaultValue: { summary: '0em' },
         },
-        preserveAspectRatio: {
-            control: 'select',
-            options: preserveAspectRatioOptions,
-            description: 'Set whether SVG preserves its aspect ratio alignment or spacing',
-            table: {
-                defaultValue: { summary: 'xMidYMid meet' }
-            }
+    },
+    '--scale': {
+        control: 'number',
+        description: 'Scale of the SVG',
+        table: {
+            defaultValue: { summary: '1' },
         },
-    }
+    },
+    '--svg-height-fallback': { control: false },
+    '--svg-width-fallback': { control: false },
+    __svg: { control: false },
+    __path: { control: false },
+};
+const meta = {
+    title: 'SVG/Responsive SVG',
+    tags: ['autodocs'],
+    component: 'responsive-svg',
+    argTypes,
 };
 export default meta;
-const Template = {
-    render: ({ fontSize, stroke, fill, autofit, svgColors, height, width, svg, preserveAspectRatio }) => {
+const template = {
+    render: ({ fontSize, stroke, fill, autofit, svgColors, svg, preserveAspectRatio, "--svg-height": height = '0em', "--svg-width": width = '0em', "--scale": scale }) => {
         const styles = {
             'font-size': `${fontSize}px`,
             stroke,
-            fill
+            fill,
+            '--svg-height': height !== '0em' ? height : null,
+            '--svg-width': width !== '0em' ? width : null,
+            '--scale': scale
         };
         return html `
 			<responsive-svg
 				?autofit=${autofit}
 				?svgColors=${svgColors}
-				height=${height}
-				width=${width}
 				.preserveAspectRatio=${preserveAspectRatio}
 				.svg=${svg}
 				style=${styleMap(styles)}
@@ -119,91 +98,96 @@ const Template = {
     },
 };
 export const SVG = {
-    ...Template,
+    ...template,
     args: {
         fontSize: 128,
         stroke: 'rebeccapurple',
         fill: 'black',
         autofit: false,
         svgColors: false,
-        height: 0,
-        width: 0,
-        svg: ResponsiveSVGRaw
+        svg: ResponsiveSVGRaw,
+        "--scale": 1
     },
 };
 export const TemplateResult2 = {
-    ...Template,
+    ...template,
     args: {
         fontSize: 128,
         stroke: 'rebeccapurple',
         fill: 'black',
         autofit: false,
         svgColors: false,
-        height: 128,
-        width: 128,
-        svg: svg `<path part="path" d="M 30 50 h 60 a 1 1 0 0 1 0 20 h -60 a 1 1 0 0 1 0 -40 h 30 v 70"/>`
+        svg: svg `<path d="M 30 50 h 60 a 1 1 0 0 1 0 20 h -60 a 1 1 0 0 1 0 -40 h 30 v 70"/>`,
+        "--svg-height": '120em',
+        "--svg-width": '120em'
     }
 };
 export const ServicesBottom = {
-    ...Template,
+    ...template,
     args: {
         fontSize: 128,
         stroke: 'rebeccapurple',
         fill: 'black',
         autofit: false,
         svgColors: false,
-        height: 128,
-        width: 128,
         svg: ServicesBottomRaw
     }
 };
 export const EmptyString = {
-    ...Template,
+    ...template,
     args: {
         fontSize: 128,
         stroke: 'rebeccapurple',
         fill: 'black',
         autofit: false,
         svgColors: false,
-        height: 0,
-        width: 0,
         svg: ''
     },
+    play: async ({ canvasElement }) => {
+        const component = canvasElement.querySelector('responsive-svg');
+        const svgElement = component?.querySelector('svg');
+        // Check if element exists
+        await expect(component).not.toBeNull();
+        // Make sure element didn't render an SVG
+        await expect(svgElement).toBeNull();
+    }
 };
 export const Invalid = {
-    ...Template,
+    ...template,
     args: {
         fontSize: 128,
         stroke: 'rebeccapurple',
         fill: 'black',
         autofit: false,
         svgColors: false,
-        height: 0,
-        width: 0,
         svg: 'test'
     },
+    play: async ({ canvasElement }) => {
+        const component = canvasElement.querySelector('responsive-svg');
+        const svgElement = component?.querySelector('svg');
+        // Check if element exists
+        await expect(component).not.toBeNull();
+        // Make sure element didn't render an SVG
+        await expect(svgElement).toBeNull();
+    }
 };
 export const SVGWithoutViewBox = {
-    ...Template,
+    ...template,
     args: {
         fontSize: 128,
         stroke: 'rebeccapurple',
         fill: 'black',
         autofit: false,
         svgColors: false,
-        height: 0,
-        width: 0,
         svg: GotLeakz
     },
 };
 export const SVGWithoutWidthHeight = {
-    ...Template,
+    ...template,
     args: {
         fontSize: 128,
         autofit: false,
         svgColors: true,
-        height: 0,
-        width: 0,
         svg: ComicBackground,
         preserveAspectRatio: 'none'
     },

package/dist/components/responsive-svg/responsive-svg.styles.d.ts

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

package/dist/components/responsive-svg/responsive-svg.styles.d.ts.map

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

package/dist/components/responsive-svg/responsive-svg.styles.js

@@ -0,0 +1,46 @@
+import { css } from 'lit';
+export default css `
+	:host {
+		display: block;
+		--scale: 1;
+	}
+
+	:host([autofit]),
+	:host([autofit]) svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	/* Size scaling based on font-size */
+	:host(:not([autofit])) {
+		/* Removes extra space from under SVG */
+		display: flex;
+	}
+
+	:host(:not([autofit])) svg {
+		/* Allow SVG to be manipulated by font size */
+		display: inline-block;
+		/* Change SVG size using font-size */
+		font-size: inherit;
+		/* Remove extra vertical space in inline element reserved for character descenders */
+		vertical-align: top;
+
+		width: calc(var(--svg-width, var(--svg-width-fallback)) / 100 * var(--scale));
+		height: calc(var(--svg-height, var(--svg-height-fallback)) / 100 * var(--scale));
+	}
+
+	:host(:not([svgColors])) svg {
+		/* Inherit fill to bypass default */
+		fill: inherit;
+	}
+
+	:host(:not([svgColors])) path {
+		fill: inherit;
+		stroke: inherit;
+	}
+
+	svg {
+		max-width: 100%;
+		max-height: 100%;
+	}
+`;

package/dist/components/tool-tip/tool-tip.d.ts

@@ -1,27 +1,42 @@
 import { LitElement } from "lit";
 import { client } from "../../utils/types.js";
-export type TriggerTypes = 'hover' | 'click' | 'manual';
-export declare const styles: import("lit").CSSResult;
+export declare const triggerTypes: readonly ["hover", "click", "manual"];
+export type TriggerTypes = typeof triggerTypes[number];
+/**
+ * A tooltip that can display information on hover or click
+ *
+ * @cssprop {<length>} --tooltip-x - The x position of the tooltip.
+ * @cssprop {<length>} --tooltip-y - The y position of the tooltip.
+ */
 export declare class ToolTip extends LitElement {
-    static styles: import("lit").CSSResult;
-    private _trigger;
+    static styles: import("lit").CSSResult[];
+    /** @internal */
     textEl?: HTMLParagraphElement;
+    /** Whether the tooltip can be visible. */
     display: boolean;
+    /** @internal */
+    private _trigger;
+    /**
+     * Which type of trigger the tool-tip will use.
+     * @type {TriggerTypes}
+     * @default manual
+     */
     set trigger(val: TriggerTypes);
     get trigger(): TriggerTypes;
+    /** The text to display on the tool-tip. */
     text: string;
     render(): import("lit-html").TemplateResult<1>;
-    /**
-     * Clamps the tooltip position to within the bounds
-     */
-    clampPosition: (pos: {
+    /** Clamps the tooltip position to within the bounds.  */
+    protected clampPosition(pos: {
         x: number;
         y: number;
-    }, bounds: DOMRect) => {
+    }, bounds: DOMRect): {
         x: number;
         y: number;
     };
+    /** Sets the tooltip position, clamped to a set of bounds. */
     setClampedPosition({ x, y }: client, bounds: DOMRect): void;
+    /** Sets the tooltip position. */
     setPosition({ x, y }: client): void;
 }
 declare global {

package/dist/components/tool-tip/tool-tip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-tip.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/tool-tip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAkB,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C,MAAM,MAAM,YAAY,GACtB,OAAO,GACP,OAAO,GACP,QAAQ,CAAA;AAEV,eAAO,MAAM,MAAM,yBAwDlB,CAAA;AAED,qBACa,OAAQ,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,0BAAU;IAEvB,OAAO,CAAC,QAAQ,CAA0B;IAG1C,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAG9B,OAAO,UAAS;IAEhB,IACI,OAAO,CAAC,GAAG,EAAE,YAAY,EAG5B;IACD,IAAI,OAAO,IAJM,YAAY,CAM5B;IAGD,IAAI,SAAM;IAEV,MAAM;IAYN;;OAEG;IACH,aAAa,GAAI,KAAK;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,QAAQ,OAAO;;;MAsB7D;IAEK,kBAAkB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO;IAIpD,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM;CAInC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
+{"version":3,"file":"tool-tip.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/tool-tip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C,eAAO,MAAM,YAAY,uCAAwC,CAAC;AAElE,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC,MAAM,CAAC,CAAC;AAEvD;;;;;GAKG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,4BAAY;IAEzB,gBAAgB;IAET,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAErC,0CAA0C;IAEnC,OAAO,EAAE,OAAO,CAAS;IAEhC,gBAAgB;IAChB,OAAO,CAAC,QAAQ,CAA0B;IAC1C;;;;OAIG;IACH,IACI,OAAO,CAAC,GAAG,EAAE,YAAY,EAG5B;IACD,IAAI,OAAO,IAJM,YAAY,CAM5B;IAED,2CAA2C;IAE3C,IAAI,EAAE,MAAM,CAAM;IAElB,MAAM;IAYN,yDAAyD;IACzD,SAAS,CAAC,aAAa,CAAE,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,MAAM,EAAE,OAAO;;;;IAwBvE,6DAA6D;IACtD,kBAAkB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO;IAI3D,iCAAiC;IAC1B,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM;CAInC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

package/dist/components/tool-tip/tool-tip.js

@@ -4,100 +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, html, LitElement } from "lit";
-import { property, query } from "lit/decorators.js";
-import { condCustomElement } from "../../decorators/condCustomElement.js";
-export const styles = css `
-	:host {
-		display: block;
-		position: relative;
-		--tooltip-x: 0;
-		--tooltip-y: 0;
-	}
-
-	/* Manual or Click appear when display is true */
-	:host(:not([trigger="hover"])[display]) p {
-		display: flex;
-	}
-
-	/* Hover appears when display is true and user is hovering */
-	:host([trigger="hover"][display]:hover) p {
-		display: flex;
-	}
-
-	/* Display nothing when there is no text */
-	:host([text=""]) #tip {
-		display: none;
-	}
-
-	p {
-		display: none;
-		align-items: center;
-		justify-content: center;
-
-		position: absolute;
-		background: #000000C0;
-		width: max-content;
-		min-width: 100px;
-		height: 40px;
-		text-align: center;
-		vertical-align: middle;
-		font-size: 18px;
-		font-weight: var(--font-medium);
-		color: #FAFAFA;
-		padding: 0;
-		margin: 0;
-		transform: translateX(-50%);
-
-		left: var(--tooltip-x);
-		top: var(--tooltip-y);
-
-		/* Obsidian Styling */
-		box-sizing: border-box;
-		animation: pop-down 200ms forwards ease-in-out;
-		box-shadow: 0 2px 8px var(--background-modifier-box-shadow);
-		border-radius: var(--radius-s);
-		line-height: var(--line-height-tight);
-		z-index: var(--layer-tooltip);
-		pointer-events: none;
-		word-break: normal;
-		overflow-wrap: anywhere;
-	}
-`;
+import { html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import styles from './tool-tip.styles.js';
+export const triggerTypes = ['hover', 'click', 'manual'];
+/**
+ * A tooltip that can display information on hover or click
+ *
+ * @cssprop {<length>} --tooltip-x - The x position of the tooltip.
+ * @cssprop {<length>} --tooltip-y - The y position of the tooltip.
+ */
 let ToolTip = class ToolTip extends LitElement {
     constructor() {
         super(...arguments);
-        this._trigger = "manual";
+        /** Whether the tooltip can be visible. */
         this.display = false;
+        /** @internal */
+        this._trigger = "manual";
+        /** The text to display on the tool-tip. */
         this.text = '';
-        /**
-         * Clamps the tooltip position to within the bounds
-         */
-        this.clampPosition = (pos, bounds) => {
-            if (!this.textEl || !bounds)
-                return { x: 0, y: 0 };
-            // Get tooltip bounds
-            let tooltipWidth = this.textEl.offsetWidth;
-            let tooltipHeight = this.textEl.offsetHeight;
-            // Set tooltip position left or right side of mouse based on whether cursor is halfway
-            let leftPosition = pos.x - bounds.left > bounds.width / 2 ? pos.x - bounds.left - 56 : pos.x - bounds.left + 64;
-            let halfTooltipWidth = tooltipWidth / 2;
-            // Clamp to left edge
-            if (leftPosition < 0 + halfTooltipWidth)
-                leftPosition = 0 + halfTooltipWidth;
-            else if (leftPosition + tooltipWidth > bounds.width + halfTooltipWidth)
-                leftPosition = bounds.width - tooltipWidth + halfTooltipWidth;
-            // Get cursor position & align tooltip centered to cursor (1/4 tooltip height)
-            let topPosition = pos.y - bounds.top - tooltipHeight / 4;
-            // Clamp to top edge
-            if (topPosition < 0)
-                topPosition = 0;
-            // Clamp to bottom edge
-            else if (topPosition + tooltipHeight > bounds.height)
-                topPosition = bounds.height - tooltipHeight;
-            return { x: leftPosition, y: topPosition };
-        };
     }
+    static { this.styles = [styles]; }
+    /**
+     * Which type of trigger the tool-tip will use.
+     * @type {TriggerTypes}
+     * @default manual
+     */
     set trigger(val) {
         this._trigger = val;
         if (val === 'hover')
@@ -117,15 +49,42 @@ let ToolTip = class ToolTip extends LitElement {
 			</p>
 		`;
     }
+    /** Clamps the tooltip position to within the bounds.  */
+    clampPosition(pos, bounds) {
+        if (!this.textEl || !bounds)
+            return { x: 0, y: 0 };
+        // Get tooltip bounds
+        let tooltipWidth = this.textEl.offsetWidth;
+        let tooltipHeight = this.textEl.offsetHeight;
+        // Set tooltip position left or right side of mouse based on whether cursor is halfway
+        let leftPosition = pos.x - bounds.left > bounds.width / 2 ? pos.x - bounds.left - 56 : pos.x - bounds.left + 64;
+        let halfTooltipWidth = tooltipWidth / 2;
+        // Clamp to left edge
+        if (leftPosition < 0 + halfTooltipWidth)
+            leftPosition = 0 + halfTooltipWidth;
+        else if (leftPosition + tooltipWidth > bounds.width + halfTooltipWidth)
+            leftPosition = bounds.width - tooltipWidth + halfTooltipWidth;
+        // Get cursor position & align tooltip centered to cursor (1/4 tooltip height)
+        let topPosition = pos.y - bounds.top - tooltipHeight / 4;
+        // Clamp to top edge
+        if (topPosition < 0)
+            topPosition = 0;
+        // Clamp to bottom edge
+        else if (topPosition + tooltipHeight > bounds.height)
+            topPosition = bounds.height - tooltipHeight;
+        return { x: leftPosition, y: topPosition };
+    }
+    ;
+    /** Sets the tooltip position, clamped to a set of bounds. */
     setClampedPosition({ x, y }, bounds) {
         this.setPosition(this.clampPosition({ x, y }, bounds));
     }
+    /** Sets the tooltip position. */
     setPosition({ x, y }) {
         this.style.setProperty('--tooltip-x', `${x}px`);
         this.style.setProperty('--tooltip-y', `${y}px`);
     }
 };
-ToolTip.styles = styles;
 __decorate([
     query('p')
 ], ToolTip.prototype, "textEl", void 0);
@@ -139,6 +98,6 @@ __decorate([
     property({ type: String, reflect: true })
 ], ToolTip.prototype, "text", void 0);
 ToolTip = __decorate([
-    condCustomElement('tool-tip')
+    customElement('tool-tip')
 ], ToolTip);
 export { ToolTip };

package/dist/components/tool-tip/tool-tip.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { TriggerTypes } from './tool-tip.js';
 declare const meta: Meta;
 export default meta;
@@ -6,8 +6,11 @@ type Props = {
     text: string;
     trigger: TriggerTypes;
     display: boolean;
+    '--tooltip-x': string;
+    '--tooltip-y': string;
 };
 type Story = StoryObj<Props>;
+export declare const Default: Story;
 export declare const Hover: Story;
 export declare const Click: Story;
 //# sourceMappingURL=tool-tip.stories.d.ts.map

package/dist/components/tool-tip/tool-tip.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-tip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/tool-tip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC;AAEvE,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAY7B,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC"}
+{"version":3,"file":"tool-tip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/tool-tip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/E,OAAO,EAAgB,YAAY,EAAE,MAAM,eAAe,CAAC;AAc3D,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAA;CACrB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAsB7B,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC"}

package/dist/components/tool-tip/tool-tip.stories.js

@@ -1,21 +1,51 @@
 import { html } from 'lit';
+import { triggerTypes } from './tool-tip.js';
+import { styleMap } from 'lit/directives/style-map.js';
+const argTypes = {
+    text: { control: 'text' },
+    trigger: {
+        control: 'select',
+        options: triggerTypes,
+    },
+    display: { control: 'boolean' },
+    '--tooltip-x': { control: 'text' },
+    '--tooltip-y': { control: 'text' }
+};
 const meta = {
     title: 'Tool Tip',
     tags: ['autodocs'],
     component: 'tool-tip',
+    argTypes
 };
 export default meta;
-const Template = {
-    render: ({ text, trigger, display }) => {
+const template = {
+    render: ({ text, trigger, display, "--tooltip-x": toolTipX, "--tooltip-y": toolTipY }) => {
+        const styles = {
+            '--tooltip-x': toolTipX,
+            '--tooltip-y': toolTipY
+        };
         return html `
-			<tool-tip text=${text} trigger=${trigger} ?display=${display}>
+			<tool-tip
+				text=${text}
+				trigger=${trigger}
+				?display=${display}
+				style=${styleMap(styles)}
+			>
 				<button>${trigger} me</button>
 			</tool-tip>
 		`;
     },
 };
+export const Default = {
+    ...template,
+    args: {
+        text: 'Default Story',
+        trigger: 'manual',
+        display: true
+    }
+};
 export const Hover = {
-    ...Template,
+    ...template,
     args: {
         text: 'hovered tooltip',
         trigger: 'hover',
@@ -23,7 +53,7 @@ export const Hover = {
     }
 };
 export const Click = {
-    ...Template,
+    ...template,
     args: {
         text: 'clicked tooltip',
         trigger: 'click',