ui-ingredients 0.0.17 → 0.0.18

package/dist/accordion/create-accordion.svelte.d.ts

@@ -1,5 +1,6 @@
 import * as accordion from '@zag-js/accordion';
-export interface CreateAccordionProps extends accordion.Context {
+export interface CreateAccordionProps extends Omit<accordion.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
 }
 export interface CreateAccordionReturn extends accordion.Api {
 }

package/dist/accordion/create-accordion.svelte.js

@@ -1,7 +1,17 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as accordion from '@zag-js/accordion';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createAccordion(props) {
-    const [state, send] = useMachine(accordion.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(accordion.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => accordion.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/accordion/item-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface AccordionItemContentProps extends HtmlIngredientProps<'div'> {}
+  export interface AccordionItemContentProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
@@ -11,6 +11,7 @@
   let {children, ...props}: AccordionItemContentProps = $props();
 
   let context = accordionContext.get();
+
   let itemProps = accordionItemPropsContext.get();
 
   let attrs = $derived(mergeProps(props, context.getItemContentProps(itemProps)));

package/dist/accordion/item-indicator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface AccordionIndicatorProps extends HtmlIngredientProps<'span'> {}
+  export interface AccordionIndicatorProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
@@ -11,6 +11,7 @@
   let {children, ...props}: AccordionIndicatorProps = $props();
 
   let context = accordionContext.get();
+
   let itemProps = accordionItemPropsContext.get();
 
   let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(itemProps)));

package/dist/accordion/item-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface AccordionItemTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface AccordionItemTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">
@@ -11,6 +11,7 @@
   let {children, ...props}: AccordionItemTriggerProps = $props();
 
   let context = accordionContext.get();
+
   let itemProps = accordionItemPropsContext.get();
 
   let attrs = $derived(mergeProps(props, context.getItemTriggerProps(itemProps)));

package/dist/accordion/item.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/accordion';
   import type {Snippet} from 'svelte';
 
   export interface AccordionItemProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, ItemProps> {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
     children?: Snippet<[state: ItemState]>;
   }
 </script>

package/dist/accordion/root.svelte

@@ -1,18 +1,15 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateAccordionProps, CreateAccordionReturn} from './create-accordion.svelte.js';
 
   export interface AccordionProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateAccordionProps, 'id'>> {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateAccordionProps> {
     children?: Snippet<[context: CreateAccordionReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {accordionContext} from './context.svelte.js';
   import {createAccordion} from './create-accordion.svelte.js';
@@ -20,7 +17,6 @@
   let {
     id,
     ids,
-    dir,
     value,
     disabled,
     multiple,
@@ -28,20 +24,13 @@
     collapsible,
     onFocusChange,
     onValueChange,
-    getRootNode,
     children,
     ...props
   }: AccordionProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createAccordion({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     value: $state.snapshot(value),
     multiple,
     disabled,
@@ -49,7 +38,6 @@
     orientation,
     onFocusChange,
     onValueChange,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/avatar/create-avatar.svelte.d.ts

@@ -1,5 +1,6 @@
 import * as avatar from '@zag-js/avatar';
-export interface CreateAvatarProps extends avatar.Context {
+export interface CreateAvatarProps extends Omit<avatar.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
 }
 export interface CreateAvatarReturn extends avatar.Api {
 }

package/dist/avatar/create-avatar.svelte.js

@@ -1,7 +1,17 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as avatar from '@zag-js/avatar';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createAvatar(props) {
-    const [state, send] = useMachine(avatar.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(avatar.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => avatar.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/avatar/fallback.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface AvatarFallbackProps extends HtmlIngredientProps<'div'> {}
+  export interface AvatarFallbackProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/avatar/image.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface AvatarImageProps extends HtmlIngredientProps<'img'> {}
+  export interface AvatarImageProps extends HtmlProps<'img'> {}
 </script>
 
 <script lang="ts">

package/dist/avatar/root.svelte

@@ -1,35 +1,32 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import {type CreateAvatarProps, type CreateAvatarReturn} from './create-avatar.svelte.js';
 
   export interface AvatarProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateAvatarProps, 'id'>> {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateAvatarProps> {
     children?: Snippet<[api: CreateAvatarReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {avatarContext} from './context.svelte.js';
   import {createAvatar} from './create-avatar.svelte.js';
 
-  let {id, ids, dir, getRootNode, onStatusChange, children, ...props}: AvatarProps = $props();
-
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
+  let {
+    /**/
+    id,
+    ids,
+    onStatusChange,
+    children,
+    ...props
+  }: AvatarProps = $props();
 
   let context = createAvatar({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     onStatusChange,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/carousel/create-carousel.svelte.d.ts

@@ -1,5 +1,6 @@
 import * as carousel from '@zag-js/carousel';
-export interface CreateCarouselProps extends carousel.Context {
+export interface CreateCarouselProps extends Omit<carousel.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
 }
 export interface CreateCarouselReturn extends carousel.Api {
 }

package/dist/carousel/create-carousel.svelte.js

@@ -1,7 +1,17 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as carousel from '@zag-js/carousel';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createCarousel(props) {
-    const [state, send] = useMachine(carousel.machine(props));
+    const localeContexts = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(carousel.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContexts?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => carousel.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/carousel/indicator-group.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface CarouselIndicatorGroupProps extends HtmlIngredientProps<'div'> {}
+  export interface CarouselIndicatorGroupProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/indicator.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {IndicatorProps} from '@zag-js/carousel';
 
-  export interface CarouselIndicatorProps
-    extends Assign<HtmlIngredientProps<'button'>, IndicatorProps> {}
+  export interface CarouselIndicatorProps extends Assign<HtmlProps<'button'>, IndicatorProps> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/item-group.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface CarouselItemGroupProps extends HtmlIngredientProps<'div'> {}
+  export interface CarouselItemGroupProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/item.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/carousel';
   import type {Snippet} from 'svelte';
 
   export interface CarouselItemProps
-    extends Assign<Omit<HtmlIngredientProps<'button'>, 'children'>, ItemProps> {
+    extends Assign<Omit<HtmlProps<'button'>, 'children'>, ItemProps> {
     children?: Snippet<[state: ItemState]>;
   }
 </script>

package/dist/carousel/next-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface CarouselNextTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface CarouselNextTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/prev-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface CarouselPrevTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface CarouselPrevTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/carousel/root.svelte

@@ -1,18 +1,15 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateCarouselProps, CreateCarouselReturn} from './create-carousel.svelte.js';
 
   export interface CarouselProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateCarouselProps, 'id'>> {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateCarouselProps> {
     children?: Snippet<[api: CreateCarouselReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {carouselContext} from './context.svelte.js';
   import {createCarousel} from './create-carousel.svelte.js';
@@ -20,7 +17,6 @@
   let {
     id,
     ids,
-    dir,
     loop,
     align,
     index,
@@ -28,20 +24,13 @@
     orientation,
     slidesPerView,
     onIndexChange,
-    getRootNode,
     children,
     ...props
   }: CarouselProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createCarousel({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     loop,
     align,
     index: $state.snapshot(index),
@@ -49,7 +38,6 @@
     orientation,
     slidesPerView,
     onIndexChange,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/carousel/viewport.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface CarouselViewportProps extends HtmlIngredientProps<'div'> {}
+  export interface CarouselViewportProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/checkbox/control.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface CheckboxControlProps extends HtmlIngredientProps<'div'> {}
+  export interface CheckboxControlProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/checkbox/create-checkbox.svelte.d.ts

@@ -1,5 +1,6 @@
 import * as checkbox from '@zag-js/checkbox';
-export interface CreateCheckboxProps extends checkbox.Context {
+export interface CreateCheckboxProps extends Omit<checkbox.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
 }
 export interface CreateCheckboxReturn extends checkbox.Api {
 }

package/dist/checkbox/create-checkbox.svelte.js

@@ -1,7 +1,17 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as checkbox from '@zag-js/checkbox';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createCheckbox(props) {
-    const [state, send] = useMachine(checkbox.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(checkbox.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => checkbox.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/checkbox/hidden-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface CheckboxHiddenInputProps extends HtmlIngredientProps<'input'> {}
+  export interface CheckboxHiddenInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/checkbox/indicator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface CheckboxIndicatorProps extends HtmlIngredientProps<'span'> {}
+  export interface CheckboxIndicatorProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/checkbox/label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface CheckboxLabelProps extends HtmlIngredientProps<'span'> {}
+  export interface CheckboxLabelProps extends HtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/checkbox/root.svelte

@@ -1,21 +1,15 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateCheckboxProps, CreateCheckboxReturn} from './create-checkbox.svelte.js';
 
   export interface CheckboxProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'label'>, 'children'>,
-      Omit<CreateCheckboxProps, 'id'>
-    > {
+    extends Assign<Omit<HtmlProps<'label'>, 'children'>, CreateCheckboxProps> {
     children?: Snippet<[api: CreateCheckboxReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {checkboxContext} from './context.svelte.js';
   import {createCheckbox} from './create-checkbox.svelte.js';
@@ -23,7 +17,6 @@
   let {
     id,
     ids,
-    dir,
     form,
     name,
     value,
@@ -33,20 +26,13 @@
     readOnly,
     required,
     onCheckedChange,
-    getRootNode,
     children,
     ...props
   }: CheckboxProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createCheckbox({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     form,
     name,
     value: $state.snapshot(value),
@@ -56,7 +42,6 @@
     readOnly,
     required,
     onCheckedChange,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/clipboard/control.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ClipboardControlProps extends HtmlIngredientProps<'div'> {}
+  export interface ClipboardControlProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/clipboard/create-clipboard.svelte.d.ts

@@ -1,5 +1,6 @@
 import * as clipboard from '@zag-js/clipboard';
-export interface CreateClipboardProps extends clipboard.Context {
+export interface CreateClipboardProps extends Omit<clipboard.Context, 'id' | 'getRootNode'> {
+    id?: string | null;
 }
 export interface CreateClipboardReturn extends clipboard.Api {
 }

package/dist/clipboard/create-clipboard.svelte.js

@@ -1,7 +1,14 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as clipboard from '@zag-js/clipboard';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createClipboard(props) {
-    const [state, send] = useMachine(clipboard.machine(props));
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(clipboard.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => clipboard.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/clipboard/indicator.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {IndicatorProps} from '@zag-js/clipboard';
 
   export interface ClipboardIndicatorProps
-    extends Assign<HtmlIngredientProps<'span'>, Partial<IndicatorProps>> {}
+    extends Assign<HtmlProps<'span'>, Partial<IndicatorProps>> {}
 </script>
 
 <script lang="ts">

package/dist/clipboard/input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ClipboardInputProps extends HtmlIngredientProps<'input'> {}
+  export interface ClipboardInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/clipboard/label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ClipboardLabelProps extends HtmlIngredientProps<'label'> {}
+  export interface ClipboardLabelProps extends HtmlProps<'label'> {}
 </script>
 
 <script lang="ts">