ui-ingredients 0.0.62 → 0.0.64

package/dist/progress/progress-view.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {ViewProps} from '@zag-js/progress';
 
@@ -11,7 +11,7 @@
   import {getProgressContext} from './progress-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     state,
     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/progress/progress-view.svelte.d.ts

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

package/dist/qr-code/qr-code-frame.svelte

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

package/dist/qr-code/qr-code-frame.svelte.d.ts

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

package/dist/qr-code/qr-code-overlay.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface QrCodeOverlayProps
@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getQrCodeContext} from './qr-code-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: QrCodeOverlayProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: QrCodeOverlayProps = $props();
 
   let qrCode = getQrCodeContext();
 
@@ -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/qr-code/qr-code-overlay.svelte.d.ts

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

package/dist/qr-code/qr-code-pattern.svelte

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

package/dist/qr-code/qr-code-pattern.svelte.d.ts

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

package/dist/qr-code/qr-code-root.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateQrCodeProps,
@@ -19,7 +19,12 @@
   import {createQRCode} from './create-qr-code.svelte.js';
   import {setQrCodeContext} from './qr-code-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: QrCodeProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: QrCodeProps = $props();
 
   let [createQrCodeProps, localProps] = $derived(
     createSplitProps<CreateQrCodeProps>(['id', 'ids', 'value', 'encoding'])(
@@ -37,7 +42,7 @@
 {#if asChild}
   {@render asChild(mergedProps, qrCode)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(qrCode)}
   </div>
 {/if}

package/dist/qr-code/qr-code-root.svelte.d.ts

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

package/dist/radio-group/radio-group-indicator.svelte

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

package/dist/radio-group/radio-group-indicator.svelte.d.ts

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

package/dist/radio-group/radio-group-item-control.svelte

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

package/dist/radio-group/radio-group-item-control.svelte.d.ts

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

package/dist/radio-group/radio-group-item-hidden-input.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface RadioGroupItemHiddenInputProps
@@ -12,7 +12,11 @@
     getRadioGroupItemPropsContext,
   } from './radio-group-context.svelte.js';
 
-  let {this: e, asChild, ...props}: RadioGroupItemHiddenInputProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    ...props
+  }: RadioGroupItemHiddenInputProps = $props();
 
   let radioGroup = getRadioGroupContext();
   let itemProps = getRadioGroupItemPropsContext();
@@ -25,5 +29,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input bind:this={e} {...mergedProps} />
+  <input bind:this={ref} {...mergedProps} />
 {/if}

package/dist/radio-group/radio-group-item-hidden-input.svelte.d.ts

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

package/dist/radio-group/radio-group-item-text.svelte

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

package/dist/radio-group/radio-group-item-text.svelte.d.ts

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

package/dist/radio-group/radio-group-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/radio-group';
 
@@ -17,7 +17,12 @@
     setRadioGroupItemPropsContext,
   } from './radio-group-context.svelte.js';
 
-  let {this: e, children, asChild, ...props}: RadioGroupItemProps = $props();
+  let {
+    ref = $bindable(null),
+    children,
+    asChild,
+    ...props
+  }: RadioGroupItemProps = $props();
 
   let radioGroup = getRadioGroupContext();
 
@@ -37,7 +42,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <label bind:this={e} {...mergedProps}>
+  <label bind:this={ref} {...mergedProps}>
     {@render children?.(itemState)}
   </label>
 {/if}

package/dist/radio-group/radio-group-item.svelte.d.ts

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

package/dist/radio-group/radio-group-label.svelte

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

package/dist/radio-group/radio-group-label.svelte.d.ts

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

package/dist/radio-group/radio-group-root.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateRadioGroupProps,
@@ -19,7 +19,12 @@
   import {createRadioGroup} from './create-radio-group.svelte.js';
   import {setRadioGroupContext} from './radio-group-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: RadioGroupProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: RadioGroupProps = $props();
 
   let [createRadioGroupProps, localProps] = $derived(
     createSplitProps<CreateRadioGroupProps>([
@@ -45,7 +50,7 @@
 {#if asChild}
   {@render asChild(mergedProps, radioGroup)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(radioGroup)}
   </div>
 {/if}

package/dist/radio-group/radio-group-root.svelte.d.ts

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

package/dist/rating-group/rating-group-control.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface RatingGroupControlProps
@@ -10,7 +10,7 @@
   import {getRatingGroupContext} from './rating-group-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -24,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/rating-group/rating-group-control.svelte.d.ts

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

package/dist/rating-group/rating-group-hidden-input.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
   export interface RatingGroupHiddenInputProps
@@ -9,7 +9,11 @@
   import {mergeProps} from '../merge-props.js';
   import {getRatingGroupContext} from './rating-group-context.svelte.js';
 
-  let {this: e, asChild, ...props}: RatingGroupHiddenInputProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    ...props
+  }: RatingGroupHiddenInputProps = $props();
 
   let radioGroup = getRatingGroupContext();
 
@@ -21,5 +25,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input bind:this={e} {...mergedProps} />
+  <input bind:this={ref} {...mergedProps} />
 {/if}

package/dist/rating-group/rating-group-hidden-input.svelte.d.ts

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

package/dist/rating-group/rating-group-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/rating-group';
 
@@ -14,7 +14,7 @@
   import {getRatingGroupContext} from './rating-group-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     index,
     asChild,
     children,
@@ -32,7 +32,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/rating-group/rating-group-item.svelte.d.ts

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

package/dist/rating-group/rating-group-label.svelte

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

package/dist/rating-group/rating-group-label.svelte.d.ts

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

package/dist/rating-group/rating-group-root.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateRatingGroupProps,
@@ -19,7 +19,12 @@
   import {createRatingGroup} from './create-rating-group.svelte.js';
   import {setRatingGroupContext} from './rating-group-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: RatingGroupProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: RatingGroupProps = $props();
 
   let [createRatingGroupProps, localProps] = $derived(
     createSplitProps<CreateRatingGroupProps>([
@@ -52,7 +57,7 @@
 {#if asChild}
   {@render asChild(mergedProps, ratingGroup)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(ratingGroup)}
   </div>
 {/if}

package/dist/rating-group/rating-group-root.svelte.d.ts

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

package/dist/segment-group/segment-group-indicator.svelte

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

package/dist/segment-group/segment-group-indicator.svelte.d.ts

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