expose width and height

src/components/Lottie/Lottie.svelte

@@ -11,6 +11,7 @@
     isReverseMode,
     createRenderConfig,
     isNullish,
+    isContainerWidth,
   } from './ts/utils';
   import { Tween } from 'svelte/motion';
 
@@ -49,7 +50,8 @@
     layout = { fit: 'contain', align: [0.5, 0.5] },
     animationId = '',
     lottiePlayer = $bindable(undefined),
-    height = '100lvh',
+    width = 'fluid',
+    height = 'auto',
     showDebugInfo = false,
     lottieState = createLottieState(),
     progress = $bindable(0),
@@ -396,7 +398,12 @@
   });
 </script>
 
-<div class="lottie-block">
+<div
+  class="lottie-block"
+  style="max-width: {isContainerWidth(width) ?
+    `var(--${width}-column-width)`
+  : width};"
+>
   {#if showDebugInfo && lottiePlayer}
     <Debug componentState={lottieState} />
   {/if}
@@ -420,11 +427,18 @@
   :global(.lottie-block) {
     position: relative;
     height: 100%;
+    width: 100%;
+    margin: 0 auto;
+    // to remove
+    border: 2px solid green;
 
     .lottie-container {
       width: 100%;
       height: 100%;
+      // to remove
+      border: 2px solid red;
     }
+
     canvas {
       width: 100%;
       height: 100%;

src/components/Lottie/demo/withScrollerBase.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import BodyText from '../../BodyText/BodyText.svelte';
   import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte';
   import Lottie from '../Lottie.svelte';
   import LottieSample from '../lottie/themesLottie.zip?url';
@@ -11,8 +12,14 @@
   let top = $state(0);
   let threshold = $state(0.5);
   let bottom = $state(1);
+
+  const dummyText = `Greetings, earthling. This placeholder text is running in debug mode. All bugs have been upgraded to features, and all features downgraded to TODOs. If you find yourself reading this, you are now the sysadmin of your own destiny. 
+
+  Remember the network is down because someone tripped over the Ethernet cable.  Keep calm and RTFM before summoning the wizard. In case of panic, type 'kill -9' and hope for the best. End of line. Insert witty comment here.`;
 </script>
 
+<BodyText text={dummyText} />
+
 <ScrollerBase
   {top}
   {threshold}
@@ -35,15 +42,21 @@
   {/snippet}
 </ScrollerBase>
 
+<BodyText text={dummyText} />
+
 <style lang="scss">
   @use '../../../scss/mixins' as mixins;
 
   .step-foreground-container {
     height: 100lvh;
     width: 50%;
     margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     h3 {
+      width: 100%;
       background-color: antiquewhite;
       text-align: center;
     }

src/components/Lottie/ts/types.ts

@@ -5,6 +5,7 @@ import {
   type DotLottie as DotLottieType,
 } from '@lottiefiles/dotlottie-web';
 import { type LottieState } from './lottieState.svelte';
+import type { ContainerWidth } from '../../@types/global';
 
 type DotlottieProps = {
   autoplay?: Config['autoplay'];
@@ -33,6 +34,7 @@ export type Props = DotlottieProps & {
   // Additional properties can be added here if needed
   lottiePlayer?: DotLottieType | undefined;
   showDebugInfo?: boolean;
+  width?: string | ContainerWidth;
   height?: string;
   lottieState?: LottieState;
   progress?: number;

src/components/Lottie/ts/utils.ts

@@ -1,5 +1,6 @@
 import type { DotLottie } from '@lottiefiles/dotlottie-web';
 import type { LottieState } from './lottieState.svelte';
+import type { ContainerWidth } from '$lib/components/@types/global';
 
 function constrain(n: number, low: number, high: number) {
   return Math.max(Math.min(n, high), low);
@@ -109,3 +110,18 @@ export function createRenderConfig() {
 export function isNullish(value: unknown): boolean {
   return value === null || value === undefined || value === '';
 }
+
+/**
+ * Checks if a value is of type ContainerWidth
+ */
+export function isContainerWidth(string: any): string is ContainerWidth {
+  return (
+    string === 'narrower' ||
+    string === 'narrow' ||
+    string === 'normal' ||
+    string === 'wide' ||
+    string === 'wider' ||
+    string === 'widest' ||
+    string === 'fluid'
+  );
+}