ui-ingredients 0.0.62 → 0.0.64

package/dist/slider/slider-range.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface SliderRangeProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './slider-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SliderRangeProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SliderRangeProps = $props();
 
   let slider = getSliderContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/slider/slider-range.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SliderRange: $$__sveltets_2_IsomorphicComponent<SliderRangeProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SliderRange = InstanceType<typeof SliderRange>;
 export default SliderRange;

package/dist/slider/slider-root.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateSliderProps,
@@ -19,7 +19,12 @@
   import {createSlider} from './create-slider.svelte.js';
   import {setSliderContext} from './slider-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SliderProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SliderProps = $props();
 
   let [createSliderProps, localProps] = $derived(
     createSplitProps<CreateSliderProps>([
@@ -58,7 +63,7 @@
 {#if asChild}
   {@render asChild(mergedProps, slider)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(slider)}
   </div>
 {/if}

package/dist/slider/slider-root.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SliderRoot: $$__sveltets_2_IsomorphicComponent<SliderProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SliderRoot = InstanceType<typeof SliderRoot>;
 export default SliderRoot;

package/dist/slider/slider-thumb.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ThumbProps} from '@zag-js/slider';
 
@@ -14,7 +14,12 @@
     setSliderThumbPropsContext,
   } from './slider-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SliderThumbProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SliderThumbProps = $props();
 
   let slider = getSliderContext();
 
@@ -32,7 +37,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/slider/slider-thumb.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SliderThumb: $$__sveltets_2_IsomorphicComponent<SliderThumbProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SliderThumb = InstanceType<typeof SliderThumb>;
 export default SliderThumb;

package/dist/slider/slider-track.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface SliderTrackProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './slider-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SliderTrackProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SliderTrackProps = $props();
 
   let slider = getSliderContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/slider/slider-track.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SliderTrack: $$__sveltets_2_IsomorphicComponent<SliderTrackProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SliderTrack = InstanceType<typeof SliderTrack>;
 export default SliderTrack;

package/dist/slider/slider-value-text.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface SliderValueTextProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './slider-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SliderValueTextProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SliderValueTextProps = $props();
 
   let slider = getSliderContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span bind:this={e} {...mergedProps}>
+  <span bind:this={ref} {...mergedProps}>
     {#if children}
       {@render children()}
     {:else}

package/dist/slider/slider-value-text.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SliderValueText: $$__sveltets_2_IsomorphicComponent<SliderValueTextProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SliderValueText = InstanceType<typeof SliderValueText>;
 export default SliderValueText;

package/dist/splitter/splitter-panel.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {PanelProps} from '@zag-js/splitter';
 
@@ -11,7 +11,12 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getSplitterContext} from './splitter-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SplitterPanelProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SplitterPanelProps = $props();
 
   let splitter = getSplitterContext();
 
@@ -27,7 +32,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/splitter/splitter-panel.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SplitterPanel: $$__sveltets_2_IsomorphicComponent<SplitterPanelProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SplitterPanel = InstanceType<typeof SplitterPanel>;
 export default SplitterPanel;

package/dist/splitter/splitter-resize-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ResizeTriggerProps} from '@zag-js/splitter';
 
@@ -24,7 +24,7 @@
   import {getSplitterContext} from './splitter-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -46,7 +46,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/splitter/splitter-resize-trigger.svelte.d.ts

@@ -25,6 +25,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SplitterResizeTrigger: $$__sveltets_2_IsomorphicComponent<SplitterResizeTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SplitterResizeTrigger = InstanceType<typeof SplitterResizeTrigger>;
 export default SplitterResizeTrigger;

package/dist/splitter/splitter-root.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateSplitterProps,
@@ -19,7 +19,12 @@
   import {createSplitter} from './create-splitter.svelte.js';
   import {setSplitterContext} from './splitter-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SplitterProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SplitterProps = $props();
 
   let [createSplitterProps, localProps] = $derived(
     createSplitProps<CreateSplitterProps>([
@@ -42,7 +47,7 @@
 {#if asChild}
   {@render asChild(mergedProps, splitter)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(splitter)}
   </div>
 {/if}

package/dist/splitter/splitter-root.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SplitterRoot: $$__sveltets_2_IsomorphicComponent<SplitterProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SplitterRoot = InstanceType<typeof SplitterRoot>;
 export default SplitterRoot;

package/dist/steps/steps-completed-content.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface StepsCompletedContentProps
@@ -10,7 +10,7 @@
   import {getStepsContext} from './steps-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -31,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/steps/steps-completed-content.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const StepsCompletedContent: $$__sveltets_2_IsomorphicComponent<StepsCompletedContentProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type StepsCompletedContent = InstanceType<typeof StepsCompletedContent>;
 export default StepsCompletedContent;

package/dist/steps/steps-content.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemProps} from '@zag-js/steps';
 
@@ -11,7 +11,7 @@
   import {getStepsContext} from './steps-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     index,
     asChild,
     children,
@@ -26,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/steps/steps-content.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const StepsContent: $$__sveltets_2_IsomorphicComponent<StepsContentProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type StepsContent = InstanceType<typeof StepsContent>;
 export default StepsContent;

package/dist/steps/steps-indicator.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface StepsIndicatorProps
@@ -12,7 +12,12 @@
     getStepsItemPropsContext,
   } from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsIndicatorProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsIndicatorProps = $props();
 
   let steps = getStepsContext();
 
@@ -26,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span bind:this={e} {...mergedProps}>
+  <span bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/steps/steps-indicator.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const StepsIndicator: $$__sveltets_2_IsomorphicComponent<StepsIndicatorProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type StepsIndicator = InstanceType<typeof StepsIndicator>;
 export default StepsIndicator;

package/dist/steps/steps-item.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/steps';
 
@@ -17,7 +17,12 @@
     setStepsItemPropsContext,
   } from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsItemProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsItemProps = $props();
 
   let steps = getStepsContext();
 
@@ -37,7 +42,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/steps/steps-item.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const StepsItem: $$__sveltets_2_IsomorphicComponent<StepsItemProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type StepsItem = InstanceType<typeof StepsItem>;
 export default StepsItem;

package/dist/steps/steps-list.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface StepsListProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext} from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsListProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsListProps = $props();
 
   let steps = getStepsContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/steps/steps-list.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const StepsList: $$__sveltets_2_IsomorphicComponent<StepsListProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type StepsList = InstanceType<typeof StepsList>;
 export default StepsList;

package/dist/steps/steps-next-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface StepsNextTriggerProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext} from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsNextTriggerProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsNextTriggerProps = $props();
 
   let steps = getStepsContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button bind:this={e} type="button" {...mergedProps}>
+  <button bind:this={ref} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/steps/steps-next-trigger.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const StepsNextTrigger: $$__sveltets_2_IsomorphicComponent<StepsNextTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type StepsNextTrigger = InstanceType<typeof StepsNextTrigger>;
 export default StepsNextTrigger;

package/dist/steps/steps-prev-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface StepsPrevTriggerProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext} from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsPrevTriggerProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsPrevTriggerProps = $props();
 
   let steps = getStepsContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button bind:this={e} type="button" {...mergedProps}>
+  <button bind:this={ref} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/steps/steps-prev-trigger.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const StepsPrevTrigger: $$__sveltets_2_IsomorphicComponent<StepsPrevTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type StepsPrevTrigger = InstanceType<typeof StepsPrevTrigger>;
 export default StepsPrevTrigger;

package/dist/steps/steps-progress.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface StepsProgressProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getStepsContext} from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsProgressProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsProgressProps = $props();
 
   let steps = getStepsContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/steps/steps-progress.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const StepsProgress: $$__sveltets_2_IsomorphicComponent<StepsProgressProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type StepsProgress = InstanceType<typeof StepsProgress>;
 export default StepsProgress;

package/dist/steps/steps-root.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateStepsProps,
@@ -19,7 +19,12 @@
   import {createSteps} from './create-steps.svelte.js';
   import {setStepsContext} from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsProps = $props();
 
   let [createStepsProps, localProps] = $derived(
     createSplitProps<CreateStepsProps>([
@@ -44,7 +49,7 @@
 {#if asChild}
   {@render asChild(mergedProps, steps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(steps)}
   </div>
 {/if}

package/dist/steps/steps-root.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const StepsRoot: $$__sveltets_2_IsomorphicComponent<StepsProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type StepsRoot = InstanceType<typeof StepsRoot>;
 export default StepsRoot;

package/dist/steps/steps-separator.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface StepsSeparatorProps
@@ -12,7 +12,12 @@
     getStepsItemPropsContext,
   } from './steps-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: StepsSeparatorProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsSeparatorProps = $props();
 
   let steps = getStepsContext();
   let itemProps = getStepsItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span bind:this={e} {...mergedProps}>
+  <span bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}