@eslamdevui/ui 3.2.0-beta.2 → 3.2.0

package/dist/runtime/components/content/ContentToc.vue

@@ -75,72 +75,72 @@ nuxtApp.hooks.hook("page:transition:finish", () => {
 </script>
 
 <template>
-  <!-- eslint-disable-next-line vue/no-template-shadow -->
-  <DefineListTemplate v-slot="{ links, level }">
-    <ul :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
-      <li v-for="(link, index) in links" :key="index" :class="link.children && link.children.length > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, link.ui?.item] })">
-        <a :href="`#${link.id}`" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: activeHeadings.includes(link.id) })" @click.prevent="scrollToHeading(link.id)">
-          <slot name="link" :link="link">
-            <span :class="ui.linkText({ class: [props.ui?.linkText, link.ui?.linkText] })">
-              {{ link.text }}
-            </span>
-          </slot>
-        </a>
-
-        <ReuseListTemplate v-if="link.children?.length" :links="link.children" :level="level + 1" />
-      </li>
-    </ul>
-  </DefineListTemplate>
-
-  <DefineTriggerTemplate v-slot="{ open }">
-    <slot name="leading" :open="open" />
-
-    <span :class="ui.title({ class: props.ui?.title })">
-      <slot :open="open">{{ title || t("contentToc.title") }}</slot>
-    </span>
-
-    <span :class="ui.trailing({ class: props.ui?.trailing })">
-      <slot name="trailing" :open="open">
-        <UIcon :name="trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
-      </slot>
-    </span>
-  </DefineTriggerTemplate>
-
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :default-open="defaultOpen" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
-      <div v-if="!!slots.top" :class="ui.top({ class: props.ui?.top })">
-        <slot name="top" :links="links" />
-      </div>
-
-      <template v-if="links?.length">
-        <CollapsibleTrigger :class="ui.trigger({ class: 'lg:hidden' })">
-          <ReuseTriggerTemplate :open="open" />
-        </CollapsibleTrigger>
-
-        <CollapsibleContent :class="ui.content({ class: [props.ui?.content, 'lg:hidden'] })">
-          <div v-if="highlight" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
-
-          <slot name="content" :links="links">
-            <ReuseListTemplate :links="links" :level="0" />
-          </slot>
-        </CollapsibleContent>
-
-        <p :class="ui.trigger({ class: 'hidden lg:flex' })">
-          <ReuseTriggerTemplate :open="open" />
-        </p>
-
-        <div :class="ui.content({ class: [props.ui?.content, 'hidden lg:flex'] })">
-          <div v-if="highlight" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
-
-          <slot name="content" :links="links">
-            <ReuseListTemplate :links="links" :level="0" />
-          </slot>
-        </div>
-      </template>
-
-      <div v-if="!!slots.bottom" :class="ui.bottom({ class: props.ui?.bottom, body: !!slots.top || !!links?.length })">
-        <slot name="bottom" :links="links" />
-      </div>
-    </div>
-  </CollapsibleRoot>
+  <!-- eslint-disable-next-line vue/no-template-shadow -->
+  <DefineListTemplate v-slot="{ links, level }">
+    <ul :class="level > 0 ? ui.listWithChildren({ class: props.ui?.listWithChildren }) : ui.list({ class: props.ui?.list })">
+      <li v-for="(link, index) in links" :key="index" :class="link.children && link.children.length > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, link.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, link.ui?.item] })">
+        <a :href="`#${link.id}`" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active: activeHeadings.includes(link.id) })" @click.prevent="scrollToHeading(link.id)">
+          <slot name="link" :link="link">
+            <span :class="ui.linkText({ class: [props.ui?.linkText, link.ui?.linkText] })">
+              {{ link.text }}
+            </span>
+          </slot>
+        </a>
+
+        <ReuseListTemplate v-if="link.children?.length" :links="link.children" :level="level + 1" />
+      </li>
+    </ul>
+  </DefineListTemplate>
+
+  <DefineTriggerTemplate v-slot="{ open }">
+    <slot name="leading" :open="open" />
+
+    <span :class="ui.title({ class: props.ui?.title })">
+      <slot :open="open">{{ title || t("contentToc.title") }}</slot>
+    </span>
+
+    <span :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing" :open="open">
+        <UIcon :name="trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      </slot>
+    </span>
+  </DefineTriggerTemplate>
+
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :default-open="defaultOpen" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.container({ class: props.ui?.container })">
+      <div v-if="!!slots.top" :class="ui.top({ class: props.ui?.top })">
+        <slot name="top" :links="links" />
+      </div>
+
+      <template v-if="links?.length">
+        <CollapsibleTrigger :class="ui.trigger({ class: 'lg:hidden' })">
+          <ReuseTriggerTemplate :open="open" />
+        </CollapsibleTrigger>
+
+        <CollapsibleContent :class="ui.content({ class: [props.ui?.content, 'lg:hidden'] })">
+          <div v-if="highlight" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+
+          <slot name="content" :links="links">
+            <ReuseListTemplate :links="links" :level="0" />
+          </slot>
+        </CollapsibleContent>
+
+        <p :class="ui.trigger({ class: 'hidden lg:flex' })">
+          <ReuseTriggerTemplate :open="open" />
+        </p>
+
+        <div :class="ui.content({ class: [props.ui?.content, 'hidden lg:flex'] })">
+          <div v-if="highlight" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+
+          <slot name="content" :links="links">
+            <ReuseListTemplate :links="links" :level="0" />
+          </slot>
+        </div>
+      </template>
+
+      <div v-if="!!slots.bottom" :class="ui.bottom({ class: props.ui?.bottom, body: !!slots.top || !!links?.length })">
+        <slot name="bottom" :links="links" />
+      </div>
+    </div>
+  </CollapsibleRoot>
 </template>

package/dist/runtime/components/content/ContentToc.vue.d.ts

@@ -1,88 +1,88 @@
-import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui'
-import type { TocLink } from '@nuxt/content'
-import type { AppConfig } from '@nuxt/schema'
-import type { ComponentConfig } from '@nuxt/ui'
-import type theme from '#build/ui-pro/content/content-toc'
-
-type ContentToc = ComponentConfig<typeof theme, AppConfig, 'contentToc', 'uiPro'>
-export type ContentTocLink = TocLink & {
-  class?: any
-  ui?: Pick<ContentToc['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkText'>
-}
-export interface ContentTocProps<T extends ContentTocLink = ContentTocLink> extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'nav'
-   */
-  as?: any
-  /**
-   * The icon displayed to collapse the content.
-   * @defaultValue appConfig.ui.icons.chevronDown
-   * @IconifyIcon
-   */
-  trailingIcon?: string
-  /**
-   * The title of the table of contents.
-   * @defaultValue t('contentToc.title')
-   */
-  title?: string
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: ContentToc['variants']['color']
-  /**
-   * Display a line next to the active link.
-   * @defaultValue false
-   */
-  highlight?: boolean
-  /**
-   * @defaultValue 'primary'
-   */
-  highlightColor?: ContentToc['variants']['highlightColor']
-  links?: T[]
-  class?: any
-  ui?: ContentToc['slots']
-}
-export type ContentTocEmits = CollapsibleRootEmits & {
-  move: [id: string]
-}
-type SlotProps<T> = (props: {
-  link: T
-}) => any
-export interface ContentTocSlots<T extends ContentTocLink = ContentTocLink> {
-  leading(props: {
-    open: boolean
-  }): any
-  default(props: {
-    open: boolean
-  }): any
-  trailing(props: {
-    open: boolean
-  }): any
-  content(props: {
-    links: T[]
-  }): any
-  link: SlotProps<T>
-  top(props: {
-    links?: T[]
-  }): any
-  bottom(props: {
-    links?: T[]
-  }): any
-}
-declare const _default: <T extends ContentTocLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
-  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-    readonly 'onUpdate:open'?: ((value: boolean) => any) | undefined
-    readonly 'onMove'?: ((id: string) => any) | undefined
-  } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, 'onUpdate:open' | 'onMove'> & ContentTocProps<T> & Partial<{}>> & import('vue').PublicProps
-  expose(exposed: import('vue').ShallowUnwrapRef<{}>): void
-  attrs: any
-  slots: ContentTocSlots<T>
-  emit: ((evt: 'update:open', value: boolean) => void) & ((evt: 'move', id: string) => void)
-}>) => import('vue').VNode & {
-  __ctx?: Awaited<typeof __VLS_setup>
-}
-export default _default
-type __VLS_PrettifyLocal<T> = {
-  [K in keyof T]: T[K];
-} & {}
+import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui'
+import type { TocLink } from '@nuxt/content'
+import type { AppConfig } from '@nuxt/schema'
+import type { ComponentConfig } from '@nuxt/ui'
+import type theme from '#build/ui-pro/content/content-toc'
+
+type ContentToc = ComponentConfig<typeof theme, AppConfig, 'contentToc', 'uiPro'>
+export type ContentTocLink = TocLink & {
+  class?: any
+  ui?: Pick<ContentToc['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkText'>
+}
+export interface ContentTocProps<T extends ContentTocLink = ContentTocLink> extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'nav'
+   */
+  as?: any
+  /**
+   * The icon displayed to collapse the content.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
+   */
+  trailingIcon?: string
+  /**
+   * The title of the table of contents.
+   * @defaultValue t('contentToc.title')
+   */
+  title?: string
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: ContentToc['variants']['color']
+  /**
+   * Display a line next to the active link.
+   * @defaultValue false
+   */
+  highlight?: boolean
+  /**
+   * @defaultValue 'primary'
+   */
+  highlightColor?: ContentToc['variants']['highlightColor']
+  links?: T[]
+  class?: any
+  ui?: ContentToc['slots']
+}
+export type ContentTocEmits = CollapsibleRootEmits & {
+  move: [id: string]
+}
+type SlotProps<T> = (props: {
+  link: T
+}) => any
+export interface ContentTocSlots<T extends ContentTocLink = ContentTocLink> {
+  leading(props: {
+    open: boolean
+  }): any
+  default(props: {
+    open: boolean
+  }): any
+  trailing(props: {
+    open: boolean
+  }): any
+  content(props: {
+    links: T[]
+  }): any
+  link: SlotProps<T>
+  top(props: {
+    links?: T[]
+  }): any
+  bottom(props: {
+    links?: T[]
+  }): any
+}
+declare const _default: <T extends ContentTocLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+    readonly 'onUpdate:open'?: ((value: boolean) => any) | undefined
+    readonly 'onMove'?: ((id: string) => any) | undefined
+  } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, 'onUpdate:open' | 'onMove'> & ContentTocProps<T> & Partial<{}>> & import('vue').PublicProps
+  expose(exposed: import('vue').ShallowUnwrapRef<{}>): void
+  attrs: any
+  slots: ContentTocSlots<T>
+  emit: ((evt: 'update:open', value: boolean) => void) & ((evt: 'move', id: string) => void)
+}>) => import('vue').VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>
+}
+export default _default
+type __VLS_PrettifyLocal<T> = {
+  [K in keyof T]: T[K];
+} & {}

package/dist/runtime/components/locale/LocaleSelect.vue

@@ -38,24 +38,24 @@ function getEmojiFlag(locale) {
 </script>
 
 <template>
-  <USelectMenu
-    v-model="modelValue"
-    :search-input="false"
-    value-key="code"
-    label-key="name"
-    :items="props.locales"
-    v-bind="$attrs"
-  >
-    <template #leading>
-      <span v-if="modelValue" class="size-5 text-center">
-        {{ getEmojiFlag(modelValue) }}
-      </span>
-    </template>
-
-    <template #item-leading="{ item }">
-      <span class="size-5 text-center">
-        {{ getEmojiFlag(item.code) }}
-      </span>
-    </template>
-  </USelectMenu>
+  <USelectMenu
+    v-model="modelValue"
+    :search-input="false"
+    value-key="code"
+    label-key="name"
+    :items="props.locales"
+    v-bind="$attrs"
+  >
+    <template #leading>
+      <span v-if="modelValue" class="size-5 text-center">
+        {{ getEmojiFlag(modelValue) }}
+      </span>
+    </template>
+
+    <template #item-leading="{ item }">
+      <span class="size-5 text-center">
+        {{ getEmojiFlag(item.code) }}
+      </span>
+    </template>
+  </USelectMenu>
 </template>

package/dist/runtime/components/prose/A.vue

@@ -18,7 +18,7 @@ defineSlots();
 </script>
 
 <template>
-  <ULink :href="href" :target="target" :class="ui({ class: props.class })" raw>
-    <slot />
-  </ULink>
+  <ULink :href="href" :target="target" :class="ui({ class: props.class })" raw>
+    <slot />
+  </ULink>
 </template>

package/dist/runtime/components/prose/Accordion.vue

@@ -35,9 +35,9 @@ onBeforeUpdate(() => rerenderCount.value++);
 </script>
 
 <template>
-  <UAccordion :type="type" :items="items" :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui())">
-    <template #content="{ item }">
-      <component :is="item.component" />
-    </template>
-  </UAccordion>
+  <UAccordion :type="type" :items="items" :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui())">
+    <template #content="{ item }">
+      <component :is="item.component" />
+    </template>
+  </UAccordion>
 </template>

package/dist/runtime/components/prose/AccordionItem.vue

@@ -17,9 +17,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.accord
 </script>
 
 <template>
-  <div :class="ui({ class: props.class })">
-    <slot>
-      {{ description }}
-    </slot>
-  </div>
+  <div :class="ui({ class: props.class })">
+    <slot>
+      {{ description }}
+    </slot>
+  </div>
 </template>

package/dist/runtime/components/prose/Badge.vue

@@ -15,7 +15,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.badge
 </script>
 
 <template>
-  <UBadge color="primary" variant="subtle" :class="ui({ class: props.class })">
-    <slot mdc-unwrap="p" />
-  </UBadge>
+  <UBadge color="primary" variant="subtle" :class="ui({ class: props.class })">
+    <slot mdc-unwrap="p" />
+  </UBadge>
 </template>

package/dist/runtime/components/prose/Blockquote.vue

@@ -15,7 +15,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.blockq
 </script>
 
 <template>
-  <blockquote :class="ui({ class: props.class })">
-    <slot />
-  </blockquote>
+  <blockquote :class="ui({ class: props.class })">
+    <slot />
+  </blockquote>
 </template>

package/dist/runtime/components/prose/Callout.vue

@@ -30,31 +30,31 @@ const target = computed(() => props.target || (!!props.to && typeof props.to ===
 </script>
 
 <template>
-  <div :class="ui.base({ class: props.class })">
-    <ULink
-      v-if="to"
-      v-bind="{ to, target, ...$attrs }"
-      class="focus:outline-none"
-      tabindex="-1"
-      raw
-    >
-      <span
-        class="absolute inset-0"
-        aria-hidden="true"
-      />
-    </ULink>
-
-    <UIcon
-      v-if="icon"
-      :name="icon"
-      :class="ui.icon({ class: props.ui?.icon })"
-    />
-    <UIcon
-      v-if="!!to && target === '_blank'"
-      :name="appConfig.ui.icons.external"
-      :class="ui.externalIcon({ class: props.ui?.externalIcon })"
-    />
-
-    <slot mdc-unwrap="p" />
-  </div>
+  <div :class="ui.base({ class: props.class })">
+    <ULink
+      v-if="to"
+      v-bind="{ to, target, ...$attrs }"
+      class="focus:outline-none"
+      tabindex="-1"
+      raw
+    >
+      <span
+        class="absolute inset-0"
+        aria-hidden="true"
+      />
+    </ULink>
+
+    <UIcon
+      v-if="icon"
+      :name="icon"
+      :class="ui.icon({ class: props.ui?.icon })"
+    />
+    <UIcon
+      v-if="!!to && target === '_blank'"
+      :name="appConfig.ui.icons.external"
+      :class="ui.externalIcon({ class: props.ui?.externalIcon })"
+    />
+
+    <slot mdc-unwrap="p" />
+  </div>
 </template>

package/dist/runtime/components/prose/Card.vue

@@ -37,47 +37,47 @@ const ui = computed(
 </script>
 
 <template>
-  <div :class="ui.base({ class: props.class })">
-    <!-- Clickable Overlay -->
-    <ULink
-      v-if="to"
-      :to="to"
-      :target="target"
-      :aria-label="ariaLabel"
-      class="focus:outline-none"
-      tabindex="-1"
-      raw
-      v-bind="$attrs"
-    >
-      <span class="absolute inset-0" aria-hidden="true" />
-    </ULink>
-
-    <!-- Icon -->
-    <UIcon
-      v-if="icon"
-      :name="icon"
-      :class="ui.icon({ class: props.ui?.icon })"
-    />
-
-    <!-- External Link Icon -->
-    <UIcon
-      v-if="to && target === '_blank'"
-      :name="appConfig.ui.icons.external"
-      :class="ui.externalIcon({ class: props.ui?.externalIcon })"
-    />
-
-    <!-- Title -->
-    <p v-if="title || $slots.title" :class="ui.title({ class: props.ui?.title })">
-      <slot name="title">
-        {{ title }}
-      </slot>
-    </p>
-
-    <!-- Description / Default Slot -->
-    <div v-if="$slots.default || description" :class="ui.description({ class: props.ui?.description })">
-      <slot>
-        {{ description }}
-      </slot>
-    </div>
-  </div>
+  <div :class="ui.base({ class: props.class })">
+    <!-- Clickable Overlay -->
+    <ULink
+      v-if="to"
+      :to="to"
+      :target="target"
+      :aria-label="ariaLabel"
+      class="focus:outline-none"
+      tabindex="-1"
+      raw
+      v-bind="$attrs"
+    >
+      <span class="absolute inset-0" aria-hidden="true" />
+    </ULink>
+
+    <!-- Icon -->
+    <UIcon
+      v-if="icon"
+      :name="icon"
+      :class="ui.icon({ class: props.ui?.icon })"
+    />
+
+    <!-- External Link Icon -->
+    <UIcon
+      v-if="to && target === '_blank'"
+      :name="appConfig.ui.icons.external"
+      :class="ui.externalIcon({ class: props.ui?.externalIcon })"
+    />
+
+    <!-- Title -->
+    <p v-if="title || $slots.title" :class="ui.title({ class: props.ui?.title })">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </p>
+
+    <!-- Description / Default Slot -->
+    <div v-if="$slots.default || description" :class="ui.description({ class: props.ui?.description })">
+      <slot>
+        {{ description }}
+      </slot>
+    </div>
+  </div>
 </template>

package/dist/runtime/components/prose/CardGroup.vue

@@ -15,7 +15,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.cardGr
 </script>
 
 <template>
-  <div :class="ui({ class: props.class })">
-    <slot />
-  </div>
+  <div :class="ui({ class: props.class })">
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/prose/Code.vue

@@ -17,7 +17,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.code |
 </script>
 
 <template>
-  <code :class="ui({ class: (props.class || '').split(',').join(' '), color: props.color })">
-    <slot />
-  </code>
+  <code :class="ui({ class: (props.class || '').split(',').join(' '), color: props.color })">
+    <slot />
+  </code>
 </template>

package/dist/runtime/components/prose/CodeCollapse.vue

@@ -25,20 +25,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.codeCo
 </script>
 
 <template>
-  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <slot />
-
-    <div :class="ui.footer({ class: props.ui?.footer })">
-      <UButton
-        :icon="icon || appConfig.ui.icons.chevronDown"
-        color="neutral"
-        variant="outline"
-        :data-state="open ? 'open' : 'closed'"
-        :label="`${open ? props.closeText || t('prose.codeCollapse.closeText') : props.openText || t('prose.codeCollapse.openText')} ${props.name || t('prose.codeCollapse.name')}`"
-        :class="ui.trigger({ class: props.ui?.trigger })"
-        :ui="{ leadingIcon: ui.triggerIcon({ class: props.ui?.triggerIcon }) }"
-        @click="open = !open"
-      />
-    </div>
-  </div>
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot />
+
+    <div :class="ui.footer({ class: props.ui?.footer })">
+      <UButton
+        :icon="icon || appConfig.ui.icons.chevronDown"
+        color="neutral"
+        variant="outline"
+        :data-state="open ? 'open' : 'closed'"
+        :label="`${open ? props.closeText || t('prose.codeCollapse.closeText') : props.openText || t('prose.codeCollapse.openText')} ${props.name || t('prose.codeCollapse.name')}`"
+        :class="ui.trigger({ class: props.ui?.trigger })"
+        :ui="{ leadingIcon: ui.triggerIcon({ class: props.ui?.triggerIcon }) }"
+        @click="open = !open"
+      />
+    </div>
+  </div>
 </template>