@alegendstale/holly-components 1.4.0 → 2.0.2

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

@@ -1,19 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import { TemplateResult } from 'lit';
-import { PreserveAspectRatio } from '../responsive-svg/responsive-svg.js';
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { Props } from '../responsive-svg/responsive-svg.stories.js';
 declare const meta: Meta;
 export default meta;
-type Props = {
-    fontSize: number;
-    stroke: string;
-    fill: string;
-    autofit: boolean;
-    svgColors: boolean;
-    height: number;
-    width: number;
-    svg: SVGElement | TemplateResult<2> | string;
-    preserveAspectRatio: PreserveAspectRatio;
-};
 type Story = StoryObj<Props>;
 export declare const DrawSVG: Story;
 //# sourceMappingURL=draw-svg.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"draw-svg.stories.d.ts","sourceRoot":"","sources":["../../../src/components/draw-svg/draw-svg.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAG3C,OAAO,EAAE,mBAAmB,EAA8B,MAAM,qCAAqC,CAAC;AAEtG,QAAA,MAAM,IAAI,EAAE,IA0FX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC;IAAC,mBAAmB,EAAE,mBAAmB,CAAA;CAAE,CAAC;AAE7N,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AA+B7B,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC"}
+{"version":3,"file":"draw-svg.stories.d.ts","sourceRoot":"","sources":["../../../src/components/draw-svg/draw-svg.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK/E,OAA2B,EAAE,KAAK,EAAE,MAAM,6CAA6C,CAAC;AAQxF,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAgC7B,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC"}

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

@@ -1,109 +1,33 @@
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import DrawSVGRaw from '../../assets/DrawSVG.svg?raw';
-import { preserveAspectRatioOptions } from '../responsive-svg/responsive-svg.js';
+import { expect } from 'storybook/test';
+import ResponsiveSVGStory from '../responsive-svg/responsive-svg.stories.js';
+const argTypes = {
+    ...ResponsiveSVGStory.argTypes,
+    isIntersecting: { control: false },
+    emitter: { control: false }
+};
 const meta = {
-    title: 'Draw SVG',
+    title: 'SVG/Draw SVG',
     tags: ['autodocs'],
     component: 'draw-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' }
-            }
-        },
-        stroke: {
-            control: {
-                type: 'color',
-                presetColors: [
-                    'rebeccapurple', 'black'
-                ]
-            },
-            description: 'Set the Path stroke color',
-            table: {
-                defaultValue: { summary: 'rebeccapurple' }
-            }
-        },
-        fill: {
-            control: {
-                type: 'color',
-                presetColors: [
-                    'rebeccapurple', 'black'
-                ]
-            },
-            description: 'Set the SVG and Path fill color',
-            table: {
-                defaultValue: { summary: 'black' }
-            }
-        },
-        autofit: {
-            control: {
-                type: 'boolean'
-            },
-            description: 'Set whether the SVG will fill the container or available space',
-            table: {
-                defaultValue: { summary: 'false' }
-            },
-        },
-        svgColors: {
-            control: {
-                type: 'boolean',
-            },
-            description: 'Uses the colors from the SVG input',
-            table: {
-                defaultValue: { summary: 'false' }
-            }
-        },
-        height: {
-            control: {
-                type: 'number',
-            },
-            description: 'Set the SVG height',
-            table: {
-                defaultValue: { summary: '0' }
-            }
-        },
-        width: {
-            control: {
-                type: 'number',
-            },
-            description: 'Set the SVG width',
-            table: {
-                defaultValue: { summary: '0' }
-            }
-        },
-        svg: {
-            control: {
-                type: 'text',
-            },
-            description: 'Input a string representing an SVG'
-        },
-        preserveAspectRatio: {
-            control: 'select',
-            options: preserveAspectRatioOptions,
-            description: 'Set whether SVG preserves its aspect ratio alignment or spacing',
-            table: {
-                defaultValue: { summary: 'xMidYMid meet' }
-            }
-        },
-    }
+    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, "--svg-width": width, "--scale": scale }) => {
         const styles = {
+            'font-size': `${fontSize}px`,
             stroke,
             fill,
-            'font-size': `${fontSize}px`
+            '--svg-height': height !== '0em' ? height : null,
+            '--svg-width': width !== '0em' ? width : null,
+            '--scale': scale
         };
         return html `
 			<style>
-				draw-svg::part(path) {
+				draw-svg::part(__path) {
 					animation-iteration-count: infinite;
 				}
 			</style>
@@ -111,8 +35,6 @@ const Template = {
 			<draw-svg
 				?autofit=${autofit}
 				?svgColors=${svgColors}
-				height=${height}
-				width=${width}
 				.preserveAspectRatio=${preserveAspectRatio}
 				.svg=${svg}
 				style=${styleMap(styles)}
@@ -122,16 +44,18 @@ const Template = {
     },
 };
 export const DrawSVG = {
-    ...Template,
+    ...template,
     args: {
         fontSize: 128,
         stroke: 'red',
         fill: 'black',
         autofit: false,
         svgColors: false,
-        height: 0,
-        width: 0,
         svg: DrawSVGRaw,
         preserveAspectRatio: 'xMidYMid meet'
     },
+    play: async ({ canvasElement }) => {
+        const component = canvasElement.querySelector('draw-svg');
+        expect(component);
+    }
 };

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { LitElement, TemplateResult } from 'lit';
-type ViewBoxType = {
+type ViewBox = {
     x: number;
     y: number;
     width: number;
@@ -12,35 +12,55 @@ export type PreserveAspectRatioAlign = typeof preserveAspectRatioAlignOptions[nu
 export type PreserveAspectRatioSpacing = typeof preserveAspectRatioSpacingOptions[number];
 export type PreserveAspectRatio = typeof preserveAspectRatioOptions[number];
 export type CombinedAlignSpacing = `${PreserveAspectRatioAlign} ${PreserveAspectRatioSpacing}`;
+/**
+ * Responsively sizes SVGs to font-size or automatically fits them to the container.
+ *
+ * @cssprop {<length> (em)} --svg-width - Controls the width of the SVG. (Expects em value)
+ * @cssprop {<length> (em)} --svg-height - Controls the height of the SVG. (Expects em value)
+ * @cssprop {<length> (em)} --svg-width-fallback - Set by the component as a fallback in case --svg-width is not defined.
+ * @cssprop {<length> (em)} --svg-height-fallback - Set by the component as a fallback in case --svg-height is not defined.
+ * @cssprop {number} --scale - Controls the scale of the SVG when sized relative to font-size.
+ *
+ * @csspart __svg - Styles the SVG element.
+ * @csspart __path - Styles all child path elements of the SVG.
+ */
 export declare class ResponsiveSvg extends LitElement {
     static styles: import("lit").CSSResult[];
+    /** The SVG will attempt to fill its container. */
     autofit: boolean;
-    /** Uses the colors from the SVG input */
+    /** Use the colors from the SVG input. */
     svgColors: boolean;
-    height: number;
-    width: number;
+    /** @internal */
     private _svg?;
-    /** Must use a property expression (.) to set */
+    /**
+     * The SVG to responsively size.
+     * Must use a property expression (.) to set
+     * @type {SVGElement | TemplateResult<2> | string}
+     */
     set svg(val: SVGElement | TemplateResult<2> | string);
     get svg(): SVGElement | TemplateResult<2> | string;
+    /** @internal */
     private _preserveAspectRatio;
-    /** Defaults to xMidYMid meet */
+    /**
+     * Set whether SVG preserves its aspect ratio alignment or spacing.
+     * @type {PreserveAspectRatio}
+     * @default xMidYMid meet
+     */
     set preserveAspectRatio(val: PreserveAspectRatio | undefined);
     get preserveAspectRatio(): PreserveAspectRatio | undefined;
-    private _viewBox;
-    set viewBox(val: ViewBoxType);
-    get viewBox(): ViewBoxType;
+    /** The viewBox dimensions the SVG will use. */
+    protected viewBox: ViewBox;
     protected svgClasses(): {};
+    connectedCallback(): void;
     render(): TemplateResult<1> | undefined;
-    /**
-     * Applies a part name to all paths in the given element
-     */
+    /** Applies a part name to all paths in the given element. */
     private applyPartToPaths;
     /**
-     * @param svg
-     * @returns The SVG viewbox x, y, width, and height
+     * Gets the viewBox dimensions from an SVG element.
+     * @param svg The SVG to get the attribute from.
+     * @returns The SVG viewBox x, y, width, and height
      */
-    getViewBoxSize(svg: SVGElement): ViewBoxType | null;
+    getViewBoxSize(svg: SVGElement): ViewBox | null;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-{"version":3,"file":"responsive-svg.d.ts","sourceRoot":"","sources":["../../../src/components/responsive-svg/responsive-svg.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA6B,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ5E,KAAK,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,+BAA+B,+HAKlC,CAAC;AAEX,eAAO,MAAM,iCAAiC,4BAA6B,CAAC;AAE5E,eAAO,MAAM,0BAA0B,+eAG7B,CAAC;AAEX,MAAM,MAAM,wBAAwB,GAAG,OAAO,+BAA+B,CAAC,MAAM,CAAC,CAAC;AACtF,MAAM,MAAM,0BAA0B,GAAG,OAAO,iCAAiC,CAAC,MAAM,CAAC,CAAC;AAC1F,MAAM,MAAM,mBAAmB,GAAG,OAAO,0BAA0B,CAAC,MAAM,CAAC,CAAC;AAC5E,MAAM,MAAM,oBAAoB,GAAG,GAAG,wBAAwB,IAAI,0BAA0B,EAAE,CAAC;AAQ/F,qBACa,aAAc,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BA+CX;IAGF,OAAO,EAAE,OAAO,CAAS;IAEzB,yCAAyC;IAEzC,SAAS,EAAE,OAAO,CAAS;IAG3B,MAAM,EAAE,MAAM,CAAK;IAGnB,KAAK,EAAE,MAAM,CAAK;IAElB,OAAO,CAAC,IAAI,CAAC,CAAiC;IAC9C,gDAAgD;IAChD,IACI,GAAG,CAAC,GAAG,EAAE,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,MAAM,EASnD;IACD,IAAI,GAAG,IAVM,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,MAAM,CAYnD;IAED,OAAO,CAAC,oBAAoB,CAAkC;IAC9D,gCAAgC;IAChC,IACI,mBAAmB,CAAC,GAAG,EAAE,mBAAmB,GAAG,SAAS,EAE3D;IACD,IAAI,mBAAmB,IAHM,mBAAmB,GAAG,SAAS,CAW3D;IAED,OAAO,CAAC,QAAQ,CAAoD;IACpE,IACI,OAAO,CAAC,GAAG,EAAE,WAAW,EAE3B;IACD,IAAI,OAAO,IAHM,WAAW,CAc3B;IAGD,SAAS,CAAC,UAAU;IAIpB,MAAM;IA2CN;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAaxB;;;OAGG;IACI,cAAc,CAAC,GAAG,EAAE,UAAU,GAAG,WAAW,GAAG,IAAI;CAM1D;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}
+{"version":3,"file":"responsive-svg.d.ts","sourceRoot":"","sources":["../../../src/components/responsive-svg/responsive-svg.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAkB,MAAM,KAAK,CAAC;AAQvE,KAAK,OAAO,GAAG;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,+BAA+B,+HAKlC,CAAC;AAEX,eAAO,MAAM,iCAAiC,4BAA6B,CAAC;AAE5E,eAAO,MAAM,0BAA0B,+eAG7B,CAAC;AAEX,MAAM,MAAM,wBAAwB,GAAG,OAAO,+BAA+B,CAAC,MAAM,CAAC,CAAC;AACtF,MAAM,MAAM,0BAA0B,GAAG,OAAO,iCAAiC,CAAC,MAAM,CAAC,CAAC;AAC1F,MAAM,MAAM,mBAAmB,GAAG,OAAO,0BAA0B,CAAC,MAAM,CAAC,CAAC;AAC5E,MAAM,MAAM,oBAAoB,GAAG,GAAG,wBAAwB,IAAI,0BAA0B,EAAE,CAAC;AAQ/F;;;;;;;;;;;GAWG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BAAY;IAEzB,kDAAkD;IAElD,OAAO,EAAE,OAAO,CAAS;IAEzB,yCAAyC;IAEzC,SAAS,EAAE,OAAO,CAAS;IAE3B,gBAAgB;IAChB,OAAO,CAAC,IAAI,CAAC,CAAiC;IAC9C;;;;OAIG;IACH,IACI,GAAG,CAAC,GAAG,EAAE,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,MAAM,EASnD;IACD,IAAI,GAAG,IAVM,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,MAAM,CAYnD;IAED,gBAAgB;IAChB,OAAO,CAAC,oBAAoB,CAAkC;IAC9D;;;;OAIG;IACH,IACI,mBAAmB,CAAC,GAAG,EAAE,mBAAmB,GAAG,SAAS,EAE3D;IACD,IAAI,mBAAmB,IAHM,mBAAmB,GAAG,SAAS,CAW3D;IAED,+CAA+C;IAC/C,SAAS,CAAC,OAAO,EAAE,OAAO,CAAuC;IAGjE,SAAS,CAAC,UAAU;IAIpB,iBAAiB,IAAI,IAAI;IAkBzB,MAAM;IAwCN,6DAA6D;IAC7D,OAAO,CAAC,gBAAgB;IAaxB;;;;OAIG;IACI,cAAc,CAAC,GAAG,EAAE,UAAU,GAAG,OAAO,GAAG,IAAI;CAMtD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}

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

@@ -4,13 +4,13 @@ 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, state } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { condCustomElement } from '../../decorators/condCustomElement.js';
 import { parseSVG } from '../../utils/basicUtils.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { isTemplateResult } from 'lit/directive-helpers.js';
+import styles from './responsive-svg.styles.js';
 export const preserveAspectRatioAlignOptions = [
     "none",
     "xMinYMin", "xMidYMin", "xMaxYMin",
@@ -26,17 +26,34 @@ const preserveAspectRatioSet = new Set(preserveAspectRatioOptions);
 function isPreserveAspectRatio(value) {
     return preserveAspectRatioSet.has(value);
 }
+/**
+ * Responsively sizes SVGs to font-size or automatically fits them to the container.
+ *
+ * @cssprop {<length> (em)} --svg-width - Controls the width of the SVG. (Expects em value)
+ * @cssprop {<length> (em)} --svg-height - Controls the height of the SVG. (Expects em value)
+ * @cssprop {<length> (em)} --svg-width-fallback - Set by the component as a fallback in case --svg-width is not defined.
+ * @cssprop {<length> (em)} --svg-height-fallback - Set by the component as a fallback in case --svg-height is not defined.
+ * @cssprop {number} --scale - Controls the scale of the SVG when sized relative to font-size.
+ *
+ * @csspart __svg - Styles the SVG element.
+ * @csspart __path - Styles all child path elements of the SVG.
+ */
 let ResponsiveSvg = class ResponsiveSvg extends LitElement {
     constructor() {
         super(...arguments);
+        /** The SVG will attempt to fill its container. */
         this.autofit = false;
-        /** Uses the colors from the SVG input */
+        /** Use the colors from the SVG input. */
         this.svgColors = false;
-        this.height = 0;
-        this.width = 0;
-        this._viewBox = { x: 0, y: 0, width: 0, height: 0 };
+        /** The viewBox dimensions the SVG will use. */
+        this.viewBox = { x: 0, y: 0, width: 0, height: 0 };
     }
-    /** Must use a property expression (.) to set */
+    static { this.styles = [styles]; }
+    /**
+     * The SVG to responsively size.
+     * Must use a property expression (.) to set
+     * @type {SVGElement | TemplateResult<2> | string}
+     */
     set svg(val) {
         const _svg = val instanceof SVGElement
             ? val : isTemplateResult(val)
@@ -49,7 +66,11 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
     get svg() {
         return this._svg ?? '';
     }
-    /** Defaults to xMidYMid meet */
+    /**
+     * Set whether SVG preserves its aspect ratio alignment or spacing.
+     * @type {PreserveAspectRatio}
+     * @default xMidYMid meet
+     */
     set preserveAspectRatio(val) {
         this._preserveAspectRatio = val;
     }
@@ -63,32 +84,28 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
         // Otherwise return the preserveAspectRatio the user set OR default value
         return this._preserveAspectRatio || 'xMidYMid meet';
     }
-    set viewBox(val) {
-        this._viewBox = val;
+    // For classes inheriting from responsive-svg (e.g. draw-svg)
+    svgClasses() {
+        return {};
     }
-    get viewBox() {
+    connectedCallback() {
+        super.connectedCallback();
         if (this.svg instanceof SVGElement) {
             const _viewBox = this.getViewBoxSize(this.svg);
-            const _width = Number(this.svg.getAttribute('width'));
-            const _height = Number(this.svg.getAttribute('height'));
-            // Use viewbox values first, otherwise use height and width attributes.
-            return _viewBox ?? { x: 0, y: 0, width: _width || 0, height: _height || 0 };
+            const _width = this.svg.getAttribute('width');
+            const _height = this.svg.getAttribute('height');
+            this.viewBox = _viewBox ?? { x: 0, y: 0, width: Number(_width) || 0, height: Number(_height) || 0 };
+        }
+        else {
+            const _width = this.style.getPropertyValue('--svg-width');
+            const _height = this.style.getPropertyValue('--svg-height');
+            this.viewBox = { x: 0, y: 0, width: parseFloat(_width) || 0, height: parseFloat(_height) || 0 };
         }
-        return this._viewBox;
-    }
-    // For classes inheriting from responsive-svg (e.g. draw-svg)
-    svgClasses() {
-        return {};
     }
     render() {
-        const width = this.width !== 0 ? this.width : this.viewBox.width;
-        const height = this.height !== 0 ? this.height : this.viewBox.height;
+        const viewBox = this.viewBox;
         const preserveAspectRatio = this.preserveAspectRatio;
         const svgClasses = this.svgClasses();
-        const styles = {
-            '--svg-width': `${width}em`,
-            '--svg-height': `${height}em`,
-        };
         // Check if svg exists, otherwise early return
         if (typeof this.svg === 'string')
             return html `<p style="font-size: initial;">⚠️ SVG Error</p>`;
@@ -96,21 +113,24 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
             // SVGElement provided as input
             if (this.svg instanceof SVGElement) {
                 const clonedSVG = this.svg.cloneNode(true);
-                this.applyPartToPaths(clonedSVG, 'path');
-                return buildSVG(Array.from(clonedSVG.children), width, height);
+                this.applyPartToPaths(clonedSVG, '__path');
+                return buildSVG(Array.from(clonedSVG.children), viewBox);
             }
             // TemplateResult<2> provided as input
             else
-                return buildSVG(this.svg, width, height);
+                return buildSVG(this.svg, viewBox);
         }
-        function buildSVG(svg, width, height) {
+        function buildSVG(svg, viewBox) {
             if (svg) {
                 return html `
 					<svg
-						part="svg"
+						part="__svg"
 						class=${classMap(svgClasses)}
-						style=${styleMap(styles)}
-						viewBox="0 0 ${width} ${height}"
+						style=${styleMap({
+                    '--svg-width-fallback': `${viewBox.width}em`,
+                    '--svg-height-fallback': `${viewBox.height}em`,
+                })}
+						viewBox="${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}"
 						preserveAspectRatio=${preserveAspectRatio}
 						xmlns="http://www.w3.org/2000/svg"
 					>
@@ -120,9 +140,7 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
             }
         }
     }
-    /**
-     * Applies a part name to all paths in the given element
-     */
+    /** Applies a part name to all paths in the given element. */
     applyPartToPaths(element, partValue) {
         if (element instanceof Element) {
             if (element.tagName.toLowerCase() === 'path') {
@@ -135,8 +153,9 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
         }
     }
     /**
-     * @param svg
-     * @returns The SVG viewbox x, y, width, and height
+     * Gets the viewBox dimensions from an SVG element.
+     * @param svg The SVG to get the attribute from.
+     * @returns The SVG viewBox x, y, width, and height
      */
     getViewBoxSize(svg) {
         const viewBox = svg.getAttribute('viewBox')?.split(' ');
@@ -145,76 +164,19 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
         return { x: +viewBox[0], y: +viewBox[1], width: +viewBox[2], height: +viewBox[3] };
     }
 };
-ResponsiveSvg.styles = [
-    css `
-			:host {
-				display: block;
-				--svg-width: 0;
-				--svg-height: 0;
-				--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) / 100 * var(--scale));
-				height: calc(var(--svg-height) / 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%;
-			}
-		`,
-];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ResponsiveSvg.prototype, "autofit", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ResponsiveSvg.prototype, "svgColors", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], ResponsiveSvg.prototype, "height", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], ResponsiveSvg.prototype, "width", void 0);
 __decorate([
     property({ type: Object })
 ], ResponsiveSvg.prototype, "svg", null);
 __decorate([
     property({ type: String, reflect: true })
 ], ResponsiveSvg.prototype, "preserveAspectRatio", null);
-__decorate([
-    state()
-], ResponsiveSvg.prototype, "viewBox", null);
 ResponsiveSvg = __decorate([
-    condCustomElement('responsive-svg')
+    customElement('responsive-svg')
 ], ResponsiveSvg);
 export { ResponsiveSvg };

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

@@ -1,18 +1,19 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { TemplateResult } from 'lit';
 import { PreserveAspectRatio } from './responsive-svg.js';
 declare const meta: Meta;
 export default meta;
-type Props = {
+export type Props = {
     fontSize: number;
     stroke: string;
     fill: string;
     autofit: boolean;
     svgColors: boolean;
-    height: number;
-    width: number;
     svg: SVGElement | TemplateResult<2> | string;
     preserveAspectRatio: PreserveAspectRatio;
+    '--svg-height': string;
+    '--svg-width': string;
+    '--scale': number;
 };
 type Story = StoryObj<Props>;
 export declare const SVG: Story;

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

@@ -1 +1 @@
-{"version":3,"file":"responsive-svg.stories.d.ts","sourceRoot":"","sources":["../../../src/components/responsive-svg/responsive-svg.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAMhD,OAAO,EAAE,mBAAmB,EAA8B,MAAM,qBAAqB,CAAC;AAEtF,QAAA,MAAM,IAAI,EAAE,IA0FX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC;IAAC,mBAAmB,EAAE,mBAAmB,CAAA;CAAE,CAAC;AAE7N,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAyB7B,eAAO,MAAM,GAAG,EAAE,KAYjB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAWnC,CAAC"}
+{"version":3,"file":"responsive-svg.stories.d.ts","sourceRoot":"","sources":["../../../src/components/responsive-svg/responsive-svg.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAMhD,OAAO,EAAE,mBAAmB,EAA8B,MAAM,qBAAqB,CAAC;AAkEtF,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,MAAM,KAAK,GAAG;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,UAAU,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC;IAC7C,mBAAmB,EAAE,mBAAmB,CAAC;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAA;CACjB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AA0B7B,eAAO,MAAM,GAAG,EAAE,KAWjB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoBzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAU/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KASnC,CAAC"}