funnel-gfx-wc 0.1.83 → 0.1.85

package/dist/cjs/funnel-app.cjs.entry.js

@@ -335,7 +335,7 @@ const actions = {
 };
 
 // WARNING:  generated file...
-const TW_VERSION = '4.1.11';
+const TW_VERSION = '4.1.12';
 
 const ColorPicker = props => {
     const { actions, state } = props;
@@ -428,14 +428,14 @@ const DataValues = props => {
 
 /**
  * anime.js - ESM
- * @version v4.1.2
+ * @version v4.1.3
  * @author Julian Garnier
  * @license MIT
  * @copyright (c) 2025 Julian Garnier
  * @see https://animejs.com
  */
 
-// Global types ///////////////////////////////////////////////////////////////
+// Global types ////////////////////////////////////////////////////////////////
 
 /**
  * @typedef {Object} DefaultsParams
@@ -466,17 +466,18 @@ const DataValues = props => {
 /** @typedef {JSAnimation|Timeline} Renderable */
 /** @typedef {Timer|Renderable} Tickable */
 /** @typedef {Timer&JSAnimation&Timeline} CallbackArgument */
-/** @typedef {Animatable|Tickable|Draggable|ScrollObserver|TextSplitter|Scope} Revertible */
+/** @typedef {Animatable|Tickable|WAAPIAnimation|Draggable|ScrollObserver|TextSplitter|Scope} Revertible */
 
-// Stagger types //////////////////////////////////////////////////////////////
+// Stagger types ///////////////////////////////////////////////////////////////
 
 /**
+ * @template T
  * @callback StaggerFunction
  * @param {Target} [target]
  * @param {Number} [index]
  * @param {Number} [length]
  * @param {Timeline} [tl]
- * @return {Number|String}
+ * @return {T}
  */
 
 /**
@@ -486,13 +487,13 @@ const DataValues = props => {
  * @property {Boolean} [reversed]
  * @property {Array.<Number>} [grid]
  * @property {('x'|'y')} [axis]
- * @property {String|StaggerFunction} [use]
+ * @property {String|((target: Target, i: Number, length: Number) => Number)} [use]
  * @property {Number} [total]
  * @property {EasingParam} [ease]
  * @property {TweenModifier} [modifier]
  */
 
-// Eases types ////////////////////////////////////////////////////////////////
+// Eases types /////////////////////////////////////////////////////////////////
 
 /**
  * @callback EasingFunction
@@ -520,7 +521,17 @@ const DataValues = props => {
 /** @typedef {Array.<TargetSelector>|TargetSelector} TargetsParam */
 /** @typedef {Array.<Target>} TargetsArray */
 
- // Callback types ////////////////////////////////////////////////////////////
+// Spring types ////////////////////////////////////////////////////////////////
+
+/**
+ * @typedef {Object} SpringParams
+ * @property {Number} [mass=1] - Mass, default 1
+ * @property {Number} [stiffness=100] - Stiffness, default 100
+ * @property {Number} [damping=10] - Damping, default 10
+ * @property {Number} [velocity=0] - Initial velocity, default 0
+ */
+
+ // Callback types //////////////////////////////////////////////////////////////
 
 /**
  * @template T
@@ -547,7 +558,7 @@ const DataValues = props => {
  * @property {Callback<T>} [onRender]
  */
 
-// Timer types ////////////////////////////////////////////////////////////////
+// Timer types /////////////////////////////////////////////////////////////////
 
 /**
  * @typedef {Object} TimerOptions
@@ -569,7 +580,7 @@ const DataValues = props => {
  * @typedef {TimerOptions & TickableCallbacks<Timer>} TimerParams
  */
 
-// Tween types ////////////////////////////////////////////////////////////////
+// Tween types /////////////////////////////////////////////////////////////////
 
 /**
  * @callback FunctionValue
@@ -640,7 +651,7 @@ const DataValues = props => {
 /** @typedef {WeakMap.<Target, TweenLookups>} TweenReplaceLookups */
 /** @typedef {Map.<Target, TweenLookups>} TweenAdditiveLookups */
 
-// Animation types ////////////////////////////////////////////////////////////
+// JSAnimation types ///////////////////////////////////////////////////////////
 
 /**
  * @typedef {Number|String|FunctionValue} TweenParamValue
@@ -714,7 +725,36 @@ const DataValues = props => {
  * @typedef {Record<String, TweenOptions | Callback<JSAnimation> | TweenModifier | boolean | PercentageKeyframes | DurationKeyframes | ScrollObserver> & TimerOptions & AnimationOptions & TweenParamsOptions & TickableCallbacks<JSAnimation> & RenderableCallbacks<JSAnimation>} AnimationParams
  */
 
-// Timeline types /////////////////////////////////////////////////////////////
+// Timeline types //////////////////////////////////////////////////////////////
+
+/**
+ * Accepts:<br>
+ * - `Number` - Absolute position in milliseconds (e.g., `500` places element at exactly 500ms)<br>
+ * - `'+=Number'` - Addition: Position element X ms after the last element (e.g., `'+=100'`)<br>
+ * - `'-=Number'` - Subtraction: Position element X ms before the last element's end (e.g., `'-=100'`)<br>
+ * - `'*=Number'` - Multiplier: Position element at a fraction of the total duration (e.g., `'*=.5'` for halfway)<br>
+ * - `'<'` - Previous end: Position element at the end position of the previous element<br>
+ * - `'<<'` - Previous start: Position element at the start position of the previous element<br>
+ * - `'<<+=Number'` - Combined: Position element relative to previous element's start (e.g., `'<<+=250'`)<br>
+ * - `'label'` - Label: Position element at a named label position (e.g., `'My Label'`)
+ *
+ * @typedef {Number|`+=${Number}`|`-=${Number}`|`*=${Number}`|'<'|'<<'|`<<+=${Number}`|`<<-=${Number}`|String} TimelinePosition
+ */
+
+/**
+ * Accepts:<br>
+ * - `Number` - Absolute position in milliseconds (e.g., `500` places animation at exactly 500ms)<br>
+ * - `'+=Number'` - Addition: Position animation X ms after the last animation (e.g., `'+=100'`)<br>
+ * - `'-=Number'` - Subtraction: Position animation X ms before the last animation's end (e.g., `'-=100'`)<br>
+ * - `'*=Number'` - Multiplier: Position animation at a fraction of the total duration (e.g., `'*=.5'` for halfway)<br>
+ * - `'<'` - Previous end: Position animation at the end position of the previous animation<br>
+ * - `'<<'` - Previous start: Position animation at the start position of the previous animation<br>
+ * - `'<<+=Number'` - Combined: Position animation relative to previous animation's start (e.g., `'<<+=250'`)<br>
+ * - `'label'` - Label: Position animation at a named label position (e.g., `'My Label'`)<br>
+ * - `stagger(String|Nummber)` - Stagger multi-elements animation positions (e.g., 10, 20, 30...)
+ *
+ * @typedef {TimelinePosition | StaggerFunction<Number|String>} TimelineAnimationPosition
+ */
 
 /**
  * @typedef {Object} TimelineOptions
@@ -726,7 +766,57 @@ const DataValues = props => {
  * @typedef {TimerOptions & TimelineOptions & TickableCallbacks<Timeline> & RenderableCallbacks<Timeline>} TimelineParams
  */
 
-// Animatable types ///////////////////////////////////////////////////////////
+// WAAPIAnimation types ////////////////////////////////////////////////////////
+
+/**
+ * @typedef {String|Number|Array<String>|Array<Number>} WAAPITweenValue
+ */
+
+/**
+ * @callback WAAPIFunctionValue
+ * @param {DOMTarget} target - The animated target
+ * @param {Number} index - The target index
+ * @param {Number} length - The total number of animated targets
+ * @return {WAAPITweenValue}
+ */
+
+/**
+ * @typedef {WAAPITweenValue|WAAPIFunctionValue|Array<String|Number|WAAPIFunctionValue>} WAAPIKeyframeValue
+ */
+
+/**
+ * @typedef {(animation: WAAPIAnimation) => void} WAAPICallback
+ */
+
+/**
+ * @typedef {Object} WAAPITweenOptions
+ * @property {WAAPIKeyframeValue} [to]
+ * @property {WAAPIKeyframeValue} [from]
+ * @property {Number|WAAPIFunctionValue} [duration]
+ * @property {Number|WAAPIFunctionValue} [delay]
+ * @property {EasingParam} [ease]
+ * @property {CompositeOperation} [composition]
+ */
+
+/**
+ * @typedef {Object} WAAPIAnimationOptions
+ * @property {Number|Boolean} [loop]
+ * @property {Boolean} [Reversed]
+ * @property {Boolean} [Alternate]
+ * @property {Boolean|ScrollObserver} [autoplay]
+ * @property {Number} [playbackRate]
+ * @property {Number|WAAPIFunctionValue} [duration]
+ * @property {Number|WAAPIFunctionValue} [delay]
+ * @property {EasingParam} [ease]
+ * @property {CompositeOperation} [composition]
+ * @property {WAAPICallback} [onComplete]
+ */
+
+/**
+ * @typedef {Record<String, WAAPIKeyframeValue | WAAPIAnimationOptions | Boolean | ScrollObserver | WAAPICallback | EasingParam | WAAPITweenOptions> & WAAPIAnimationOptions} WAAPIAnimationParams
+ */
+
+// Animatable types ////////////////////////////////////////////////////////////
 
 /**
  * @callback AnimatablePropertySetter
@@ -762,7 +852,7 @@ const DataValues = props => {
  * @typedef {Record<String, TweenParamValue | EasingParam | TweenModifier | TweenComposition | AnimatablePropertyParamsOptions> & AnimatablePropertyParamsOptions} AnimatableParams
  */
 
-// Scope types ////////////////////////////////////////////////////////////////
+// Scope types /////////////////////////////////////////////////////////////////
 
 /**
  * @typedef {Object} ReactRef
@@ -805,7 +895,52 @@ const DataValues = props => {
  * @return {ScopeCleanupCallback|void}
  */
 
-// Draggable types ////////////////////////////////////////////////////////////
+// Scroll types ////////////////////////////////////////////////////////////////
+
+/**
+ * @typedef {String|Number} ScrollThresholdValue
+ */
+
+/**
+ * @typedef {Object} ScrollThresholdParam
+ * @property {ScrollThresholdValue} [target]
+ * @property {ScrollThresholdValue} [container]
+ */
+
+/**
+ * @callback ScrollObserverAxisCallback
+ * @param {ScrollObserver} self
+ * @return {'x'|'y'}
+ */
+
+/**
+ * @callback ScrollThresholdCallback
+ * @param {ScrollObserver} self
+ * @return {ScrollThresholdValue|ScrollThresholdParam}
+ */
+
+/**
+ * @typedef {Object} ScrollObserverParams
+ * @property {Number|String} [id]
+ * @property {Boolean|Number|String|EasingParam} [sync]
+ * @property {TargetsParam} [container]
+ * @property {TargetsParam} [target]
+ * @property {'x'|'y'|ScrollObserverAxisCallback|((observer: ScrollObserver) => 'x'|'y'|ScrollObserverAxisCallback)} [axis]
+ * @property {ScrollThresholdValue|ScrollThresholdParam|ScrollThresholdCallback|((observer: ScrollObserver) => ScrollThresholdValue|ScrollThresholdParam|ScrollThresholdCallback)} [enter]
+ * @property {ScrollThresholdValue|ScrollThresholdParam|ScrollThresholdCallback|((observer: ScrollObserver) => ScrollThresholdValue|ScrollThresholdParam|ScrollThresholdCallback)} [leave]
+ * @property {Boolean|((observer: ScrollObserver) => Boolean)} [repeat]
+ * @property {Boolean} [debug]
+ * @property {Callback<ScrollObserver>} [onEnter]
+ * @property {Callback<ScrollObserver>} [onLeave]
+ * @property {Callback<ScrollObserver>} [onEnterForward]
+ * @property {Callback<ScrollObserver>} [onLeaveForward]
+ * @property {Callback<ScrollObserver>} [onEnterBackward]
+ * @property {Callback<ScrollObserver>} [onLeaveBackward]
+ * @property {Callback<ScrollObserver>} [onUpdate]
+ * @property {Callback<ScrollObserver>} [onSyncComplete]
+ */
+
+// Draggable types /////////////////////////////////////////////////////////////
 
 /**
  * @typedef {Object} DraggableAxisParam
@@ -854,7 +989,7 @@ const DataValues = props => {
  * @property {Callback<Draggable>} [onAfterResize]
  */
 
-// Text types /////////////////////////////////////////////////////////////////
+// Text types //////////////////////////////////////////////////////////////////
 
 /**
  * @typedef {Object} splitTemplateParams
@@ -883,7 +1018,7 @@ const DataValues = props => {
  * @property {Boolean} [debug]
  */
 
-// SVG types //////////////////////////////////////////////////////////////////
+// SVG types ///////////////////////////////////////////////////////////////////
 
 /**
  * @typedef {SVGGeometryElement & {
@@ -1043,13 +1178,13 @@ const globals = {
   defaults,
   /** @type {Number} */
   precision: 4,
-  /** @type {Number} */
+  /** @type {Number} equals 1 in ms mode, 0.001 in s mode */
   timeScale: 1,
   /** @type {Number} */
   tickThreshold: 200,
 };
 
-const globalVersions = { version: '4.1.2', engine: null };
+const globalVersions = { version: '4.1.3', engine: null };
 
 if (isBrowser) {
   if (!win.AnimeJS) win.AnimeJS = [];
@@ -1072,7 +1207,6 @@ const toLowerCase = str => str.replace(lowerCaseRgx, '$1-$2').toLowerCase();
  */
 const stringStartsWith = (str, sub) => str.indexOf(sub) === 0;
 
-// Time
 // Note: Date.now is used instead of performance.now since it is precise enough for timings calculations, performs slightly faster and works in Node.js environement.
 const now = Date.now;
 
@@ -1774,9 +1908,10 @@ class Engine extends Clock {
     this.pauseOnDocumentHidden = true;
     /** @type {DefaultsParams} */
     this.defaults = defaults;
-    this.paused = isBrowser && doc.hidden ? true  : false;
+    // this.paused = isBrowser && doc.hidden ? true  : false;
+    this.paused = true;
     /** @type {Number|NodeJS.Immediate} */
-    this.reqId = null;
+    this.reqId = 0;
   }
 
   update() {
@@ -1811,13 +1946,16 @@ class Engine extends Clock {
   }
 
   wake() {
-    if (this.useDefaultMainLoop && !this.reqId && !this.paused) {
+    if (this.useDefaultMainLoop && !this.reqId) {
+      // Imediatly request a tick to update engine._elapsedTime and get accurate offsetPosition calculation in timer.js
+      this.requestTick(now());
       this.reqId = engineTickMethod(tickEngine);
     }
     return this;
   }
 
   pause() {
+    if (!this.reqId) return;
     this.paused = true;
     return killEngine();
   }
@@ -1958,6 +2096,7 @@ function getNodeList(v) {
  */
 function parseTargets(targets) {
   if (isNil(targets)) return /** @type {TargetsArray} */([]);
+  if (!isBrowser) return /** @type {JSTargetsArray} */(isArr(targets) && targets.flat(Infinity) || [targets]);
   if (isArr(targets)) {
     const flattened = targets.flat(Infinity);
     /** @type {TargetsArray} */
@@ -1998,7 +2137,6 @@ function parseTargets(targets) {
     }
     return parsed;
   }
-  if (!isBrowser) return /** @type {JSTargetsArray} */([targets]);
   const nodeList = getNodeList(targets);
   if (nodeList) return /** @type {DOMTargetsArray} */(Array.from(nodeList));
   return /** @type {TargetsArray} */([targets]);
@@ -2437,12 +2575,16 @@ const composeTween = (tween, siblings) => {
 
         const prevChangeStartTime = prevSibling._startTime;
         const prevTLOffset = prevAbsEndTime - (prevChangeStartTime + prevSibling._updateDuration);
+        // Rounding is necessary here to minimize floating point errors when working in seconds
+        const updatedPrevChangeDuration = round(absoluteUpdateStartTime - prevTLOffset - prevChangeStartTime, 12);
 
-        prevSibling._changeDuration = absoluteUpdateStartTime - prevTLOffset - prevChangeStartTime;
-        prevSibling._currentTime = prevSibling._changeDuration;
+        prevSibling._changeDuration = updatedPrevChangeDuration;
+        prevSibling._currentTime = updatedPrevChangeDuration;
         prevSibling._isOverlapped = 1;
 
-        if (prevSibling._changeDuration < minValue) {
+        // Override the previous tween if its new _changeDuration is lower than minValue
+        // TODO: See if it's even neceseeary to test against minValue, checking for 0 might be enough
+        if (updatedPrevChangeDuration < minValue) {
           overrideTween(prevSibling);
         }
       }
@@ -2473,7 +2615,7 @@ const composeTween = (tween, siblings) => {
           prevParent.cancel();
           // Previously, calling .cancel() on a timeline child would affect the render order of other children
           // Worked around this by marking it as .completed and using .pause() for safe removal in the engine loop
-          // This is no longer needed since timeline tween composition is now handled separatly
+          // This is no longer needed since timeline tween composition is now handled separately
           // Keeping this here for reference
           // prevParent.completed = true;
           // prevParent.pause();
@@ -2670,18 +2812,17 @@ class Timer extends Clock {
                                 /** @type {Number} */(timerLoop) < 0 ? Infinity :
                                 /** @type {Number} */(timerLoop) + 1;
 
+
     let offsetPosition = 0;
 
     if (parent) {
       offsetPosition = parentPosition;
     } else {
-      let startTime = now();
-      // Make sure to tick the engine once if suspended to avoid big gaps with the following offsetPosition calculation
-      if (engine.paused) {
-        engine.requestTick(startTime);
-        startTime = engine._elapsedTime;
-      }
-      offsetPosition = startTime - engine._startTime;
+      // Make sure to tick the engine once if not currently running to get up to date engine._elapsedTime
+      // to avoid big gaps with the following offsetPosition calculation
+      if (!engine.reqId) engine.requestTick(now());
+      // Make sure to scale the offset position with globals.timeScale to properly handle seconds unit
+      offsetPosition = (engine._elapsedTime - engine._startTime) * globals.timeScale;
     }
 
     // Timer's parameters
@@ -2882,6 +3023,9 @@ class Timer extends Clock {
   /** @return {this} */
   resetTime() {
     const timeScale = 1 / (this._speed * engine._speed);
+    // TODO: See if we can safely use engine._elapsedTime here
+    // if (!engine.reqId) engine.requestTick(now())
+    // this._startTime = engine._elapsedTime - (this._currentTime + this._delay) * timeScale;
     this._startTime = now() - (this._currentTime + this._delay) * timeScale;
     return this;
   }
@@ -3080,10 +3224,10 @@ const binarySubdivide = (aX, mX1, mX2) => {
 };
 
 /**
- * @param  {Number} [mX1]
- * @param  {Number} [mY1]
- * @param  {Number} [mX2]
- * @param  {Number} [mY2]
+ * @param  {Number} [mX1] The x coordinate of the first point
+ * @param  {Number} [mY1] The y coordinate of the first point
+ * @param  {Number} [mX2] The x coordinate of the second point
+ * @param  {Number} [mY2] The y coordinate of the second point
  * @return {EasingFunction}
  */
 
@@ -3106,7 +3250,7 @@ const steps = (steps = 10, fromStart) => {
 /**
  * Without parameters, the linear function creates a non-eased transition.
  * Parameters, if used, creates a piecewise linear easing by interpolating linearly between the specified points.
- * @param  {...String|Number} [args] - Points
+ * @param  {...(String|Number)} args - Points
  * @return {EasingFunction}
  */
 const linear = (...args) => {
@@ -3753,7 +3897,8 @@ class JSAnimation extends Timer {
             const isFromToArray = isArr(tweenToValue);
             const isFromToValue = isFromToArray || (hasFromvalue && hasToValue);
             const tweenStartTime = prevTween ? lastTweenChangeEndTime + tweenDelay : tweenDelay;
-            const absoluteStartTime = absoluteOffsetTime + tweenStartTime;
+            // Rounding is necessary here to minimize floating point errors when working in seconds
+            const absoluteStartTime = round(absoluteOffsetTime + tweenStartTime, 12);
 
             // Force a onRender callback if the animation contains at least one from value and autoplay is set to false
             if (!shouldTriggerRender && (hasFromvalue || isFromToArray)) shouldTriggerRender = 1;
@@ -3881,7 +4026,7 @@ class JSAnimation extends Timer {
 
             // Tween factory
 
-            // Rounding is necessary here to minimize floating point errors
+            // Rounding is necessary here to minimize floating point errors when working in seconds
             const tweenUpdateDuration = round(+tweenDuration || minValue, 12);
 
             /** @type {Tween} */
@@ -3930,7 +4075,7 @@ class JSAnimation extends Timer {
             if (isNaN(firstTweenChangeStartTime)) {
               firstTweenChangeStartTime = tween._startTime;
             }
-            // Rounding is necessary here to minimize floating point errors
+            // Rounding is necessary here to minimize floating point errors when working in seconds
             lastTweenChangeEndTime = round(tweenStartTime + tweenUpdateDuration, 12);
             prevTween = tween;
             animationAnimationLength++;
@@ -4181,7 +4326,7 @@ const Eswat2Io = _props => {
         index.h(Fingerprint, { label: "eswat2" })));
 };
 
-const shadowCss = "/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',\n      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n    --spacing: 0.25rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --font-weight-bold: 700;\n  }\n}\n@layer utilities {\n  .absolute {\n    position: absolute;\n  }\n  .relative {\n    position: relative;\n  }\n  .top-8 {\n    top: calc(var(--spacing) * 8);\n  }\n  .right-8 {\n    right: calc(var(--spacing) * 8);\n  }\n  .mt-3 {\n    margin-top: calc(var(--spacing) * 3);\n  }\n  .mt-5px {\n    margin-top: 5px;\n  }\n  .mr-0 {\n    margin-right: calc(var(--spacing) * 0);\n  }\n  .mr-10px {\n    margin-right: 10px;\n  }\n  .mb-10px {\n    margin-bottom: 10px;\n  }\n  .ml-0 {\n    margin-left: calc(var(--spacing) * 0);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .flex {\n    display: flex;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)\n      var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-clrs-gray {\n    border-color: var(--clrs-gray, #aaaaaa);\n  }\n  .border-clrs-slate {\n    border-color: var(--clrs-slate, #708090);\n  }\n  .bg-clrs-blue {\n    background-color: var(--clrs-blue, #0074d9);\n  }\n  .bg-clrs-red {\n    background-color: var(--clrs-red, #ff4136);\n  }\n  .bg-clrs-silver {\n    background-color: var(--clrs-silver, #dddddd);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .align-top {\n    vertical-align: top;\n  }\n  .font-sans {\n    font-family: var(--font-sans);\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .text-clrs-gray {\n    color: var(--clrs-gray, #aaaaaa);\n  }\n  .text-clrs-navy {\n    color: var(--clrs-navy, #001f3f);\n  }\n  .text-clrs-slate4 {\n    color: var(--clrs-slate4, #4e5964);\n  }\n  .text-clrs-white {\n    color: var(--clrs-white, #ffffff);\n  }\n  .italic {\n    font-style: italic;\n  }\n  .shadow {\n    --tw-shadow:\n      0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),\n      0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .hover\\:text-clrs-navy {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--clrs-navy, #001f3f);\n      }\n    }\n  }\n  .active\\:bg-clrs-gray {\n    &:active {\n      background-color: var(--clrs-gray, #aaaaaa);\n    }\n  }\n  .active\\:text-clrs-navy {\n    &:active {\n      color: var(--clrs-navy, #001f3f);\n    }\n  }\n}\n@layer components {\n  .ds1-main {\n    display: flex;\n    flex-direction: column;\n    padding: calc(var(--spacing) * 4);\n    font-family: var(--font-sans);\n    color: var(--clrs-navy, #001f3f);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .ds1-button {\n    display: flex;\n    align-items: center;\n    --tw-border-style: solid;\n    border-style: solid;\n    border-color: var(--clrs-slate, #708090);\n    color: var(--clrs-white, #ffffff);\n    &:active {\n      background-color: var(--clrs-gray, #aaaaaa);\n    }\n    &:active {\n      color: var(--clrs-navy, #001f3f);\n    }\n  }\n  .funnel-gfx {\n    --tw-border-style: solid;\n    border-style: solid;\n    border-color: var(--clrs-gray, #aaaaaa);\n    background-color: var(--clrs-silver, #dddddd);\n    stroke-width: 1;\n  }\n}\n.data-button {\n  border-radius: 5px;\n  border-width: 1px;\n  padding: 5px;\n  margin: 0px;\n  margin-right: 5px;\n  cursor: pointer;\n}\n.funnel-gfx {\n  width: calc(100% - 20px);\n  height: 100%;\n  padding: 10px;\n  padding-bottom: 7px;\n  border-radius: 10px;\n  border-width: 1px;\n}\n";
+const shadowCss = "/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',\n      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n    --spacing: 0.25rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --font-weight-bold: 700;\n  }\n}\n@layer utilities {\n  .absolute {\n    position: absolute;\n  }\n  .relative {\n    position: relative;\n  }\n  .top-8 {\n    top: calc(var(--spacing) * 8);\n  }\n  .right-8 {\n    right: calc(var(--spacing) * 8);\n  }\n  .mt-3 {\n    margin-top: calc(var(--spacing) * 3);\n  }\n  .mt-5px {\n    margin-top: 5px;\n  }\n  .mr-0 {\n    margin-right: calc(var(--spacing) * 0);\n  }\n  .mr-10px {\n    margin-right: 10px;\n  }\n  .mb-10px {\n    margin-bottom: 10px;\n  }\n  .ml-0 {\n    margin-left: calc(var(--spacing) * 0);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .flex {\n    display: flex;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)\n      var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-clrs-gray {\n    border-color: var(--clrs-gray, #aaaaaa);\n  }\n  .border-clrs-slate {\n    border-color: var(--clrs-slate, #708090);\n  }\n  .bg-clrs-blue {\n    background-color: var(--clrs-blue, #0074d9);\n  }\n  .bg-clrs-red {\n    background-color: var(--clrs-red, #ff4136);\n  }\n  .bg-clrs-silver {\n    background-color: var(--clrs-silver, #dddddd);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .align-top {\n    vertical-align: top;\n  }\n  .font-sans {\n    font-family: var(--font-sans);\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .text-clrs-gray {\n    color: var(--clrs-gray, #aaaaaa);\n  }\n  .text-clrs-navy {\n    color: var(--clrs-navy, #001f3f);\n  }\n  .text-clrs-slate4 {\n    color: var(--clrs-slate4, #4e5964);\n  }\n  .text-clrs-white {\n    color: var(--clrs-white, #ffffff);\n  }\n  .italic {\n    font-style: italic;\n  }\n  .shadow {\n    --tw-shadow:\n      0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),\n      0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .hover\\:text-clrs-navy {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--clrs-navy, #001f3f);\n      }\n    }\n  }\n  .active\\:bg-clrs-gray {\n    &:active {\n      background-color: var(--clrs-gray, #aaaaaa);\n    }\n  }\n  .active\\:text-clrs-navy {\n    &:active {\n      color: var(--clrs-navy, #001f3f);\n    }\n  }\n}\n@layer components {\n  .ds1-main {\n    display: flex;\n    flex-direction: column;\n    padding: calc(var(--spacing) * 4);\n    font-family: var(--font-sans);\n    color: var(--clrs-navy, #001f3f);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .ds1-button {\n    display: flex;\n    align-items: center;\n    --tw-border-style: solid;\n    border-style: solid;\n    border-color: var(--clrs-slate, #708090);\n    color: var(--clrs-white, #ffffff);\n    &:active {\n      background-color: var(--clrs-gray, #aaaaaa);\n    }\n    &:active {\n      color: var(--clrs-navy, #001f3f);\n    }\n  }\n  .funnel-gfx {\n    --tw-border-style: solid;\n    border-style: solid;\n    border-color: var(--clrs-gray, #aaaaaa);\n    background-color: var(--clrs-silver, #dddddd);\n    stroke-width: 1;\n  }\n}\n.data-button {\n  border-radius: 5px;\n  border-width: 1px;\n  padding: 5px;\n  margin: 0px;\n  margin-right: 5px;\n  cursor: pointer;\n}\n.funnel-gfx {\n  width: calc(100% - 20px);\n  height: 100%;\n  padding: 10px;\n  padding-bottom: 7px;\n  border-radius: 10px;\n  border-width: 1px;\n}\n";
 
 const FunnelApp = class {
     constructor(hostRef) {

package/dist/collection/styles/shadow.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {

package/dist/collection/tokens.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {

package/dist/collection/utils/tw-version.js

@@ -1,4 +1,4 @@
 // WARNING:  generated file...
-const TW_VERSION = '4.1.11';
+const TW_VERSION = '4.1.12';
 export { TW_VERSION };
 export default TW_VERSION;