@alegendstale/holly-components 2.0.1 → 2.0.2

package/dist/components/absolute-container/absolute-container.js

@@ -66,7 +66,7 @@ let AbsoluteContainer = class AbsoluteContainer extends LitElement {
         };
         return html `
 			<dialog
-				part='dialog'
+				part='__dialog'
 				style=${styleMap(dialogStyles)}
 				@mousedown=${(e) => {
             if (!(e.target instanceof HTMLElement))

package/dist/components/bottom-sheet/bottom-sheet.js

@@ -86,7 +86,7 @@ let BottomSheet = class BottomSheet extends LitElement {
 			>
 				<button 
 					id="handle"
-					part="handle"
+					part="__handle"
 					@pointerdown=${this.pointerDown}
 					@pointermove=${this.pointerMove}
 					@pointerup=${this.pointerUp}
@@ -100,7 +100,7 @@ let BottomSheet = class BottomSheet extends LitElement {
 				
 				<div
 					id='content'
-					part="content"
+					part="__content"
 					tabindex='0'
 					@touchstart=${this.touchDown}
 					@touchend=${this.touchUp}

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

@@ -17,8 +17,8 @@ export type CombinedAlignSpacing = `${PreserveAspectRatioAlign} ${PreserveAspect
  *
  * @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-auto-width - Set by the component as a fallback in case --svg-width is not defined.
- * @cssprop {<length> (em)} --svg-auto-height - Set by the component as a fallback in case --svg-height is not defined.
+ * @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.

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,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAQvD,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;IAYzB,MAAM;IA0CN,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"}
+{"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

@@ -31,8 +31,8 @@ function isPreserveAspectRatio(value) {
  *
  * @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-auto-width - Set by the component as a fallback in case --svg-width is not defined.
- * @cssprop {<length> (em)} --svg-auto-height - Set by the component as a fallback in case --svg-height is not defined.
+ * @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.
@@ -92,19 +92,20 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
         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'));
-            this.viewBox = _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 };
         }
     }
     render() {
         const viewBox = this.viewBox;
         const preserveAspectRatio = this.preserveAspectRatio;
         const svgClasses = this.svgClasses();
-        const styles = {
-            '--svg-auto-width': `${viewBox.width}em`,
-            '--svg-auto-height': `${viewBox.height}em`,
-        };
         // Check if svg exists, otherwise early return
         if (typeof this.svg === 'string')
             return html `<p style="font-size: initial;">⚠️ SVG Error</p>`;
@@ -125,7 +126,10 @@ let ResponsiveSvg = class ResponsiveSvg extends LitElement {
 					<svg
 						part="__svg"
 						class=${classMap(svgClasses)}
-						style=${styleMap(styles)}
+						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"

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,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,KAU7B,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"}
+{"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"}

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

@@ -63,8 +63,8 @@ const argTypes = {
             defaultValue: { summary: '1' },
         },
     },
-    '--svg-auto-height': { control: false },
-    '--svg-auto-width': { control: false },
+    '--svg-height-fallback': { control: false },
+    '--svg-width-fallback': { control: false },
     __svg: { control: false },
     __path: { control: false },
 };
@@ -117,7 +117,9 @@ export const TemplateResult2 = {
         fill: 'black',
         autofit: false,
         svgColors: false,
-        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 = {

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

@@ -25,8 +25,8 @@ export default css `
 		/* Remove extra vertical space in inline element reserved for character descenders */
 		vertical-align: top;
 
-		width: calc(var(--svg-width, var(--svg-auto-width)) / 100 * var(--scale));
-		height: calc(var(--svg-height, var(--svg-auto-height)) / 100 * var(--scale));
+		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 {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"private": false,
-	"version": "2.0.1",
+	"version": "2.0.2",
 	"name": "@alegendstale/holly-components",
 	"description": "Reusable UI components created using lit",
 	"type": "module",
@@ -101,4 +101,4 @@
 		"@vitest/coverage-v8": "^4.0.15"
 	},
 	"customElements": "custom-elements.json"
-}
+}